需求描述:采用uniapp框架同时开发微信和支付宝两端小程序,要求用户授权获取手机号信息。
方案一:采用 button 配置 open-type="getPhoneNumber" 的形式
代码如下:
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">getPhoneNumber授权手机号</button>
getPhoneNumber(e){
console.log(e)
}
展示结果如下:
微信端拿到的是encryptedData和iv,将值传给后端进行解密获取手机号。但在支付宝端看是有问题的,返回的是errMsg和fail。接下来我们想到的方案是:
方案二:在方案一的基础上,针对支付宝小程序写单独的授权弹框
// 授权手机号
getPhoneNumber(e){
console.log(e)
// #ifdef MP-ALIPAY
my.getPhoneNumber({
success: (res) => {
console.log('授权成功',res)
},
fail: (err) => {
console.log('授权失败',err)
}
})
// #endif
}
分析打印结果,发现拒绝和同意都会进入导sucess函数中且成功返回response,虽然返回的response值不一样,且拒绝后拿到的response是无效的,也能从用户行为上判断是否拒绝还是同意,但总感觉不太好。所以想到了第三种方案:
方案三:采用 open-type="getAuthorize" 加 scope="phoneNumber" 的形式
代码如下:
<button open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumber" @error="errorPhoneNumber">getAuthorize授权手机号</button>
// 授权手机号
getPhoneNumber(e){
my.getPhoneNumber({
success: (res) => {
console.log('授权成功',res)
},
fail: (err) => {
console.log('授权失败',err)
}
})
},
// 拒绝手机号
errorPhoneNumber(e){
console.log('拒绝授权',e)
},
这个时候再来看效果,用户拒绝只会触发 errorPhoneNumbe 方法,打印 "用户取消授权" 的文本,用户同意则会正常进入 getPhoneNumber 方法,并且在success函数中成功返回有效response值。
所以总结如下,如过单纯只是微信小程序,第一种方案完全没有问题;如果单纯只是支付宝端,第三种方案更为合适;如果两者都要兼顾,则选用第二种方案,因为第三种方案明确指出只在支付宝端小程序适用。
说完了授权手机号的部分,接下来我们再讲讲支付宝端授权身份证号。
同样还是用方案三的方式 open-type="getAuthorize" 加 scope="IDNumber",原理同上代码如下:
<button open-type="getAuthorize" scope="IDNumber" @getAuthorize="getIDNumber" @error="errorIDNumber">getAuthorize授权身份证号</button>
// 授权身份证号
getIDNumber () {
my.getIDNumber({
success: async (res) => {
console.log('授权成功',res)
},
fail: (err) => {
console.log('授权失败',err)
}
})
},
// 拒绝身份证号
errorIDNumber(e){
console.log('拒绝授权',e)
},