读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

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

2020年07月01日 230点热度 0人点赞 0条评论

在微信小程序中,通过用户手动可以获取到用户昵称,头像等基本信息,稍微敏感的信息无法获取到,需要通过后端解密才能获取到。
例如获取用户手机:
在网上找到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) {}
        })
      }
    })

解密后获取的信息如下图:
在这里插入图片描述
写的有点简单,希望能够给浏览这篇博客的你一些思路,
谢谢!!!

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
canvas node 随笔 vue Nginx CSS flutter git 闲谈 Echarts 悦读 hook 小程序 阅读 taro react JavaScript mysql redux
推荐文章
  1. 微信小程序中自定义导航和地图定位
  2. 微信小程序上传图片
  3. 小程序云开发·数据库
  4. 小程序图片压缩
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号