【微信小程序】使用 Cryptiojs 解密微信绑定手机号码

news2024/12/25 9:25:47

     很抱歉断更了一段时间,因为最近在做一个项目比较忙,正好项目中小程序板块需要解密手机号码来提交给接口,小程序中虽然提供了获取手机号按钮点击事件:bindgetphonenumber,但是该事件的处理函数中只能获取到加密过的手机号码,网上大部分教程都是使用 java,php,c# 等来实现的,这篇文章就教会大家如何用 JS 来解密手机号,干货满满,记得先收藏哦!


第一步:

首先我们要在页面中定义一个按钮去点击调用获取手机号的事件,此处 open-type 作用为弹出弹窗来允许获取手机号,bindgetphonenumber 的作用为点击后执行 getphone 这个回调

<button open-type="getPhoneNumber" bindgetphonenumber="getphone">获取手机号码</button>

第二步: 

接下来我们看点击获取后执行的回调 getphone ,直接输出 getphone 的事件对象 e,我们就可以得到两个非常有用的数据:encryptedData iv,encryptedData 的内容就是我们加密过的手机号码,此处先对这两个数据进行保存

getphone(e){
   console.log(e)
    let  encryptedData=e.detail.encryptedData  //保存事件对象中的这两个数据
    let  iv=e.detail.iv
}


第三步:

接下来就是对加密数据进行解密的环节了,解密数据需要用到 session_key,但是这个东西我们需要调用请求来获取,请求的参数为以下三个数据:

参数需要以下三个数据,我们先对其一一获取到:

  • 小程序的appid:这个可以去小程序公众平台开发设置里获取
  • 小程序的appsecret:这个同样也在小程序公众开发平台中
  •  code值:这个数据我们需要调用 wx.login 来获取,然后将获取到的code存入data中,切记获取code一定要在解密之前
    wx.login({
           success: (res) => {
              that.setData({
                 code:res.code
              })
    
           },
         })

第四步: 

获取到这三个参数数据后就可以去请求 session_key 了,具体代码如下:注意代码中 url 里模板字符串中添加的数据为你上一步获取的三个数据,我们在请求的成功回调 success 中输出一下回调信息res,可以看到我们就得到了 session_key

wx.request({
      url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.data.appid}&secret=${this.data.secret}&js_code=${this.data.code}&grant_type=authorization_code`,
      method: 'POST',
      header: {
       'content-type': 'application/json'
      },
      success: function (res) {
          console.log(res.data.session_key);
      }
    })


第五步:

最后一步就很简单了:我们要借助一个JS库来对加密信息进行解密 -------- Cryptojs,需要这个库的小伙伴私聊我我单发给你


第一步:把这个Cryptojs文件拖到小程序目录的 utils 下:

第二步:在 utils 下新建 js文件 ----- RdWXBizDataCrypt.js,注意要和cryptojs文件同层级

第三步:复制以下代码到 RdWXBizDataCrypt.js 中,注意第一行的引入路径是否正确!

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 {
    // 解密
    var bytes = Crypto.AES.decrypt(encryptedData, key, {
        asBpytes:true,
        iv: iv,
        mode: mode
    });
    
    var decryptResult = JSON.parse(bytes);
    
  } catch (err) {
    console.log(err)
  }


  return decryptResult
}

module.exports = RdWXBizDataCrypt

 第四步:在需要用到解密的页面js文件中引入 WXBizDataCrypt(别管这是啥,需要在哪解密手机号就把这个引入到哪个页面),我要在 getphone 这个事件回调里解密,所以在写getphone 的这个页面的引入,同样注意路径是否正确

var WXBizDataCrypt = require('../../utils/RdWXBizDataCrypt')

第五步:按照以下代码解密,参数为前面获取掉的 session_key,与加密过的手机号密文 encryptedData,以及前面获取到的 iv

 var pc = new WXBizDataCrypt(that.data.appid, session_key)
        var data = pc.decryptData(encryptedData , iv)
        console.log(data);

输出 data 得到的数据里面就可以拿到我们解密的手机号码了

 


完整的代码:仅供参考

var WXBizDataCrypt = require('../../utils/RdWXBizDataCrypt')
getphone(e){
    let that=this
    let  encryptedData=e.detail.encryptedData
    let  iv=e.detail.iv
    //获取 session_key
    wx.request({
      url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.data.appid}&secret=${this.data.secret}&js_code=${this.data.code}&grant_type=authorization_code`,
      method: 'POST',
      header: {
       'content-type': 'application/json'
      },
      success: function (res) {
        let session_key=res.data.session_key;
        console.log(res);
        var pc = new WXBizDataCrypt(that.data.appid, session_key)
        var data = pc.decryptData(encryptedData , iv)
        console.log(data);
      }
    })
  },

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/25738.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于如何调节Mahony AHRS算法的参数

