使用uView UI+UniApp開發微信小程序--微信授權綁定和一鍵登錄系統

在前面隨筆《使用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開發微信小程序

使用uView UI+UniApp開發微信小程序--判斷用戶是否登錄並跳轉