使用CryptoJS解决微信小程序用户信息解密

使用CryptoJS解决微信小程序用户信息解密


问题描述:
wx.getUserInfo(OBJECT) 微信官方的这个获取用户信息的方法,需要对接口返回的加密数据( encryptedData )进行对称解密。

    微信官方有提供加密数据解密算法

  接口如果涉及敏感数据(如wx.getUserInfo当中的 openId 和unionId ),接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据,需要对接口返回的加密数据( encryptedData )进行对称解密。 解密算法如下:

  1. 对称解密使用的算法为 AES-128-CBC,数据采用PKCS#7填充。
  2. 对称解密的目标密文为 Base64_Decode(encryptedData)。
  3. 对称解密秘钥 aeskey = Base64_Decode(session_key), aeskey 是16字节。
  4. 对称解密算法初始向量 为Base64_Decode(iv),其中iv由数据接口返回。

  微信官方提供了多种编程语言的示例代码(点击下载)。每种语言类型的接口名字均一致。调用方式可以参照示例。

  另外,为了应用能校验数据的有效性,我们会在敏感数据加上数据水印( watermark )

  注:此前提供的加密数据(encryptData)以及对应的加密算法将被弃用,请开发者不要再依赖旧逻辑。


  下载后发现,这里边居然没有纯 js 的 demo,好歹你自己家的小程序是只能用 js 哇。


  使用CryptoJS解决微信小程序用户信息解密

找了网上好多文章,基本都是 Java 版本的解密,所以决定自己弄个纯js的。

 

  干货:模仿 Node 的 demo,使用 CryptoJS实现纯 js 下解密用户信息

  1. 将 CryptoJS 的包放入 小程序的 utils 中(点击下载

    使用CryptoJS解决微信小程序用户信息解密

  2. 封装 RdWXBizDataCrypt.js

/**
 * Created by rd on 2017/5/4.
 */
// 引入CryptoJS
var Crypto = require(‘cryptojs/cryptojs.js‘).Crypto;
var app = getApp();

function RdWXBizDataCrypt(appId, sessionKey) {
  this.appId = appId
  this.sessionKey = sessionKey
}

RdWXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
  // base64 decode :使用 CryptoJS 中 Crypto.util.base64ToBytes()进行 base64解码
  var encryptedData = Crypto.util.base64ToBytes(encryptedData)
  var key = Crypto.util.base64ToBytes(this.sessionKey);
  var iv = Crypto.util.base64ToBytes(iv);

  // 对称解密使用的算法为 AES-128-CBC,数据采用PKCS#7填充
  var mode = new Crypto.mode.CBC(Crypto.pad.pkcs7);
  
  try {
    // 解密
    var bytes = Crypto.AES.decrypt(encryptedData, key, {
        asBpytes:true,
        iv: iv,
        mode: mode
    });
    
    var decryptResult = JSON.parse(bytes);
    
  } catch (err) {
    console.log(err)
  }

  if (decryptResult.watermark.appid !== this.appId) {
    console.log(err)
  }

  return decryptResult
}

module.exports = RdWXBizDataCrypt

 

  3. 在 app.js 中引入 RdWXBizDataCrypt

var WXBizDataCrypt = require(‘utils/RdWXBizDataCrypt.js‘);
var AppId = ‘wx**************‘
var AppSecret = ‘8f***************************‘

App({
  onLaunch: function () {
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口,获取 code
      wx.login({
        success: function (res) {
          //发起网络请求
          wx.request({
              url: ‘https://api.weixin.qq.com/sns/jscode2session‘,
              data:{
                  appid:AppId,
                  secret:AppSecret,
                  js_code:res.code,
                  grant_type:‘authorization_code‘
              },
              header: {  
                  "Content-Type": "application/x-www-form-urlencoded"
              }, 
              method: ‘GET‘, 
              success: function(res){
                var pc = new WXBizDataCrypt(AppId, res.data.session_key)
                wx.getUserInfo({
                  success: function (res) {
                    var data = pc.decryptData(res.encryptedData , res.iv)
                    console.log(‘解密后 data: ‘, data)
                  }
                })
              },
              fail: function(res) {},
              complete: function(res) {}
          });
        }
      })
    }
  }
})

 

  4. 实现效果

     使用CryptoJS解决微信小程序用户信息解密

附图:微信官方时序图

使用CryptoJS解决微信小程序用户信息解密

使用CryptoJS解决微信小程序用户信息解密

上一篇:哪些领域适合开发微信小程序


下一篇:微信小程序开发(1) 天气预报