Commit 6a998c9c8b91b7b03aa724f2a33647a8f9ed9707

Authored by fengtao
1 parent ee048928

fix:修改第三方登录获取openid

Showing 1 changed file with 221 additions and 362 deletions
1 1 <template>
2   - <view class="login-page">
3   - <!-- 公共组件-每个页面必须引入 -->
4   -
5   - <public-module></public-module>
6   -
7   - <view class="u-flex login-main">
8   - <view class="content">
9   - <view class="hello login-text-muted">您好,</view>
10   -
11   - <view class="hello-welcome login-text-muted">欢迎来到ThingsKit!</view>
12   - </view>
13   - </view>
14   -
15   - <view class="f__login">
16   - <view class="loginPhone">
17   - <view class="form-row u-flex">
18   - <view class="v-input"
19   - ><input
20   - type="text"
21   - v-model="loginForm.username"
22   - maxlength="32"
23   - placeholder="请输入登录账号"
24   - /></view>
25   -
26   - <u-icon></u-icon>
27   - </view>
28   -
29   - <view class="form-row u-flex">
30   - <view class="v-input"
31   - ><input
32   - type="text"
33   - v-model="loginForm.password"
34   - maxlength="32"
35   - placeholder="请输入登录密码"
36   - :password="!showPassword"
37   - /></view>
38   -
39   - <view class="v-password" @click="showPasswordMode">
40   - <u-icon
41   - color="#9a9a9a"
42   - width="18"
43   - height="15"
44   - :name="showPassword ? '/static/eye.png' : '/static/eye-hide.png'"
45   - ></u-icon>
46   - </view>
47   -
48   - <u-icon></u-icon>
49   - </view>
50   -
51   - <button class="submit" size="default" @click="onSubmitFunc">
52   - <text class="text">登录</text>
53   - </button>
54   -
55   - <view class="u-flex row-item">
56   - <view class="row-phone login-text-gray" @click="openCodeFunc"
57   - >手机验证码登录</view
58   - >
59   -
60   - <view class="row-reset login-text-gray" @click="findPassrordFunc"
61   - >忘记密码</view
62   - >
63   - </view>
64   -
65   - <view class="u-flex link-login">
66   - <view class="link-text login-text-gray">第三方账号登录</view>
67   -
68   - <view style="height: 20rpx"></view>
69   -
70   - <button class="link-image" @tap="onWenxinAuthorization">
71   - <image
72   - class="image"
73   - src="../../static/weixin.png"
74   - mode="aspectFill"
75   - ></image>
76   - </button>
77   - </view>
78   - </view>
79   - </view>
80   - </view>
  2 + <view class="login-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="u-flex login-main">
  6 + <view class="content">
  7 + <view class="hello login-text-muted">您好,</view>
  8 + <view class="hello-welcome login-text-muted">欢迎来到ThingsKit!</view>
  9 + </view>
  10 + </view>
  11 + <view class="f__login">
  12 + <view class="loginPhone">
  13 + <view class="form-row u-flex">
  14 + <view class="v-input"><input type="text" v-model="loginForm.username" maxlength="32" placeholder="请输入登录账号" /></view>
  15 + <u-icon></u-icon>
  16 + </view>
  17 + <view class="form-row u-flex">
  18 + <view class="v-input"><input type="text" v-model="loginForm.password" maxlength="32" placeholder="请输入登录密码" :password="!showPassword" /></view>
  19 + <view class="v-password" @click.stop="showPasswordMode">
  20 + <u-icon color="#9a9a9a" width="18" height="15" :name="showPassword ? '/static/eye.png' : '/static/eye-hide.png'"></u-icon>
  21 + </view>
  22 + <u-icon></u-icon>
  23 + </view>
  24 + <button class="submit" size="default" @click="onSubmitFunc"><text class="text">登录</text></button>
  25 + <view class="u-flex row-item">
  26 + <view class="row-phone login-text-gray" @click="openCodeFunc">手机验证码登录</view>
  27 + <view class="row-reset login-text-gray" @click="findPassrordFunc">忘记密码</view>
  28 + </view>
  29 + <view class="u-flex link-login">
  30 + <view class="link-text login-text-gray">第三方账号登录</view>
  31 + <view style="height: 20rpx"></view>
  32 + <button class="link-image" @tap="onWenxinAuthorization"><image class="image" src="../../static/weixin.png" mode="aspectFill"></image></button>
  33 + </view>
  34 + </view>
  35 + </view>
  36 + </view>
