微信授权流程:先获取微信code值,再让后端通过code值去微信拿个人信息,然后通过个人信息里的openid来进行绑定
也解决了code 40163问题重复使用的问题
<view class="pick pick_line">
<view class="left">
<view class="pic">
<image :src="wxImgPath" mode="aspectFill"></image>
</view>
<view class="title">
微信
</view>
</view>
<view class="right">
<view class="tip tip_black" @tap="ispop = true" v-if="userInfo.is_wechat==1">
已绑定
</view>
<view @tap="Auth(1)" class="tip" v-else>
未绑定
</view>
<view class="right_icon">
<image src="/static/icons/set_right.png" mode=""></image>
</view>
</view>
</view>
data() {
return {
code:'',//微信code
openid:'',//当前程序唯一标识
}
},
onLoad(option) {
this.getIsAuth();
},
onUnload(){
this.$cache.remove('securityUrl');
},
methods: {
//查看url是否有参数,有参数就说明是授权后回调打开的页面
getIsAuth(){
let u = location.href;//拿取当前url
let a = u.split('?');//将url截开
var aa = this.$cache.get('securityUrl');//看缓存有没有当前页的url
//根据url后面是不是有参数来判断是否有获得微信code值
if(a.length >= 2){
if(!aa){
//将当前url存储,因为去微信授权拿code再返回来页面的路径会变
this.$cache.put('securityUrl', a[0]);//将当前页的url存储,携带的参数不要
}
let c = a[1].split('&')
let d = c[0].split('=')[1];//微信code值
this.code = d;
this.getAccess(1);
}else{
if(!aa){
//将当前url存储,因为去微信授权拿code再返回来页面的路径会变
this.$cache.put('securityUrl', u);//将当前url存储
}
}
},
//解绑第三方授权
unbindThirdAuth(num) {
//封装的请求
this.$request.unbindThirdAuth(obj,this)
.then(res =>{
if(res.code == 0){
if(num == 1){
this.code = '',//微信code
this.openid = '',//当前程序唯一标识
}
uni.showToast({
title:'解绑成功',
icon:'success',
duration:1500
})
}else{
uni.showToast({
title:res.message,
icon:'none',
duration:2000
})
}
})
.catch(res =>{
uni.showToast({
title:res.message,
icon:'none',
duration:2000
})
})
},
/**
* 获取url中code
*/
Auth(num) {
//微信绑定授权
if(num == 1){
// 判断浏览器类型
let isWeChat = this.$func.isWeChat()
this.isWeChat = isWeChat
if (!isWeChat) {
uni.showToast({
title:'请用微信浏览器打开再授权',
icon:'none',
duration:2000
})
return;
}
this.sendCode() // 获取code,每绑定一次都要拿新的code,不能重复利用
}
},
/**
* 跳转微信用户授权页
* 用户同意就会打开redirect_uri后拼接的链接页面,并且携带着code值和state数据
*/
sendCode() {
var nowUrl;
var u = this.$cache.get('securityUrl');//从缓存里拿到当前页的url,且URL后面没有携带参数的
if(!u){
nowUrl = location.href;
}else{
nowUrl = u;
}
let link = encodeURIComponent(nowUrl);//编码
let appid = getApp().globalData.wxAppid;//微信支付公众号id
//跳转微信授权页并获取code,然后他会通过redirect_rui来重新跳回你指定的页面
let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + link +
'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
location.href = url;
},
/**
* 通过code获取access_token
*/
getAccess(num) {
let data = {
code: this.code,
}
//将code给后端,通过接口拿取用户信息
this.$request.userOuth(data, this)
.then(res => {
if(res.code == 0){
this.authObj = res.data;
if(num == 1){
this.openid = res.data.openid;
this.bindThirdAuth(1);
}
}else{
uni.showToast({
title:res.message,
icon:'none',
duration:2000
})
}
})
.catch((error) => {
uni.showToast({
title:error.message,
icon:'none',
duration:2000
})
})
},
//用户微信绑定账号
bindThirdAuth(num){
//封装的请求
this.$request.bindThirdAuth(obj,this)
.then(res =>{
if(res.code == 0){
uni.showToast({
title:'绑定成功',
icon:'success',
duration:1500
})
}else{
uni.showToast({
title:res.message,
icon:'none',
duration:2000
})
}
})
.catch(res =>{
uni.showToast({
title:res.message,
icon:'none',
duration:2000
})
})
}
}