【uni-app】小程序实现微信授权登陆(附流程图)
2023-03-31 10:43:02 时间
微信授权登陆是比较常见的一种登陆方式,今天来总结下实现流程
-
进入授权登陆页面
-
初始化调用wx.login获取登陆凭证code(用户无感知)
//封装微信获取用户code,避免嵌套
login() {
return new Promise((resolve, reject) => {
uni.login({
success(res) {
resolve(res);
},
fail(err) {
reject(err);
}
});
});
}
-
用登陆凭证code调用后端接口去获取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)及本次登录的会话密钥(session_key)等(用户无感知)
async init() {
//调用微信登陆
let res = await this.login()
if (res.code && ['login:ok'].includes(res.errMsg)) {
//后端通过code调用微信API返回openid/unionid/session_key参数, 存储起来,前端无法直接调用微信相关API
let openIdRes = await getWechatOpenIdByCode({ code: res.code })
if (openIdRes.success) {
let { openId, sessionKey } = openIdRes
this.openId = openId
this.sessionKey = sessionKey
}
} else {
//异常处理,再次发起请求或者抛出异常
// .....
}
},
- 用户点击微信手机号快捷登录按钮,触发授权弹窗(需用户主动触发,不允许api主动调用),详细使用看官方文档
- 用户允许授权会触发getphoneNumber小程序事件获取到encryptedData, iv参数
//微信授权登陆按钮
<u-button open-type="getPhoneNumber" @getphonenumber="getphoneNumber">用户授权登陆</u-button>
//JS部分
//用户授权登陆允许后,返回encryptedData, iv参数
getPhoneNumber(e) {
//拿到参数后进一步去解密....
// 授权通过后轮询等待获取sessionKey响应成功
if (['getPhoneNumber:ok'].includes(e?.detail?.errMsg)) {
this.handlePolling(e)
}
}
/**
* 轮询查询是否有sessionKey,防止初始化接口响应时间过长拿不到解密入参,用户解密失败
*/
handlePolling(e) {
this.timer = setInterval(() => {
if (this.sessionKey) {
this.decryptDataInfo(e.detail)
this.timer = null
}
}, 300)
},
- 调用后端解密接口,解密拿到用户的手机信息(手机号、区号、国家等)
- 调用后端登陆接口,传入openId、用户手机号,返回登陆token完成登陆
-
/** * 解密获取手机号码,区号 */ async decryptDataInfo(detail:any) { let params = { encryptedData: detail.encryptedData, sessionKey: this.sessionKey, iv: detail.iv, appId: getLocalStorage(AppIdKey), } let res = await decryptApi(params) if (res.success) { //解密成功,获取到手机号码,区号等信息 let data = JSON.parse(res.data) // 调用后端登陆接口传入信息,完成登陆 this.loginMinor(data) } else { //....异常处理 } }
有些朋友可能觉得写的不够清晰,重新补充了个流程图
-
相关文章
- cocos 3.0 一键打包android平台应该注意的细节
- 数智化时代,驱动企业转型升级的“三驾马车”是什么?
- 基于MINA构建高性能的NIO应用
- 使用Rainbond实现离线环境软件交付
- 工作流引擎 jBPM 5.2 发布
- 微信小程序Minium自动化测试(三)
- 桌面应用抢先体验,这次有点料!
- 甲骨文Java专利遭拒 起诉Android侵权受挫
- 云计算的应用领域及发展前景
- Java效率真的很低吗?Android为何要采用?
- Android高级进阶之路【二】十分钟彻底弄明白 View 事件分发机制
- 庖丁解牛之-Android平台RTSP|RTMP播放器设计
- 手机直付,超级方便
- Android入门教程 | ImageView 图片显示
- 5步法,快速找到数据分析思路
- Android摄像头|屏幕实现轻量级RTSP服务(类似于IPC)
- C# EF 查询数据循环应用名问题解决
- 云原生第1课:云原生发展历程与技术体系
- 《云原生:运用容器、函数计算和数据构建下一代应用》思维导图
- 实战技能分享,一劳永逸的解决BOOT跳转APP失败问题,含MDK AC5,AC6和IAR,同时制作了一个视频操作说明