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

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

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

  wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdwx.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) {}})}})

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

写的有点简单，希望能够给浏览这篇博客的你一些思路，
谢谢！！！

微信小程序前端解密获取用户信息相关推荐

微信小程序开发之获取用户信息
环境微信开发者工具 Stable 1.06.2303220 云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识.注意, openid 并不是微信用户 ...
java对接微信小程序（登录获取用户信息）
需求说明: 用户通过小程序登录,进入到平台系统,进行各功能操作: 解决方案: 首先通过对接小程序,用户通过小程序登录及授权获取用户信息,后端调用接口获取微信用户信息,进行保存到数据库,然后返回toke ...
微信小程序前端解密获取手机号
微信小程序在获取用户手机号时安全正确的做法是把获取的iv等信息传递给后端,让后端解密,再提供接口返回给前端:这个是正规的流程. 但要是遇到一个比较一般的后端或者懒的后端的话,前端也可以考自己完成手机号 ...
微信小程序授权登录获取用户信息详解
今天来说一下微信小程序的授权登录获取用户信息,首先我们看微信提供的小程序开发文档: https://blog.csdn.net/qq_41971087/article/details/82466647 ...
[小程序]微信小程序登陆并获取用户信息
1.小程序js端调用框架登陆API,获取到一个临时code,拿着这个code去调用自己的服务端接口 2.在自己的服务器端,使用app_id app_secrect code可以获取到用户的openid ...
微信小程序授权登录获取用户信息并保存至缓存用于下次登录
1.获取用户信息 wx.getUserProfile(Object object) 获取用户信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗 ...
微信小程序调整的获取用户信息API接口wx.getUserProfile
对于微信小程序更新后的wx.getUserProfile怎么用?小程序怎么获取用户信息 getUserProfile接口文档:https://developers.weixin.qq.com/mini ...
微信小程序授权登录——获取用户信息
小程序登录小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系. 登录流程时序效果展示: 功能实现: 新建一个login页面 login.js: wx. ...
微信小程序 open-type=“getUserInfo“ 获取用户信息失败 @杨章隐
open-type="getUserInfo" 获取用户信息失败open-type="getUserInfo" 获取用户信息"微信用户"op ...

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

微信小程序前端解密获取用户信息相关推荐

最新文章

热门文章