微信小程式前端解密擷取使用者資訊

在微信小程式中，通過使用者手動可以擷取到使用者昵稱，頭像等基本資訊，稍微敏感的資訊無法擷取到，需要通過後端解密才能擷取到。

例如擷取使用者手機：

在網上找到​​

​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) {}
        })
      }
    })      

解密後擷取的資訊如下圖：