微信小程序授权登录及解密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功能的正确方法(译文)
Apr 12 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
jQuery插件开发汇总
May 15 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
前端开发基础javaScript的六大作用
Aug 06 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读取目录下所有文件的代码
2008/01/07 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
面包屑导航详解
2017/12/07 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
工作人员思想汇报
2014/01/09 职场文书
好的旅游活动方案
2014/08/19 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS