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

微信小程序在获取用户手机号时安全正确的做法是把获取的iv等信息传递给后端，让后端解密，再提供接口返回给前端；这个是正规的流程。

但要是遇到一个比较一般的后端或者懒的后端的话，前端也可以考自己完成手机号解密，不需要后端的解密接口。

1.使用授权手机号组件按钮

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

2.下载RdWXBizDataCrypt 解密文件

https://download.csdn.net/download/qq_35946021/87123755 免费下载

3.在需要解密的地方引用该文件

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

4.先使用登录接口，再拿到后端给的session_key

login(){
    wx.login({
      success: (res) => {
       console.log(res)
        api.getOpenidAction({
          js_code:res.code
        }).then(re=>{
          console.log(re)
          this.setData({
            openid:re.Data.openid,
            code:res.code,
            session_key:re.Data.session_key
          })

        })
      }
    })
  },

5.再使用手机号组件传参的encryptedData和iv值

关键代码：

        new一个WXBizDataCrypt对象，传APPID和session_key

        再使用decryptData解密方法，传参encryptedData和iv

 getPhoneNumber (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e)
     
      var pc = new WXBizDataCrypt("wxexxxxxxxxxxxxx6", this.data.session_key)  
      var data = pc.decryptData(e.detail.encryptedData , e.detail.iv)
      console.log('解密后 data: ', data)
     
 
    
  },

控制台打印解密后的数据就可以用了

--------------------------------------------2024年6月3日更新-----------------------------------------------------------

以下是粉丝私信问我问题，我帮他解决的关键代码（该项目是uniapp工程化使用TypeScript的项目） 

文件位置

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { postLoginWxMinAPI} from '@/services/login'
let WXBizDataCrypt = require('../../static/decryptPhone/RdWXBizDataCrypt');

import type { LoginResult } from '@/types/member'
// // 弹出层组件
// const popup = ref<UniHelper.UniPopupInstance>()

// // #ifdef MP-WEIXIN
// 获取 code 登录凭证
let code = ''
const loginData=ref('')
onLoad(async () => {
  const res = await wx.login()
  console.log(res,'微信')
  code = res.code
  const result = await postLoginWxMinAPI(code) 
  
  loginData.value=result.data
}) 
const appId=ref('wx26e93545a79960a3')

// 获取用户手机号码
const getPhoneNumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
  let phonedetail=ev.detail
  const resData=JSON.parse(loginData.value)
  console.log(resData,'result')

  // console.log(RdWXBizDataCrypt ,'RdWXBizDataCrypt ')
   const pc =new WXBizDataCrypt(appId, resData.session_key);
    console.log(phonedetail.encryptedData, phonedetail.iv)
  const data = pc?.decryptData(phonedetail.encryptedData, phonedetail.iv);
  console.log(data,'解密后的用户详情')
  
}
</script>
<template>
<view class="login-btn">
  <view class="content">
			<button class="button_wx" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<!-- <u-icon name="weixin-fill" color="#FFFFFF" size="50"></u-icon> -->
				<text class="button_text">微信授权登录</text>
			</button>
		</view>
</view>
   
    <uni-popup ref="popup" type="center" >
    <view class="root-panel">
      <view class="title">个人信息保存指引</view>
      <view class="description">
        <view >感谢您使用小程序！</view>
        <view>
          我们非常重视您的个人信息和隐私保护。依据最新法律法规要求，
          我们更新了<navigator class="navigator" url="/pagesMember/agreement/agreement">《隐私协议》</navigator>。
          </view>
          <view>为向您提供更好的旅行服务，
          在使用我们的产品前，请您阅读完整版
          <navigator class="navigator" url="/pagesMember/agreement/agreement"></navigator>《服务协议》和 <navigator class="navigator" url="/pagesMember/agreement/agreement">《隐私协议》</navigator>的所有条款.</view>
      </view>
      <view class="footer">
        <view class="button primary" @tap="onOrderCancel">同意并继续</view>
        <view class="button" @tap="popup?.close?.()">不同意</view>
        
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss">

</style>

 关键的函数 getPhoneNumber方法