文章目录一、Mahony算法的控制系统特征多项式二、Kp, Ki参数调节方法三、其他自适应调参法我在之前的博客AHRS互补滤波&#xff08;Mahony&#xff09;算法及开源代码中曾提及Mahony算法的难点在于如何调节PI参数。 最近看到参考文献[1]&#xff0c;提出了基于无阻尼自由频率设…

C# 将一种类型的数组转换为另一种类型的数组

将一种类型的数组转换为另一种类型的数组 public static TOutput[] ConvertAll<TInput, TOutput>(TInput[] array, Converter<TInput, TOutput> converter); 参数: array: 要转换为目标类型的从零开始的一维 System.Array。 converter: …

【数据结构与算法】杨辉三角,相同字符的截取以及扑克牌

✨个人主页&#xff1a;bit me ✨当前专栏&#xff1a;数据结构 ✨每日一语&#xff1a;不要等到了你的人生垂暮&#xff0c;才想起俯拾朝花&#xff0c;且行且珍惜。 ArrayList题训&#x1f335; 一. 杨辉三角&#x1f334;二.相同字符的截取&#x1f332;三.扑克牌&#x1f…

【SpringCloud】02 搭建springcloud微服务项目,服务治理组件nacos,负载均衡ribbon,远程调用Openfeign

文章目录搭建springcloud微服务项目1. 微服务父工程2. 创建子模块-shop-common3. 创建子模块--shop-product4. 创建子模块--shop-order服务治理组件1. 如何使用nacos2. 微服务客户端连接到nacos注册中心3. 消费端如何通过nacos调用提供者负载均衡1. 自己控制负载均衡2. ribbon完…

Nginx配置SSL证书

目录 获得证书 步骤一&#xff1a;购买证书 步骤二&#xff1a;申请证书 ​编辑 下载证书及证书转换&#xff1a;​编辑 配置SSL证书 在Nginx目录下新建certificate目录&#xff0c;并将下载好的证书/私钥等文件上传至该目录&#xff08;与配置文件同级目录&#xff09;。…

LiDAR点云转换到大地坐标系——简单粗标定

目录一、LiDAR和IMU位姿标定1.1安装角度标定1.2安装位置标定1.3部分代码二、点云转换到当地水平坐标系2.1基本理论2.1.1坐标系2.1.1.1激光雷达2.1.1.2导航坐标系/当地水平坐标系/大地坐标系2.1.2惯性传感器原理2.2点云转换试验2.2.1试验场地2.2.2试验内容2.2.3点云变换效果Wind…

C语言日记 37 类的友元(1)(全局函数做友元)

根据36 类和对象-友元-全局函数做友元_哔哩哔哩_bilibili复现出如下代码&#xff1a; 一、&#xff08;只是&#xff09;访问&#xff08;公开&#xff09;内部成员&#xff1a; #include <iostream> using namespace std; class Building { private:int ws;//卧室 pub…

NewStarCTF 公开赛-web

