微信小程序授权登录及解密unionId出错的方法


Posted in Javascript onSeptember 26, 2018

注:没有在微信开放平台做开发者资质认证的就不要浪费时间了,没认证无法获取unionId,认证费用300元/年,emmmm....

微信授权登录流程

第一步:wx.login获取 用户临时登录凭证code

第二步:wx.getUserInfo获取加密过的数据encryptedData和解密参数iv

第三步:把步骤一、二中的code、encryptedData、iv传到开发者自己服务端

第三步:服务端获取到code、encryptedData、iv之后用get方法请求如下微信接口

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

appid:小程序appid

secret: 小程序密钥

js_code: 第一步获取的临时登录凭证code

grant_type:'authorization_code'

接口会返回 openid, session_key,注意:用户已经授权过的平台还会返回unionId,如果你只是需要unionId,则到此为止

官方文档说法如图:

微信小程序授权登录及解密unionId出错的方法

没有授权过则用encryptedData、session_key、iv、appid、secret进行解密,官方多语言解密示例下载链接:
unionId解密示例

包含c++ php python node

第四步:仿照示例解密后获得unionId,想做什么就做什么了~

以下是授权登录前端代码:

authLogin () {
  wx.login({
   success: loginRes => {
    let code = loginRes.code // 获取用户临时code
    wx.getUserInfo({
     success: function (res) {
      let encryptedData = res.encryptedData // 获取加密数据
      let iv = res.iv // 解密参数
      // 发送解密必要数据到服务端
      wx.request({
       url: 'http://localhost',
       methods: 'POST',
       data: {
        code: code,
        encryptedData: encryptedData,
        iv: iv
       },
       succeess: res => {
        // 服务端首先调用微信接口获取session_key
        // 用户已经授权过的平台会直接返回unionId
        // 没有授权过则用session_key进行解密
        // 解密成功后服务端根据逻辑返回自定义信息
       }
      })
     }
    })
   }
  })
 }

以上步骤可行,但是微信调整了用户授权方式

微信小程序授权登录及解密unionId出错的方法

新的授权需用button组件调用getUserInfo,所以在这之前无法调用wx.login,但是如果先调用获取用户信息再调用wx.login的话,解密过程会出错,猜测code对应的session_key和之前getUserInfo获取的encryptedData不匹配

解决办法:

在页面的onLoad生命周期里调用wx.login,获取的code存入data以备需要的时候使用,但是code失效时间为5分钟,如果用户停留页面时间过长后点击授权登录,此时的code已经过期了,所以,获取code的函数应该每4分钟左右调用一次

wxml按钮授权:

<button open-type='getUserInfo' bindgetuserinfo="authLogin">微信登录</button>

js:

// 获取code
 onLoad: function (options) {
  this.getCodeTimer()
 },
 getCodeTimer () {
  wx.login({
   success: res => {
    this.data.code = res.code
    setTimeout(() => {
     this.getCodeTimer()
    }, 4 * 60 * 1000)
   }
  })
 },
 // 授权登录
 authLogin(event) {
  if (event.detail.errMsg == 'getUserInfo:ok') {
   wx.showLoading()
   let reqData = {
    code: this.data.code,
    encryptedData: event.detail.encryptedData,
    iv: event.detail.iv
   }
   wx.request({
    url: 'http://localhost:8080',
    methods: 'POST',
    data: reqData,
    success: (res) => {
     console.log(res)
      // 请求完成
    }
   })
  } else {
   console.log('用户拒绝授权')
  }
 }

授权逻辑修改后实测没有出过错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
js实现指定时间倒计时效果
Aug 26 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
vue根据进入的路由进行原路返回的方法
Sep 26 #Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 #Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 #Javascript
react-navigation之动态修改title的内容
Sep 26 #Javascript
React项目动态设置title标题的方法示例
Sep 26 #Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 #Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 #Javascript
You might like
Thinkphp关闭缓存的方法
2015/06/26 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
php生成验证码函数
2015/10/20 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
JS中关于正则的巧妙操作
2017/08/31 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
vue filters的使用详解
2018/06/11 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
js实现随机8位验证码
2020/07/24 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
初学python数组的处理代码
2011/01/04 Python
Python 常用string函数详解
2016/05/30 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
电子装配专业毕业生求职信
2014/04/23 职场文书
初二学习计划书范文
2014/04/27 职场文书
找工作求职信
2014/07/07 职场文书
毕业生见习报告总结
2014/11/08 职场文书
大学生个人学年总结
2015/02/15 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL