微信小程序授权登录及解密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异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
JQuery实现图片轮播效果
May 08 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
微信小程序实现工作时间段选择
Feb 15 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
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
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
python模块之StringIO使用示例
2015/04/08 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
2014小学数学教师个人工作总结
2014/12/18 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Python中glob库实现文件名的匹配
2021/06/18 Python