当前位置: 首页 > article >正文

uniapp 微信小程序 手机号快速验证组件 解密 encryptedData 获取手机号

uniapp 微信小程序 手机号快速验证组件 解密 encryptedData 获取手机号

手机号快速验证组件

该能力旨在帮助开发者向用户发起手机号申请,并且必须经过用户同意后,开发者才可获得由平台验证后的手机号,进而为用户提供相应服务。
以下是旧版本组件使用指南,注意使用旧版本组件时,需先调用wx.login接口。建议开发者使用新版本组件,以增强小程序安全性。详情新版组件使用指南。
因为需要用户主动触发才能发起手机号快速验证,所以该功能不由 API 来调用,需用 button 组件的点击来触发。

使用方法

需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。

注意事项

在回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。

uniapp代码示例

注意原生的写法不一样

<button class="list-btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">立即购买</button>

接下来就是解密

第一步:

安装 crypto-js

pnpm install crypto-js

第二步:

新建WXBizDataCrypt.ts文件
创建 WXBizDataCrypt 类 :用于解密 encryptedData

import CryptoJS from 'crypto-js';

export class WXBizDataCrypt {
  private appId: string;
  private sessionKey: string;

  constructor(appId: string, sessionKey: string) {
    this.appId = appId;
    this.sessionKey = sessionKey;
  }

  decryptData(encryptedData: string, iv: string) {
    // base64 decode
    const sessionKey = CryptoJS.enc.Base64.parse(this.sessionKey);
    const encryptedDataBuffer = CryptoJS.enc.Base64.parse(encryptedData);
    const ivBuffer = CryptoJS.enc.Base64.parse(iv);

    try {
      // 解密
      const cipherParams = CryptoJS.lib.CipherParams.create({
        ciphertext: encryptedDataBuffer
      });
      const decipher = CryptoJS.AES.decrypt(cipherParams, sessionKey, {
        iv: ivBuffer,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });

      const decoded = decipher.toString(CryptoJS.enc.Utf8);
      const decodedData = JSON.parse(decoded);

      if (decodedData.watermark.appid !== this.appId) {
        throw new Error('Invalid appId');
      }

      return decodedData;
    } catch (err) {
      throw new Error('Decrypt failed');
    }
  }
}

第三步:

在需要解密的页面中引入 WXBizDataCrypt 类,并使用 decryptData 方法解密 encryptedData

import { WXBizDataCrypt } from '../../utils/WXBizDataCrypt';
const decryptPhoneNumber = (e: any) => {
  const { encryptedData, iv } = e.detail;
  const appId = 'your_app_id';
  const sessionKey = 'your_session_key'; 
  const wxBizDataCrypt = new WXBizDataCrypt(appId, sessionKey);
  const decryptedData = wxBizDataCrypt.decryptData(encryptedData, iv);

  console.log('Decrypted data:', decryptedData);
}

在这里插入图片描述

在这里插入图片描述


http://www.kler.cn/a/596766.html

相关文章:

  • docker速通
  • OAuth 2.0认证
  • doris:负载均衡
  • 【数据预测】基于遗传算法GA的LSTM光伏功率预测 GA-LSTM光伏功率预测【Matlab代码#91】
  • OpenHarmony 开源硬件学习全指南:从入门到实战
  • JAVA - OJ沙箱(JAVA默认模板沙箱,JAVA操作dokcer沙箱)
  • MacOS安装 nextcloud 的 Virtual File System
  • LangChain组件Tools/Toolkits详解(6)——特殊类型注解Annotations
  • llama源码学习·model.py[4]Attention注意力(2)源码分析
  • 洛谷 [语言月赛 202503] 题解(C++)
  • (滑动窗口)算法训练篇11--力扣3.无重复字符的最长字串(难度中等)
  • ROM(只读存储器) 、SRAM(静态随机存储器) 和 Flash(闪存) 的详细解析
  • Centos编译升级libcurl
  • DeepSeek自学手册:《从理论(模型训练)到实践(模型应用)》|73页|附PPT下载方法
  • NVM 多版本node.js管理工具
  • Linux用户管理实操指南
  • 【 <二> 丹方改良:Spring 时代的 JavaWeb】之 Spring Boot 中的异常处理:全局异常与自定义异常
  • Ubuntu 系统安装 Redis 的详细步骤
  • Android13音频子系统分析(四)---座舱的多音区框架
  • 亮相AWE2025,MOVA以科技重塑生活,以美学沟通世界