微信小程序前端解密获取用户信息

在微信小程序中，通过用户手动可以获取到用户昵称，头像等基本信息，稍微敏感的信息无法获取到，需要通过后端解密才能获取到。

例如获取用户手机：

在网上找到​​

​cryptojs​

​包，下载下来复制到utils文件夹中：如图

创建RdWXBizDataCrypt.js，文件名随意！

/**
 * Created by rd on 2017/5/4.
 */
// 引入CryptoJS
var Crypto = require('cryptojs-master/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 {
    console.log(key, iv)
    // 解密
    var bytes = Crypto.AES.decrypt(encryptedData, key, {
      asBpytes: true,
      iv: iv,
      mode: mode
    });

    var decryptResult = JSON.parse(bytes);

  } catch (err) {
    console.log(err)
  }

  console.log(decryptResult)

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

  return decryptResult
}

module.exports = RdWXBizDataCrypt      

在button组件中设置：

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登陆</button>      

效果如图

在对应的js文件中,代码如下：

//index.js
//获取应用实例
const app = getApp()
const WXBizDataCrypt = require('../../utils/RdWXBizDataCrypt.js');
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    loginImg: "../img/login.png",
    session_key:""
  },
  //事件处理函数
  getPhoneNumber(e) {
    console.log(e)
    var msg = e.detail.errMsg,
      that = this;
    var that = this;
    if (msg == 'getPhoneNumber:ok') {
      wx.checkSession({
        success: function(res) {
          console.log(res)
          var pc = new WXBizDataCrypt(appId, app.globalData.session_key);
          var data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
          console.log('解密后 data: ', data)
        },
        fail: function() {}
      })
    }
  },
  onLoad: function() {

  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})      

session_key是在app.js中登陆获取的，代码如下：

wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        wx.request({
          url: `https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=`+res.code+`&grant_type=authorization_code`,
          method: 'GET',
          success: function(res) {
            that.globalData.session_key = res.data.session_key
            //可以将openid和sessionKey放到缓存中
            wx.setStorage({
              key: 'session_key',
              data: res.data.session_key,
              success: function(res) {},
              fail: function(res) {},
              complete: function(res) {},
            })
            wx.setStorage({
              key: 'openId',
              data: res.data.openid,
              success: function(res) {},
              fail: function(res) {},
              complete: function(res) {},
            })
          },
          fail: function(res) {},
          complete: function(res) {}
        })
      }
    })      

解密后获取的信息如下图：