微信支付宝双端兼容获取手机号头像昵称
微信支付宝双端兼容获取手机号头像昵称
1. 页面效果
参考上一篇的 微信小程序获取用户头像昵称手机号最新版
2. 授权手机号弹窗
{{bname}}
申请获得您的手机号
拒绝
允许
3. 授权头像和昵称的弹窗
{{bname}}
申请获得您的公开信息
昵称、头像、地区及性别）
拒绝
允许
4. 逻辑部分
微信登录的逻辑
-
进入页面先静默获取code。后续需要获取code去后台换用户的手机号。打开授权手机号的弹窗
-
用户在授权手机号的弹窗点击允许后
允许 -
按钮点击回调方法中可以获得encryptedData
-
然后拿code和encryptedData去获取用户的手机号，完成注册功能。
-
注册成功后，把返回的用户信息放入userinfo的缓存中。然后判断用户有无头像信息，如果没有就打开授权用户头像昵称的弹窗。
-
用户通过chooseAvatar的button获取微信头像或者自定义上传头像
-
用户通过nickname的input的@blur方法获取昵称。然后保存给用户
支付宝登录的逻辑
-
进入页面弹出授权手机号弹窗。用户通过点击
-
该按钮会拉起支付宝的授权手机号的底部弹窗。点击同意后
-
调用my.getAuthCode获取code，在获取code成功事件中再调用my.getPhoneNumber获取到encryptedData
-
把code和encryptedData传递给后台服务解析成手机号，从而实现用户的注册功能。
-
注册成功后把返回的用户信息放入userinfo的缓存中。然后判断用户有无头像信息，如果没有就打开授权用户头像昵称的弹窗。
-
通过点击授权获取用户信息的按钮
-
按钮回调方法中调用my.getOpenUserInfo方法，该方法会返回用户的头像和昵称信息
代码如下
export default {
data() {
return {
user:{ avatarUrl:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
nickName:'',
},
hasUserInfo:false,
// 用户基本信息
userInfo: null,
// 微信,支付宝用户code
code: '',
// 是否弹出登录注册授权弹窗
showAuthorizeUser: false,
showAuthorizePhone: false,
}
},
onShow() {
this.getWxCode()
setTimeout(() => {
this.showAuthorizePhone = true
}, 100);
},
methods: {
// 静默获取code
async getWxCode() {
const loginResult = await uni.login()
const { code } = loginResult[1]
this.code = code
console.log('-------------------code', code)
},
//获取昵称输入内容
userNameInput(e){
this.user.nickName = e.detail.value
},
onChooseAvatar(e) {
console.log('头像信息》')
console.log(e)
this.user.avatarUrl = e.detail.avatarUrl;
},
authUser(){
let userInfo = uni.getStorageSync('userInfo')
//#ifdef MP-WEIXIN
if(this.user.nickName==''){
this.$interactive.toast('请输入您的昵称！')
return;
}
userInfo.avatarurl = this.user.avatarUrl;
userInfo.nickname = this.user.nickName;
this.userInfo = userInfo;
uni.setStorageSync('userInfo', userInfo)
this.user.id = userInfo.id;
this.$api.saveUserInfo(this.user, res => {
this.hasUserInfo = true;
this.showAuthorizeUser = false;
},res =>{})
//#endif
//#ifdef MP-ALIPAY
my.getOpenUserInfo({
fail: (err) => {
console.log('>>>>>>>>>>>>>>>>>err', err)
},
success: (res) => {
let userInfoAli = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
if( userInfoAli.nickName =='' || userInfoAli.nickName==undefined){
userInfoAli.nickName = userInfo.phone;
}
userInfo.avatarurl = userInfoAli.avatar
userInfo.nickname = userInfoAli.nickName
this.userInfo = userInfo;
this.hasUserInfo = true;
uni.setStorageSync('userInfo', userInfo)
this.showAuthorizeUser = false;
let data = {
id:userInfo.id,
avatarUrl:userInfoAli.avatar,
nickName:userInfoAli.nickName,
province:userInfoAli.province,
city:userInfoAli.city
}
this.$api.saveUserInfo(data, res => {},res =>{})
}
});
//#endif
},
async authPhone(e){
let data;
let _this = this;
//#ifdef MP-WEIXIN
const { errMsg, iv, encryptedData } = e.detail;
if (errMsg !== 'getPhoneNumber:ok') return;
data = {
code: this.code,
encryptedData: encryptedData,
iv: iv
}
this.$api.commRegister(data, res => {
if(res.data.data.avatarurl){
_this.hasUserInfo = true;
_this.userInfo = res.data.data;
}else{
_this.showAuthorizeUser = true
}
this.getLocksNum(res.data.data.id)
uni.setStorageSync('userInfo', res.data.data)
uni.setStorageSync('token', res.data.data.token)
setTimeout(() => {
_this.$interactive.toast('登陆成功')
}, 300);
})
//#endif
//#ifdef MP-ALIPAY
my.getAuthCode({
scopes: 'auth_base',
success: ({ authCode }) => {
my.getPhoneNumber({
success: (res) => {
data = {
code: authCode,
encryptedData: res.response
}
this.$api.commRegister(data, res => {
if(res.data.data.avatarurl){
_this.hasUserInfo = true;
_this.userInfo = res.data.data;
}else{
_this.showAuthorizeUser = true
}
uni.setStorageSync('userInfo', res.data.data)
uni.setStorageSync('token', res.data.data.token)
setTimeout(()=>{
this.getLocksNum(res.data.data.id)
_this.$interactive.toast('登陆成功')
},300)
console.log('---------登陆成功')
})
},
fail: (err) => {
console.log('getPhoneNumber_fail');
}
});
},
});
//#endif
this.showAuthorizePhone = false
},
openAuth(){
let userInfo = uni.getStorageSync('userInfo')
console.log(userInfo)
if(userInfo){
this.showAuthorizeUser = true;
}else{
this.showAuthorizePhone = true;
}
}
}
}
5. 结尾
下一篇：springboot微信支付宝双端兼容授权手机号后台接口（待完善）