微信小程序授权登录及解密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 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
原生js+css实现tab切换功能
Sep 17 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面向对象全攻略 (七) 继承性
2009/09/30 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
JS中递归函数
2016/06/17 Javascript
Angular路由简单学习
2016/12/26 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python实现图片九宫格分割
2021/03/07 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
智乐游戏测试笔试题
2014/05/21 面试题
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
求职意向书范文
2014/04/01 职场文书
企业读书活动总结
2014/06/30 职场文书
先进党员事迹材料
2014/12/24 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
求职推荐信范文
2015/03/27 职场文书