最近研究了扫码登录相关逻辑, 如有问题还望指正
流程图
参考代码
后端相关代码
主要展示service代码
- 生成二维码guid
https://github.com/klren0312/ironInfoWeapp/blob/master/ApiServer/app/service/v1/user.js#L124
生成guid, 并将guid和扫码状态存入redis
genGuid: () => {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
const r = Math.random() * 16 | 0;
const v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
async genLoginQrcode() {
const { ctx } = this;
const guid = ctx.helper.genGuid();
await redis.set(guid, 'no', 'EX', 60);
return guid;
}
- 小程序扫码后, 后台判断是否可用
https://github.com/klren0312/ironInfoWeapp/blob/master/ApiServer/app/service/v1/user.js#L139
扫码后, 判断是否存在二维码, 若存在, 则判断是否有效, 有效则判断当前微信用户是否绑定了后管账号, 绑定则进行登录操作, 反之返回未绑定状态码
async checkLoginQrcode(guid, openId) {
const { ctx, app } = this;
const { wuser } = ctx.service.v1;
const check = await redis.get(guid);
if (check === 'no') {
const user = await wuser.getBindUser(openId);
if (user) {
const token = app.getUserJson(user, ctx, 1);
await redis.set(guid, JSON.stringify(token));
return user;
} else {
await redis.set(guid, 'yes');
return '3333'
}
return '1111'; // 无此用户
}
return '2222'; // 二维码无效
}
- 用于后管前端轮询获取二维码状态
https://github.com/klren0312/ironInfoWeapp/blob/master/ApiServer/app/service/v1/user.js#L164
通过guid从redis中对应的值, 获取状态
async checkLoginQrcodeStatus(guid) {
const tokenStr = await redis.get(guid);
if (tokenStr && tokenStr !== 'no' && tokenStr !== 'yes') {
console.log(tokenStr)
const token = JSON.parse(tokenStr)
return token;
} else if (tokenStr && tokenStr === 'no') {
return false;
} else if (tokenStr && tokenStr === 'yes') {
return 'scan'
}
return 'invalid';
}
小程序相关代码
https://github.com/klren0312/ironInfoWeapp/blob/master/Weapp/pages/home/home.vue#L187
先检测是否授权获取用户信息, 有的话去进行扫码登录, 没有的话先跳小程序登录页
扫码登录后, 判断状态, 若为未绑定, 则跳绑定页
toQrcode() {
// #ifdef MP-WEIXIN
if (this.checkAuth()) {
uni.scanCode({
success: (res) => {
if (res.result) {
try{
const obj = JSON.parse(res.result)
console.log(obj.guid)
if (obj && obj.hasOwnProperty('guid')) {
const openId = uni.getStorageSync('openId')
console.log(openId)
checkQrcode(obj.guid, openId).then(res => {
console.log(res)
const status = res.data
switch(status) {
case '1111':
uni.showToast({
icon: 'none',
title: '无此用户'
})
break
case '2222':
uni.showToast({
icon: 'none',
title: '二维码失效'
})
break
case '3333':
uni.showToast({
icon: 'none',
title: '未绑定用户'
})
uni.navigateTo({
url: '/pages/login/login'
})
break
default:
uni.showToast({
icon: 'success',
title: '扫码登录成功!'
})
break
}
})
} else {
uni.showToast({
icon: 'none',
title: '二维码无效'
})
}
}catch(e){
//TODO handle the exception
}
}
}
});
}
// #endif
}
后管前端代码
https://github.com/klren0312/ironInfoWeapp/blob/master/ServerWeb/src/pages/login/index.vue
没啥东西
演示地址
- 后管地址: http://admin.zzes1314.cn/
- 小程序码:
- 绑定用户的账密:
- 用户名: tour
- 密码: tour520
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3c3jhoe7n1ycs
