小程序前端获取手机号码
正常开发中,前端通过getUserInfo来获取用户的code,并且在用户点击授权获取手机号码的按钮后,将encryptedData提交给后端,后端通过openid及encryptedData来解密手机号码信息。
因为本项目无后端的特殊开发情况,现在这部分工作在前端完成。
注:前端使用uni-app框架,如果使用小程序原生开发,则将代码中的方法替换为原生方法。
1.页面onload时获取code,并通过code请求微信api获取openid及session_key,在解密手机号码中会使用到。
onLoad() {
//一打开就请求code
var that = this;
uni.login({
provider: 'weixin',
success(res) {
that.code = res.code;
that.getOpenid(false);
}
})
},
methods: {
// 获取openid
getOpenid(callBackfn,obj){
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
method: 'GET',
data: {
appid: this.$appid, //你的小程序的APPID
secret: this.$secret, //你的小程序的secret,
js_code: this.code, //wx.login 登录成功后的code
grant_type: 'authorization_code',
},
success: (cts) => { // 换取成功后 暂存这些数据 留作后续操作
this.openId = cts.data.openid //openid 用户唯一标识
this.session_key = cts.data.session_key //session_key 会话密钥
if(callBackfn && obj){
callBackfn(obj);
}
}
})
},
}
2.用户点击获取手机号码按钮,拿到encryptedData,在这块需要注意一下,code的获取一定要在getphone之前,要不可能会解密报错。
按钮:
<button
open-type="getPhoneNumber"
@getphonenumber="getphone"
>一键获取</button>
方法:
//获取手机号
getphone(e) {
if (!e.detail.iv) {
uni.showToast({
title: '获取手机号失败',
icon: 'none'
})
return;
}
var that = this;
//验证code值是否过期
uni.checkSession({
success(val) {
if (val.errMsg == 'checkSession:ok') {
var obj = {
code: that.code,
iv: e.detail.iv,
encryptedData: e.detail.encryptedData
}
that.decryptPhone(obj);
} else {
uni.login({
provider: 'weixin',
success(res) {
let code = res.code;
var obj = {
code,
iv: e.detail.iv,
encryptedData: e.detail.encryptedData
}
that.getOpenid(that.decryptPhone,obj);
}
})
}
}
})
},
3.解密手机号码需要解密文件WXBizDataCrypt,下载地址:服务端获取开放数据
import WXBizDataCrypt from '@/util/WXBizDataCrypt.js'
//解密手机号
decryptPhone(obj) {
let pc = new WXBizDataCrypt(this.$appid, this.session_key);
let data = pc.decryptData(obj.encryptedData, obj.iv);
console.log('data:',data);
},