admin管理员组文章数量:1572496
微信小程序在获取用户手机号时安全正确的做法是把获取的iv等信息传递给后端,让后端解密,再提供接口返回给前端;这个是正规的流程。
但要是遇到一个比较一般的后端或者懒的后端的话,前端也可以考自己完成手机号解密,不需要后端的解密接口。
1.使用授权手机号组件按钮
<view class="button">
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
</view>
2.下载RdWXBizDataCrypt 解密文件
https://download.csdn/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方法
版权声明:本文标题:微信小程序前端解密获取手机号 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1727723574a1126997.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论