使用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 哇。

  

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

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

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

    

  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. 实现效果

    

附图:微信官方时序图

时间: 2024-10-10 02:28:16

使用CryptoJS解决微信小程序用户信息解密的相关文章

微信小程序用户信息解密失败导致的内存泄漏问题。

微信小程序获取用户解密的Session_key 然后对 encryptedData进行解密 偶尔报错 时间长了之后会报内存溢出: java.lang.OutOfMemoryError: GC overhead limit exceeded at javax.crypto.JarVerifier.verifySingleJar(JarVerifier.java:426) at javax.crypto.JarVerifier.verifyJars(JarVerifier.java:322) at

微信小程序用户评分实例

微信小程序用户评分实例!成都小程序开发实例为大家分享了微信小程序实现展示评分结果的具体代码,供大家参考,具体内容如下 根据评分展示整颗行星或者半颗星星 根据评分按照小数点展示整颗行星或者部分星星 wxml 本文实例为大家分享了微信小程序实现展示评分结果的具体代码,供大家参考,具体内容如下 根据评分展示整颗行星或者半颗星星 根据评分按照小数点展示整颗行星或者部分星星 wxml <view class="conmmentbox"> <view class="st

微信小程序开放数据解密 AES-128-CBC 解密(C#版本)

最近在开发小程序,需要跟微信服务端交互,微信敏感数据都有加密返回,需要在服务端接收进行解密后再返回给客户端小程序,今天就通过C# 进行数据的解密,官方下载下来是Node.C++.php等,就是没有C# 代码,于是就上度娘,找到 https://blog.csdn.net/jasonsong2008/article/details/83586119 https://www.cnblogs.com/jetz/p/6384809.html 经过一番研究,搞定啦,其实就是用了aes加密方法. 下面把第一

从session原理出发解决微信小程序的登陆问题

原理知识准备  对于已经熟悉了session原理的同学来说,我们都清楚:在浏览器端我们会存储一个sessionId,用它来作为凭证,在服务器端得到有关本次浏览器与服务器会话的所有信息,这些信息是储存在服务器端的存储空间中的,它完全可以用来判断一个浏览器端的登录状态,因为它是由服务器端来掌控的,是安全的. 那么浏览器端是用什么来存储这个sessionId? 并且浏览器又是如何将sessionId传回给服务器的呢? 大体上是有两种方法的: 1.使用浏览器端实现的cookie功能,每次浏览器都会将服务

微信小程序用户身份-微信小程序前端开发工具

一个团队进行小程序的开发,那么团队成员的身份管理是很有必要的. 管理员可在小程序管理后台统一管理项目成员(包括开发者.体验者及其他成员).设置项目成员的权限,包括:开发者/体验者权限.登录小程序管理后台.开发管理.查看小程序数据分析等. 管理入口位于:小程序管理后台 - 用户身份 – 成员管理 权限 说明 开发者权限 可使用小程序开发者工具及开发版小程序进行开发 体验者权限 可使用体验版小程序 登录 可登录小程序管理后台,无需管理员确认 数据分析 使用小程序数据分析功能查看小程序数据 开发管理

解决微信小程序开发者工具输入框焦点问题

Windows10笔记本上运行微信小程序开发者工具,输入框(input,textarea)没有焦点,只能在真机调试,效率太低.后来发现是Window10对笔记本高分屏支持不好,要DPI缩放,导致兼容性问题.解决方法: 显示设置.缩放与布局改为100%.这样就可以点击输入框了,但是字体变得很小,最好是外接显示器. 不修改DPI缩放,长按输入框即可! 原文地址:https://www.cnblogs.com/ycwu314/p/11258489.html

解决微信小程序配置https不成功问题

拿到一个微信小程序的项目,需要配置https安全链接(为什么必须使用https不再赘述),预想这个已经很成熟的流程,应该不会有太大问题,结果还真是出乎意料,竟然掉进一个大坑,折腾好久. 申请证书配置的详细流程不再写了,大概就是去腾讯云或者阿里云申请一个ssl证书,按照自己的网站架构下载相应的证书,导入到自己的服务器,导入方法下载时有详细教程. 这里需要注意几点: 1. htpps默认使用443端口,请确认443未被占用 2.在防火墙中添加新的入站规则,允许443端口被访问.(我用的阿里云服务器E

解决微信小程序开发中wxss中不能用本地图片

微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方法:将图片用base64加密. 1.我们用在线加密对图片进行加密,这个网址百度一大堆,我只贴出一个http://imgbase64.duoshitong.com/ 2.将转换完成后的base64复制到我们要引用的地方. 3.设置样式(辅助代码,只有将这个图片做为background-image时注意设置如下属

[转]微信小程序登录数据解密以及状态维持

本文转自:http://www.cnblogs.com/cheesebar/p/6689326.html 学习过小程序的朋友应该知道,在小程序中是不支持cookie的,借助小程序中的缓存我们也可以存储一些信息,但是对于一些比较重要的信息,我们需要通过登录状态维持来保存,同时,为了安全起见,用户的敏感信息,也是需要加密在网络上传输的. 前台,service.封装了http请求,同时封装了getSession(通过code获取服务器生成的session).getUserInfo(获取用户信息).ge