week1 HTTP cookie 修改admin 源码发现key GET和POST传参即可 Head?Header! User-Agent: CTF Referer: ctf.com X-Forwarded-For: 127.0.0.1我真的会谢 信息泄露 robots.txt www.zip 源码 /.index.php.swp NotPHP 函数绕过 if(file_get_contents($_GET[data]) &qu…

数据备份一般有哪些方式,如何进行数据备份

在如今这个时代&#xff0c;数据于我们而言是特别重要的&#xff0c;一旦发生丢失&#xff0c;可能会带来严重后果&#xff0c;如果你也很苦恼如何保证这些重要数据的安全&#xff0c;小编建议一定要对重要数据进行备份&#xff0c;以防发生丢失的意外。数据备份一般有哪些方式…

设计一个缓存策略,动态缓存热点数据

&#x1f468;‍&#x1f4bb;个人主页&#xff1a; 才疏学浅的木子 &#x1f647;‍♂️ 本人也在学习阶段如若发现问题&#xff0c;请告知非常感谢 &#x1f647;‍♂️ &#x1f4d2; 本文来自专栏&#xff1a; 常见场景解决方案 &#x1f308; 每日一语&#xff1a;努力不一…

C语言 0 —— 信息在计算机中的表示

计算机的电路 由 逻辑门电路组成。一个逻辑门电路可以看成为一个开关&#xff0c;每个开关的状态是“开” 则 高电位 对应 1 或者 “关” 则 低电位 对应 0 &#xff0c; 那么1和0 刚刚好用二进制数来表示&#xff1a; 每个位只能取1和0 &#xff0c;称为 one 个 bit &#…

谈一谈关于Linux内核编译详解原理

前言&#xff1a;为什么要做这个启动盘&#xff0c;因为内核编译是很危险的&#xff0c;中间出了错系统则直接崩溃&#xff0c;然后就无法开机了&#xff0c;你将看到一个_在你的左上角闪烁。知道启动盘可以帮你从外置设备启动系统&#xff0c;能启动系统才能恢复系统。1.编译前…

Java 线程和反射---尚硅谷Java视频学习

1.Java程序在运行得时候默认就会产生一个进程2.这个进程会有一个主线程3.代码都在主线程中执行 线程的生命周期 线程的执行方式 public class Java02_Thread {public static void main(String[] args) throws Exception {// TODO 线程 - 执行方式&#xff08;串行&#xff0c…

ASP.NET Core 3.1系列(14)——分布式缓存Redis的使用

1、前言 前一篇博客介绍了ASP.NET Core中本地缓存MemoryCache的使用方法。相较于本地缓存&#xff0c;分布式缓存更加适合大多数项目应用场景&#xff0c;下面就来介绍一下如何在ASP.NET Core中对Redis缓存进行相关操作。 2、分布式缓存接口——IDistributedCache 对于分布式…

pytorch深度学习实战24

第二十四课 VGG网络 VGG是Oxford的Visual Geometry Group的组提出的&#xff08;大家应该能看出VGG名字的由来了&#xff09;。该网络是在ILSVRC 2014上的相关工作&#xff0c;主要工作是证明了增加网络的深度能够在一定程度上影响网络最终的性能。VGG有两种结构&#xff0c;分…

远程重启电脑

一、设置电脑允许自动启动 在远程计算机上编辑设置远程注册表 步骤1. 按“WindowsR”键调用运行对话框。输入“services.msc”并点击“确定”。 步骤2. 在“服务”窗口中&#xff0c;双击“RemoteRegistry”以检查其状态。 步骤3. 将启动类型更改为“自动”。 二、查找远程计…

SPARKSQL3.0-各阶段自定义扩展规则源码剖析

一、前言 这一节主要介绍如何自定义扩展各阶段规则 虽然spark内部提供了很多优化规则&#xff0c;但在实际工作中&#xff0c;经常因为业务需求需要自定义扩展优化器或解析器&#xff0c;故自己实现一个优化器才对sparksql有更深的理解 二、扩展范围 spark在扩展方便做的很…

vue.js毕业设计,基于vue.js前后端分离教室预约小程序系统设计与实现

功能介绍 【后台管理功能模块】 系统设置&#xff1a;设置关于我们、联系我们、加入我们、法律声明 广告管理&#xff1a;设置小程序首页轮播图广告和链接 留言列表&#xff1a;所有用户留言信息列表&#xff0c;支持删除 会员列表&#xff1a;查看所有注册会员信息&#xff0…

从零开始学前端:DOM、BOM、焦点事件 --- 今天你学习了吗?(JS:Day20)

从零开始学前端&#xff1a;程序猿小白也可以完全掌握&#xff01;—今天你学习了吗&#xff1f;&#xff08;JS&#xff09; 复习&#xff1a;从零开始学前端&#xff1a;CSSOM视图模式 — 今天你学习了吗&#xff1f;&#xff08;JS&#xff1a;Day19&#xff09; 文章目录从…

java8 (jdk 1.8) 新特性——Stream ApI

在java8 中&#xff0c;有两个最重要的改变&#xff0c;一个就是之前了解的Lmbda java8 (jdk 1.8) 新特性——Lambda ,还有一个就是Stream Api 1. 什么是Stream API 简单来说就是一个类库&#xff0c;里边有一些方法方便我们对集合数据进行操作&#xff0c;就好像使用 SQL 语…