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

 更新时间:2018年09月26日 14:43:16   作者:迷失   我要评论

这篇文章主要介绍了微信小程序授权登录及解密unionId出错的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

注:没有在微信开放平台做开发者资质认证的就不要浪费时间了,没认证无法获取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,则到此为止

官方文档说法如图:

没有授权过则用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进行解密
        // 解密成功后服务端根据逻辑返回自定义信息
       }
      })
     }
    })
   }
  })
 }

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

新的授权需用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('用户拒绝授权')
  }
 }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • js多个物体运动功能实例分析

    js多个物体运动功能实例分析

    这篇文章主要介绍了js多个物体运动功能,结合实例形式分析了js实现多物体运动功能的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • JS作为值的函数用法示例

    JS作为值的函数用法示例

    这篇文章主要介绍了JS作为值的函数用法,结合实例形式分析了javascript处理函数作为参数的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2016-06-06
  • nodejs win7下安装方法

    nodejs win7下安装方法

    什么是Node.js?还服务器端javascript?对于这个概念我在这篇文章不做解释,可以自己去搜索了解下,服务器端js不是新技术,只是最近的node.js的火爆让他爆发了,我会在以后的文章里解释什么是node.js
    2012-05-05
  • js时间比较 js计算时间差的简单实现方法

    js时间比较 js计算时间差的简单实现方法

    下面小编就为大家带来一篇js时间比较 js计算时间差的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 整理Javascript数组学习笔记

    整理Javascript数组学习笔记

    整理Javascript数组学习笔记,之前一系列的文章是跟我学习Javascript,本文就是进一步学习javascript数组,希望大家继续关注
    2015-11-11
  • document.forms用法示例介绍

    document.forms用法示例介绍

    forms 返回一个集合包含了了当前文档中的所有form元素,下面通过示例为大家介绍下document.forms用法,需要的朋友可以参考下
    2014-06-06
  • JS仿flash上传头像效果实现代码

    JS仿flash上传头像效果实现代码

    flash上传头像多不胜举了,可JS仿flash的见的不多,也是工作需要,就试着写写看!不料,设想还真的可行
    2011-07-07
  • 包含中国城市的javascript对象实例

    包含中国城市的javascript对象实例

    这篇文章主要介绍了包含中国城市的javascript对象,以一个javascript的json数据格式存储为例分析了javascript存储城市信息的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JS实现的radio图片选择按钮效果

    JS实现的radio图片选择按钮效果

    用JS实现的radio图片选择按钮效果
    2010-01-01
  • 使用CoffeeScrip优美方式编写javascript代码

    使用CoffeeScrip优美方式编写javascript代码

    CoffeeScript就是JavaScript,他进行的是一对一的编译,或者说是翻译,而且编译成的JavaScript代码可读性很强。本文给大家介绍使用CoffeeScript优美方式编写javascript代码,感兴趣的朋友一起看看吧
    2015-10-10

最新评论