uniApp微信小程序唤出授权头像昵称(微信授权登录)弹窗，及服务端用户信息解密注意事项

头像昵称弹窗弹出条件：button授权按钮 + uni.getUserProfile API请求

简单唤醒示范案例：

1.H5部分

<text class="loginsubmitbox-text"  v-on:tap="wechatLogin">微信一键登录</text>

2.JS部分

wechatLogin(){// 获取用户信息uni.getUserProfile({desc: '获取你的昵称、头像、地区及性别',success: res => {console.log(res);console.log(1);},fail: res => {console.log(2);console.log(res)//拒绝授权uni.showToast({title: '您拒绝了请求,不能正常使用小程序',icon: 'error',duration: 2000});return;}});
}

注意事项：

不能嵌入其他API内调用，一定要在调用的方法中第一层执行（优先执行uni.getUserProfile）

正确做法：必须第一步用户点击按钮，第二步调取uni.getUserProfile API（调取uni.getUserProfile操作与用户操作紧密联系）

错误做法：第一步用户点击按钮，第二步调uni.checkSession ，第三步才调取uni.getUserProfile API（中间隔着其他操作会导致调取uni.getUserProfile API授权弹窗失败）

实战应用中的授权登录示范案例：

1.错误写法：（两点错误：1.uni.checkSession中嵌入uni.getUserProfile会导致头像授权弹窗拉不起来；2.uni.login应该在uni.getUserProfile之前执行，否则会导致秘钥和密文不匹配从而解密失败）

wechatLogin() {//检查登录态是否过期uni.checkSession({provider: 'weixin',success: function(loginRes) {console.log('checkSession成功', loginRes);},fail: function(loginRes) {console.log('checkSession失败', loginRes);// 获取用户信息uni.getUserProfile({desc: '获取你的昵称、头像、地区及性别',success: res => {console.log('获取你的昵称、头像', res);//重新登录uni.login({provider: 'weixin',success: function(loginRes) {console.log('login重新登录', loginRes);// 登录请求// api.apiPost("/api/member/wechatappauth", {//   jscode: loginRes.code,// }, (res) => {//    console.log(res)//  if (res.code == 0) {//    } else {//      uni.showModal({//           title: '提示',//            content: res.msg,//         });//   }// })},fail: function(loginRes) {console.log(loginRes)}});},fail: res => {console.log(2);console.log(res)//拒绝授权uni.showToast({title: '您拒绝了请求,不能正常使用小程序',icon: 'error',duration: 2000});return;}});},});
}

2.正确写法：（uni.getUserProfile在最外层直接调用，这样就成功唤醒授权弹窗；且uni.login要比uni.getUserProfile先执行）

wechatLogin() {//检查登录态是否过期uni.checkSession({provider: 'weixin',success: function(loginRes) {console.log('checkSession成功',loginRes);},fail: function(loginRes) {console.log('checkSession失败',loginRes);},});//重新登录let jsCode = ''uni.login({provider: 'weixin',success: function(loginRes) {jsCode = loginRes.code;console.log('login重新登录',{jscode: loginRes.code,jscodeinfo:res});},fail: function(loginRes) {console.log(loginRes)}});// 获取用户信息uni.getUserProfile({desc: '获取你的昵称、头像、地区及性别',success: res => {console.log('获取你的昵称、头像',res);// 登录请求// api.apiPost("/api/member/wechatappauth", {//     jscode: jsCode,//   jscodeinfo:res// }, (res1) => {//   console.log(res1)//     if (res1.code == 0) {//   } else {//      uni.showModal({//           title: '登录失败',//          content: '请刷新小程序后重新操作',//         });//   }// })},fail: res => {console.log(2);console.log(res)//拒绝授权uni.showToast({title: '您拒绝了请求,不能正常使用小程序',icon: 'error',duration: 2000});return;}});
}

注意事项：

服务端用户信息解密失败原因：小程序客户端调用微信服务器的接口顺序反了。

 顺序应该是  1、wx.login    2、wx.getUserInfo 。
如果顺序反过来 ，会出现校验解密失败的问题，比较坑的是 不是每次都出错。

小程序客户端需要调用微信服务器的wx.login接口来获取code，然后调用wx.getUserInfo来获取加密数据和偏移向量iv。正确的顺序应该是先调用login，然后再调用getUserInfo。

uniApp微信小程序唤出授权头像昵称(微信授权登录)弹窗，及服务端用户信息解密注意事项相关推荐

微信小程序官方调整头像昵称获取问题；微信扫码链接wifi，wifi地推，两种可行的解决方案
微信小程序官方调整头像昵称获取问题:微信扫码链接wifi,wifi地推更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访 ...
微信小程序获取获取头像昵称
小程序获取头像昵称之前可以通过以下代码可以实现2022年2月21日24时起小程序回收,目前已经停用. 小程序用户信息相关接口调整公告链接如下 https://developers.weixin.qq. ...
微信小程序最新获取头像昵称方式
前言版本历史变迁一.获取头像的正确姿势二.获取昵称的正确姿势总结前言产品需要获取微信用户的昵称和头像. 这这还不简单,so easy! 通过wx.getUserProfile或者 wx.g ...
java获取openid_JAVA获取微信小程序openid和获取公众号openid，以及通过openid获取用户信息...
https://www.cnblogs.com/lxwt/p/10154540.html?tdsourcetag=s_pcqq_aiomsg 一,首先说明下这个微信的openid 为了识别用户,每个用 ...
微信小程序页面onLoad获取app.js的onLaunch数据（异步获取用户信息）
微信小程序声明周期小程序的生命周期,简单来说:就是app.js里的onLaunch和页面里的page.js的onLoad异步执行. 通过回调函数架构起联系,便于获取app.js内的全局数据代码 a ...
2000套微信微信小程序源码+抖音微信小程序源码附开源代码
授权微信小程序SDK(authing-wxapp-sdk)适用于微信微信小程序(打开新窗口)基于微信微信小程序环境.可以使用微信微信小程序源码中的所有方法,比如Get,修改用户信息,添加用户自定义字段 ...
微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
微信小程序获取个人头像和昵称，和地图选点功能
微信小程序获取个人头像和昵称,有技巧 1.可以直接获取 2.通过用户点击获取过程中,有什么问题,可以加我微信号yizheng369探讨先分析这里面隐含了很多默认的规则,大家要注意: 1.可以直接 ...
微信小程序最新获取头像以及昵称方法
微信小程序最新获取头像信息之前是使用open-dada获取微信头像和昵称,但是后面由于官网更新,此方法被收回了,所以不能使用此方法了. 之前方法代码: <open-data type=&quo ...

uniApp微信小程序唤出授权头像昵称(微信授权登录)弹窗，及服务端用户信息解密注意事项

简单唤醒示范案例：

实战应用中的授权登录示范案例：

注意事项：

uniApp微信小程序唤出授权头像昵称(微信授权登录)弹窗，及服务端用户信息解密注意事项相关推荐

最新文章

热门文章