在前面隨筆《使用uView UI+UniApp開發微信小程式》和《使用uView UI+UniApp開發微信小程式--判斷使用者是否登入並跳轉》介紹了微信小程式的常規登入處理和驗證碼登入處理的一些經驗，本篇隨筆繼續介紹第三種登入方式，微信授權登入。微信授權登入是系統使用者表綁定了微信小程式OpenID後，通過前端發起微信的登入授權，順利獲得微信授權後獲得code，並在我們自己的服務後臺介面通過code解析出使用者的OpenId，然後獲得對應使用者的身份token資訊返回給前端，前端完成登入後的跳轉處理。
1、微信授權登入介面
我們前面介紹過常規的賬號密碼登入處理和驗證碼登入處理，第三種登入方式微信授權登入也是很常見的，因此整合在系統中方便使用，介面效果如下所示。
這個介面很簡單，只需要提供一個按鈕觸發授權登入即可。
不過，授權登入需要使用者登入系統後繫結微信才能進行一鍵登入，否則是無法識別使用者的openid，也就無法一鍵登入了。
一旦繫結微信，也就是建立了使用者和小程式OpenId 之間的關聯，也就可以實現微信授權登入了。授權繫結需要獲取使用者資訊，因此需要發起使用者授權的確認操作，如下介面所示。
如果需要取消，那麼隨時取消授權也可以，系統提供入口處理即可，一般在同一介面中根據狀態繫結或者解綁。
以上就是大概的介面處理流程，剩下的就是我們需要編碼實現相應的邏輯即可。
2、微信授權繫結和一鍵登入系統處理
使用者授權繫結或者解綁，我們通過狀態來識別提供相關的功能即可，如下介面程式碼所示。
<view class="bottom">
<u-button v-if="!vuex_user.openid" shape="circle" type="success" @click="authLogin">授權繫結</u-button>
<u-button v-else shape="circle" type="error" @click="cancelBind">取消繫結</u-button>
<u-gap height="20"></u-gap>
<u-button shape="circle" @click="gotoMyInfo">返回我的頁面</u-button>
</view>
微信授權登入的繫結微信操作程式碼如下所示。
首先先通過uni.getUserProfile獲得使用者資訊，返回的資訊，不包括openid資訊，只是一些基礎的暱稱，頭像等資訊，如下所示
不過它本身的加密資訊，是我們可以通過它來在伺服器後端解析出來openid的。注意，前端在正式釋出後，騰信API是不在授權名單中，因此不能通過純前端的方式解析openid，除非通過定義雲函式方式呼叫（也就是離不開伺服器）。
我們這裡通過伺服器端進行解析，因此服務端的域名是在授權Https列表中的
一般伺服器端的介面順利獲取openid等資料，就直接resolve執行成功的回撥操作
服務端直接通過jscode2session的處理即可獲取對應的資料了
public JSCode2SessionResult JSCode2Session(string appid, string secret, string js_code, string grant_type = "authorization_code")
{
var url = string.Format("https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type={3}", appid, secret, js_code, grant_type); var result = WeJsonHelper<JSCode2SessionResult>.ConvertJson(url);
return result;
}
如果前端通過下面程式碼測試非正式的環境，也可以獲得openid，正式環境下，小程式不接受https://api.weixin.qq.com的域名的。
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' +
data.appid +
'&secret=' +
data.secret +
'&js_code=' +
loginRes.code +
'&grant_type=authorization_code',
success: codeRes => {
// console.log(codeRes)
resolve(codeRes.data)
},
fail: () => {
var tips = '獲取 SesssionKey OpenId 失敗'
vm.$u.toast(tips)
reject(tips)
},
})
一般我們獲得使用者的openid等詳細資訊，我們可以把這些資訊寫入伺服器的相關表中，並更新使用者的openid即可
服務端介面接受使用者資料，並寫入或者更新小程式使用者表資訊，同時更新系統使用者的openid即可。
一般前端順利獲得結果，就跳轉使用者頁面即可。
setTimeout(() => {
uni.switchTab({ url: '/pages/task/login/myinfo' });
}, 3000);
而取消使用者繫結，只需要置空伺服器端使用者表對應記錄的openId，並置空本地使用者的openid資訊即可。
cancelBind() { //取消繫結微信
var param = {id: this.vuex_user.id}
this.$u.api.User.CancelBindWechat(param).then(res=> {
console.log(res)
if(res.success){
this.$u.toast('已取消繫結')
this.$u.vuex('vuex_user.openid', '')
this.$u.vuex('vuex_user.wechatInfo', null) // 重置微信資訊
this.headimg = '/static/images/wx_ico.png'
} else {
this.$u.toast('取消繫結失敗')
}
})
},
至此，我們就完成了使用者繫結和解綁微信的相關操作了。剩下的就是我們需要處理登入介面上一鍵登入的處理了。
登入的方法程式碼如下所示。
login() {
let _self = this;
// 0. 顯示載入的效果
uni.showLoading({ title: '登入中...' });
var data = {}
_self.$u.api.User.wechatlogin(data) //微信登陸授權
.then(res => {
console.log(res);
uni.hideLoading();
_self.$u.toast('登入成功');
uni.switchTab({
url: '/pages/task/login/myinfo'
});
})
.catch(error => {
console.log(error);
_self.error = error;
});
}
也就是我們封裝了一個微信授權登入的邏輯，一旦成功返回，就跳轉到指定頁面上去即可。
其中封裝的Promise函式邏輯程式碼如下所示
先在前端發起登入處理，獲得code提交給伺服器進行處理驗證即可。
大概的步驟分為：
1）通過code 換取 session_key
2）從系統中判斷是否存在使用者
3）根據使用者身份生成tokenresult
程式碼邏輯如下所示
以上就是微信授權繫結和一鍵登入系統的相關處理邏輯及程式碼，其實無論常規的賬號密碼登陸、簡訊驗證碼登陸、微信一鍵登入，大致的處理過程都大同小異，就是先通過直接或者間接的方式確認使用者身份的有效性，然後獲得使用者的資訊，構建返回的token令牌資訊給前端使用即可。前端則負責處理結果邏輯，是提示使用者還是順利跳轉到預設使用者頁面即可。
相關文章：
使用uView UI+UniApp開發微信小程式--判斷使用者是否登入並跳轉