Commit 6a998c9c8b91b7b03aa724f2a33647a8f9ed9707

Authored by fengtao
1 parent ee048928

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

Showing 1 changed file with 221 additions and 362 deletions
1 <template> 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 </template> 37 </template>
82 38
83 <script> 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 export default { 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 </script> 226 </script>
368 227
369 <style lang="scss" scoped> 228 <style lang="scss" scoped>
370 -@import "./static/login.scss"; 229 +@import './static/login.scss';
371 230
372 /deep/ button { 231 /deep/ button {
373 - background: rgba(0, 0, 0, 0); 232 + background: rgba(0, 0, 0, 0);
374 } 233 }
375 -</style> 234 +</style>