81 37 </template>
82 38
83 39 <script>
84   -import { mapMutations, mapActions } from "vuex";
85   -
86   -import { loginApp } from "@/config/login";
87   -
88   -import baseUrl from "@/config/baseUrl.js";
89   -
90   -import WXBizDataCrypt from "@/config/WXBizDataCrypt.js";
91   -
92   -import { appId, appSecrect } from "@/config/constant.js";
  40 +import { mapMutations, mapActions } from 'vuex';
  41 +import { loginApp } from '@/config/login';
  42 +import baseUrl from '@/config/baseUrl.js';
  43 +import WXBizDataCrypt from '@/config/WXBizDataCrypt.js';
  44 +import { appId, appSecrect } from '@/config/constant.js';
93 45
94 46 export default {
95   - data() {
96   - return {
97   - loginForm: {
98   - username: "",
99   -
100   - password: "",
101   - },
102   -
103   - showPassword: false,
104   -
105   - code: "",
106   -
107   - openid: "",
108   - };
109   - },
110   -
111   - onLoad() {
112   - wx.login({
113   - success: (res) => {
114   - if (res.code) {
115   - this.code = res.code;
116   -
117   - //这里获取openid
118   - } else {
119   - return;
120   - }
121   - },
122   - });
123   - },
124   -
125   - methods: {
126   - ...mapMutations(["setUserInfo"]),
127   -
128   - ...mapActions(["updateBadgeTotal"]),
129   -
130   - //微信授权登录
131   -
132   - //#ifdef MP-WEIXIN
133   -
134   - onWenxinAuthorization() {
135   - wx.getUserProfile({
136   - desc: "微信第三方授权",
137   -
138   - success: (reswenxin) => {
139   - console.log("res=======>", reswenxin);
140   -
141   - if (
142   - reswenxin.errMsg === "getUserProfile:ok" &&
143   - reswenxin.encryptedData
144   - ) {
145   - console.log("获取code", this.code);
146   -
147   - //获取用户信息
148   -
149   - let obj = {
150   - avatarUrl: reswenxin.userInfo.avatarUrl,
151   -
152   - thirdUserId: this.openid,
153   - };
154   -
155   - //判断是否需要绑定
156   -
157   - uni.$u.http
158   -
159   - .get(`/yt/third/login/${this.code}`)
160   -
161   - .then((res) => {
162   - console.log("Res", res);
163   -
164   - //设置全局变量openId
165   -
166   - // getApp().globalData.openId = res.data.openid;
167   -
168   - if (
169   - res.token == "" ||
170   - (res.token == null && res.refreshToken)
171   - ) {
172   - //需要绑定
173   -
174   - let userInfo = {
175   - isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号
176   -
177   - avatar: obj.avatarUrl,
178   - };
179   -
180   - this.setUserInfo(userInfo);
181   -
182   - //设置全局变量openId
183   -
184   - getApp().globalData.openId = res.refreshToken;
185   -
186   - uni.reLaunch({
187   - url: "../../pages/personal/personal",
188   - });
189   - } else {
190   - // 不需要绑定,直接第三方登录使用
191   -
192   - let resObj = {
193   - refreshToken: res.refreshToken,
194   -
195   - isToken: res.token,
196   - };
197   -
198   - let userInfo = {
199   - ...resObj,
200   -
201   - token: true, //token用于判断是否登录
202   -
203   - isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号
204   - };
205   -
206   - if (userInfo.token) {
207   - this.setUserInfo(userInfo);
208   - }
209   -
210   - uni.showToast({
211   - title: "第三方账号登录成功~",
212   -
213   - icon: "none",
214   - });
215   -
216   - this.saveUserInfo();
217   -
218   - this.getAlarmTotalData();
219   -
220   - uni.reLaunch({
221   - url: "../../pages/personal/personal",
222   - });
223   - }
224   - })
225   -
226   - .catch((e) => {
227   - uni.$u.toast(e.data?.message);
228   - });
229   - }
230   - },
231   -
232   - fail: (res) => {
233   - //拒绝授权
234   -
235   - return;
236   - },
237   - });
238   - },
239   -
240   - //#endif
241   -
242   - saveUserInfo() {
243   - //储存个人信息
244   -
245   - uni.$u.http.get("/yt/user/me/info").then((res) => {
246   - if (res) {
247   - this.setUserInfo(res);
248   - }
249   - });
250   - },
251   -
252   - async getAlarmTotalData() {
253   - const res = await uni.$u.http.get("/yt/homepage/app");
254   - if (res) {
255   - //异步实时更新告警徽标数
256   - this.updateBadgeTotal(res.totalAlarm.activedAlarm);
257   - }
258   - },
259   -
260   - onSubmitFunc() {
261   - if (this.loginForm.username == "") {
262   - return uni.$u.toast("请输入登录账号~");
263   - }
264   - const passReg =
265   - /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
266   -
267   - if (this.loginForm.password == "") {
268   - uni.showToast({
269   - title: "请输入登录密码~",
270   -
271   - icon: "none",
272   - });
273   - return;
274   - } else if (!passReg.test(this.loginForm.password)) {
275   - uni.showToast({
276   - title:
277   - "密码格式不正确(至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符)~",
278   -
279   - icon: "none",
280   -
281   - duration: 3000,
282   - });
283   -
284   - return;
285   - }
286   - uni.$u.http
287   - .post("/auth/login", this.loginForm)
288   -
289   - .then((res) => {
290   - if (res) {
291   - // 储存登录信息
292   -
293   - let resObj = {
294   - refreshToken: res.refreshToken,
295   -
296   - isToken: res.token,
297   - };
298   -
299   - let userInfo = {
300   - ...resObj,
301   -
302   - token: true, //token用于判断是否登录
303   -
304   - isThirdLogin: false,
305   - };
306   -
307   - if (userInfo.token) {
308   - this.setUserInfo(userInfo);
309   - }
310   -
311   - uni
312   - .showToast({
313   - title: "登录成功~",
314   -
315   - icon: "none",
316   - })
317   - .then((res) => {
318   - /**
319   -
320   - * 有些时候不起作用
321   -
322   - */
323   -
324   - // uni.navigateBack({
325   -
326   - // delta: 1
327   -
328   - // });
329   -
330   - // #ifdef APP-PLUS||MP
331   -
332   - uni.reLaunch({
333   - url: "/pages/personal/personal",
334   - });
335   -
336   - // #endif
337   - });
338   -
339   - this.saveUserInfo();
340   -
341   - this.getAlarmTotalData();
342   - }
343   - })
344   -
345   - .catch((e) => {
346   - uni.$u.toast(e.data?.message);
347   - });
348   - },
349   -
350   - openCodeFunc() {
351   - uni.navigateTo({
352   - url: "../other/code",
353   - });
354   - },
355   -
356   - findPassrordFunc() {
357   - uni.navigateTo({
358   - url: "../other/findPassword",
359   - });
360   - },
361   -
362   - showPasswordMode() {
363   - this.showPassword = !this.showPassword;
364   - },
365   - },
  47 + data() {
  48 + return {
  49 + loginForm: {
  50 + username: '',
  51 +
  52 + password: ''
  53 + },
  54 + showPassword: false,
  55 + code: '',
  56 + openid: ''
  57 + };
  58 + },
  59 + onLoad() {
  60 + wx.login({
  61 + success: res => {
  62 + if (res.code) {
  63 + this.code = res.code;
  64 + //这里获取openid
  65 + } else {
  66 + return;
  67 + }
  68 + }
  69 + });
  70 + },
  71 +
  72 + methods: {
  73 + ...mapMutations(['setUserInfo']),
  74 + ...mapActions(['updateBadgeTotal']),
  75 + //微信授权登录
  76 + //#ifdef MP-WEIXIN
  77 + onWenxinAuthorization() {
  78 + wx.getUserProfile({
  79 + desc: '微信第三方授权',
  80 + success: reswenxin => {
  81 + if (reswenxin.errMsg === 'getUserProfile:ok' && reswenxin.encryptedData) {
  82 + //获取用户信息
  83 + let obj = {
  84 + avatarUrl: reswenxin.userInfo.avatarUrl,
  85 + thirdUserId: this.openid
  86 + };
  87 + //判断是否需要绑定
  88 + uni.$u.http
  89 + .get(`/yt/third/login/${this.code}`)
  90 + .then(res => {
  91 + if (res.token == '' || (res.token == null && res.thirdUserId)) {
  92 + //需要绑定
  93 + let userInfo = {
  94 + isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号
  95 + avatar: obj.avatarUrl,
  96 + thirdUserId: res.thirdUserId
  97 + };
  98 + this.setUserInfo(userInfo);
  99 + //设置全局变量openId
  100 + getApp().globalData.openId = res.thirdUserId;
  101 + uni.reLaunch({
  102 + url: '../../pages/personal/personal'
  103 + });
  104 + } else {
  105 + // 不需要绑定,直接第三方登录使用
  106 + let resObj = {
  107 + refreshToken: res.refreshToken,
  108 + isToken: res.token
  109 + };
  110 + let userInfo = {
  111 + ...resObj,
  112 + token: true, //token用于判断是否登录
  113 + isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号
  114 + thirdUserId: res.thirdUserId
  115 + };
  116 + //设置全局变量openId
  117 + getApp().globalData.openId = res.thirdUserId;
  118 + if (userInfo.token) {
  119 + this.setUserInfo(userInfo);
  120 + }
  121 + uni.showToast({
  122 + title: '第三方账号登录成功~',
  123 + icon: 'none'
  124 + });
  125 + this.saveUserInfo();
  126 + this.getAlarmTotalData();
  127 + uni.reLaunch({
  128 + url: '../../pages/personal/personal'
  129 + });
  130 + }
  131 + })
  132 + .catch(e => {
  133 + // uni.$u.toast(e.data?.message);
  134 + });
  135 + }
  136 + },
  137 + fail: res => {
  138 + //拒绝授权
  139 + return;
  140 + }
  141 + });
  142 + },
  143 + //#endif
  144 + saveUserInfo() {
  145 + //储存个人信息
  146 + uni.$u.http.get('/yt/user/me/info').then(res => {
  147 + if (res) {
  148 + this.setUserInfo(res);
  149 + }
  150 + });
  151 + },
  152 + async getAlarmTotalData() {
  153 + const res = await uni.$u.http.get('/yt/homepage/app');
  154 + if (res) {
  155 + //异步实时更新告警徽标数
  156 + this.updateBadgeTotal(res.totalAlarm.activedAlarm);
  157 + }
  158 + },
  159 + onSubmitFunc() {
  160 + if (this.loginForm.username == '') {
  161 + return uni.$u.toast('请输入登录账号~');
  162 + }
  163 + const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
  164 + if (this.loginForm.password == '') {
  165 + uni.showToast({
  166 + title: '请输入登录密码~',
  167 + icon: 'none'
  168 + });
  169 + return;
  170 + } else if (!passReg.test(this.loginForm.password)) {
  171 + uni.showToast({
  172 + title: '密码格式不正确(至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符)~',
  173 + icon: 'none',
  174 + duration: 3000
  175 + });
  176 + return;
  177 + }
  178 + uni.$u.http
  179 + .post('/auth/login', this.loginForm)
  180 + .then(res => {
  181 + if (res) {
  182 + // 储存登录信息
  183 + let resObj = {
  184 + refreshToken: res.refreshToken,
  185 + isToken: res.token
  186 + };
  187 + let userInfo = {
  188 + ...resObj,
  189 + token: true, //token用于判断是否登录
  190 + isThirdLogin: false
  191 + };
  192 + if (userInfo.token) {
  193 + this.setUserInfo(userInfo);
  194 + }
  195 + uni.showToast({
  196 + title: '登录成功~',
  197 + icon: 'none'
  198 + }).then(async res => {
  199 + this.saveUserInfo();
  200 + await this.getAlarmTotalData();
  201 + uni.reLaunch({
  202 + url: '/pages/personal/personal'
  203 + });
  204 + });
  205 + }
  206 + })
  207 + .catch(e => {
  208 + uni.$u.toast(e.data?.message);
  209 + });
  210 + },
  211 + openCodeFunc() {
  212 + uni.navigateTo({
  213 + url: '../other/code'
  214 + });
  215 + },
  216 + findPassrordFunc() {
  217 + uni.navigateTo({
  218 + url: '../other/findPassword'
  219 + });
  220 + },
  221 + showPasswordMode() {
  222 + this.showPassword = !this.showPassword;
  223 + }
  224 + }
366 225 };
367 226 </script>
368 227
369 228 <style lang="scss" scoped>
370   -@import "./static/login.scss";
  229 +@import './static/login.scss';
371 230
372 231 /deep/ button {
373   - background: rgba(0, 0, 0, 0);
  232 + background: rgba(0, 0, 0, 0);
374 233 }
375   -</style>
  234 +</style>
... ...