微信小程序前端解密手机号码

简介: 小程序需要用到用户的手机号码,看了下API 以及相关的demo,基本都是服务端进行解密的,问题是需要的参数并没有用到secret,只需要 session_key / iv /encryptedData 即可,那完全可以在客户端进行处理啊。

小程序需要用到用户的手机号码,看了下API 以及相关的demo,基本都是服务端进行解密的,问题是需要的参数并没有用到secret,只需要 session_key / iv /encryptedData 即可,那完全可以在客户端进行处理啊。

想到这个问题的肯定不止我一个,动手能力强的也超级多...开动起来吧,直接百度试试水,竟然找到了.. 不过直接按照他的拿来还有报错(有几个引入问题),注释后就OK了。

准备

  • cryptoJs
  • 一个解密函数,可直接参考官网nodejs demo。

代码

WXDataEncryp.js

var Crypto = require('../utils/encry/cryptojs.js').Crypto;
function WXDataEncryp(appId, sessionKey) {
  this.appId = appId
  this.sessionKey = sessionKey
}

WXDataEncryp.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 = WXDataEncryp;
AI 代码解读

cryptoJs下载后扔到项目下,修改cryptojs.js ,如下:

image.png

使用

直接引入,传参即可。
xxx.js

//引入
const WXDataEncryp = require('../../utils/WXDataEncryp');
...
//获取手机号码按钮点击回调
  async getPhoneNumber(e){
    if(e.detail.iv && e.detail.encryptedData){
      let data = e.detail.encryptedData;
      let iv = e.detail.iv;
      //此处获取 appid session_key
      let appId = config.appid;
      let userInfo = await util.getStoreInfo();
      let sessionKey = userInfo.session_key;
      
      let datains = new WXDataEncryp(appId,sessionKey);
      let rs = datains.decryptData(data,iv)
      //将手机号码进行存储到userInfo中
      console.log(rs.phoneNumber);//获得手机号
    }else{
      util.msg('获取授权失败')
    }
  }
AI 代码解读

拿到手机号进行回传server 进行保存即可,后续再需要就可以直接跟server要了。

相关文章
拿下奇怪的前端报错(六):多摄手机webrtc拉取视频流会导致应用崩溃,从而无法进行人像扫描
本文介绍了一种解决手机摄像头切换导致应用崩溃的问题的方法。针对不支持facingMode配置的四摄手机,通过缓存和序号切换的方式,确保应用在特定设备上不会频繁崩溃,提升用户体验。
125 1
小程序的前端插件都有哪些?
【10月更文挑战第16天】小程序的前端插件都有哪些?
88 1
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
55 1
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1829 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
5月前
|
如何将CCBUPT全能墙小程序添加到手机桌面
如何将CCBUPT全能墙小程序添加到手机桌面
54 0
小程序的前端 display 有什么类型?
【9月更文挑战第4天】小程序的前端 display 有什么类型?
122 4
小程序的前端 display 有什么类型?
【9月更文挑战第1天】小程序的前端 display 有什么类型?
105 2

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    5
  • 2
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
    150
  • 3
    巧用通义灵码,提升前端研发效率
    13
  • 4
    详解智能编码在前端研发的创新应用
    2
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
    24
  • 6
    智能编码在前端研发的创新应用
    8
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    7
  • 8
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
    86
  • 9
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    5
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    3
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等