WeChat and Alipay dual-terminal compatible to obtain mobile phone number avatar nickname
1. Page effect
Refer to the previous WeChat applet to obtain the latest version of user avatar, nickname and mobile phone number
2. Authorized phone number pop-up window
<u-modal v-model="showAuthorizePhone" :show-title="false"
:show-confirm-button="false">
<view class="slot-content">
<div class="auth-card">
<div class="img">
<img class="avatar-img"
src="@/static/logo-min.png"
mode="widthFix">
</div>
<div class="title">{
{bname}}</div>
<div class="content">申请获得您的手机号</div>
</div>
<div class="auth-btncard">
<!-- #ifdef MP-WEIXIN -->
<div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizePhone=false"> 拒绝</u-button></div>
<div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" open-type="getPhoneNumber" @getphonenumber="authPhone"> 允许</u-button></div>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<div class="btn-unok"><button class="alibtn" @click="showAuthorizePhone=false"> 拒绝</button></div>
<div class="btn-ok"><button class="alibtn" style="color:#157DFB" @getAuthorize="authPhone" scope='phoneNumber' open-type="getAuthorize"> 允许</button></div>
<!-- #endif -->
</div>
</view>
</u-modal>
3. Pop-up window for authorized avatar and nickname
<u-modal v-model="showAuthorizeUser" :show-title="false"
:show-confirm-button="false">
<view class="slot-content">
<div class="auth-card">
<div class="img">
<img class="avatar-img"
src="@/static/logo-min.png"
mode="widthFix">
</div>
<div class="title">{
{bname}}</div>
<div class="content">申请获得您的公开信息<br>昵称、头像、地区及性别）</div>
<!-- #ifdef MP-WEIXIN -->
<div style="margin-left: 100rpx;margin-right: 100rpx">
<u-form :model="user" ref="uForm">
<u-form-item label="头像">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
<image class="avatar" :src="user.avatarUrl"></image>
</button>
</u-form-item>
<u-form-item label="昵称">
<input type="nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/>
</u-form-item>
</u-form>
</div>
<!-- #endif -->
</div>
<div class="auth-btncard">
<!-- #ifdef MP-WEIXIN -->
<div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false"> 拒绝</u-button></div>
<div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button></div>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<div class="btn-unok"><button class="alibtn" @click="showAuthorizeUser=false"> 拒绝</button></div>
<div class="btn-ok"><button class="alibtn" style="color:#157DFB" @getAuthorize="authUser" scope='userInfo' open-type="getAuthorize"> 允许</button></div>
<!-- #endif -->
</div>
</view>
</u-modal>
4. Logic part
The logic of WeChat login
-
Enter the page to get the code silently. Later, you need to obtain the code to change the user's mobile phone number in the background. Open the pop-up window for the authorized mobile number
-
After the user clicks Allow in the pop-up window to authorize the mobile phone number
<u-button :hair-line='false' :custom-style="customStyleOk" open-type="getPhoneNumber" @getphonenumber="authPhone"> 允许</u-button> -
The encryptedData can be obtained in the button click callback method
-
Then take the code and encryptedData to get the user's mobile phone number to complete the registration function.
-
After successful registration, put the returned user information into the cache of userinfo. Then judge whether the user has avatar information, and if not, open the pop-up window of the authorized user's avatar nickname.
-
The user obtains the WeChat avatar or customizes the uploaded avatar through the button of chooseAvatar
-
The user obtains the nickname through the @blur method of the nickname input. and then save it to the user
Alipay login logic
-
Enter the page and a pop-up window will pop up to authorize the mobile phone number. User clicks on
<button class="alibtn" style="color:#157DFB" @getAuthorize="authPhone" scope='phoneNumber' open-type="getAuthorize"> 允许</button> -
This button will pull up the pop-up window at the bottom of Alipay's authorized mobile number. After clicking agree
-
Call my.getAuthCode to get the code, and then call my.getPhoneNumber to get the encryptedData in the code success event
-
Pass the code and encryptedData to the background service and parse it into a mobile phone number, so as to realize the user registration function.
-
After successful registration, put the returned user information into the cache of userinfo. Then judge whether the user has avatar information, and if not, open the pop-up window of the authorized user's avatar nickname.
-
By clicking the button to authorize to obtain user information
<button class="alibtn" style="color:#157DFB" @getAuthorize="authUser" scope='userInfo' open-type="getAuthorize"> 允许</button> -
Call the my.getOpenUserInfo method in the button callback method, which will return the user's avatar and nickname information
code show as below
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. End
Next: Springboot WeChat Alipay dual-terminal compatible authorized mobile phone number background interface (to be perfected)