二维码登录实现(EggJS, 小程序)
时间:2022-07-23
本文章向大家介绍二维码登录实现(EggJS, 小程序),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近研究了扫码登录相关逻辑, 如有问题还望指正
流程图
二维码登录流程图
参考代码
后端相关代码
主要展示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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法