之前寫過一篇介紹uniapp開發(fā)微信登錄功能，那是個安卓app版本，今天介紹下在小程序上如何實現(xiàn)微信登錄，那篇文章沒有說到微信登錄服務(wù)端接口這塊，這篇文章里會提到具體的接口設(shè)計及表結(jié)構(gòu)設(shè)計思路。相比app，在微信小程序上實現(xiàn)微信登錄還是比較方便的，因為少了應(yīng)用id的生成過程，不過前提也是要有一個微信開放平臺，如果沒有的話要到官網(wǎng)注冊一個賬號。

接下來就講下步驟，流程比較簡單，需要注意一點的就是，每個小程序都是用郵箱注冊的，而且一個郵箱只能綁定一個小程序，所以一個人擁有的郵箱數(shù)直接限制了一個人擁有的小程序數(shù)量。

1、注冊開放平臺

這一步跟前面app的那個app微信登錄功能方法一樣的，網(wǎng)上有教程，注冊過程^[2]還有點麻煩，要用到企業(yè)信息，這里只是提一下，注冊一個開放平臺就夠用了，能滿足app、小程序、公眾號、網(wǎng)站等等共用，我只是為了這篇文章又提到了，畢竟文章雖小，五臟要全。

2、開發(fā)者資質(zhì)認證

這塊跟之前是一樣的，因為在開放平臺上的開發(fā)者資質(zhì)認證通過之后，就給你開放了app、小程序、公眾號、網(wǎng)站等各平臺的微信開放功能權(quán)限，而且每個還能加多個，像小程序可以加50個。這么算起來的話，這300塊還是有點價值的。

3、添加小程序到開放平臺

這里填小程序的相關(guān)信息就可以了，下一步需要微信掃碼，沒太明白這個掃碼是什么意思，因為郵箱跟微信關(guān)系不大，掃碼后小程序就成功綁定到開放平臺了。

點擊查看進去看下，發(fā)現(xiàn)內(nèi)容非常少。

這里跟app綁定到開放平臺完全不同，其實也好理解，因為這畢竟是微信小程序，那微信小程序掛載到微信上本來就要基于微信的基礎(chǔ)權(quán)限，所以意思是說微信小程序你直接可以用微信的幾乎所有功能了，只要你能開發(fā)出來，show me the code 就行了。

4、獲取AppSecret

在開發(fā)管理，開發(fā)設(shè)置里可以得到小程序密鑰，這個得到后就自己保存下，系統(tǒng)不幫你明文保存，如果后期丟了，你可以重置生成。密鑰在一般的小程序業(yè)務(wù)中用不到，只有在做微信開放功能(登錄、分享等)時才會用到。

5、微信登錄業(yè)務(wù)設(shè)計

微信登錄的業(yè)務(wù)在一般的互聯(lián)網(wǎng)產(chǎn)品上就是帶有注冊、登錄功能，但是在非互聯(lián)網(wǎng)產(chǎn)品上，一般不會讓普通微信用戶注冊的，都要是在本應(yīng)用上注冊的用戶。所以這個登錄，需要將普通用戶與微信賬號進行綁定。

業(yè)務(wù)流程依然是微信登錄功能中這張圖里的業(yè)務(wù)：

那問題來了，如何實現(xiàn)登錄呢? 這篇文章重點就要講清楚上圖中登錄這塊的具體內(nèi)容。

這里有張微信官方的登錄業(yè)務(wù)設(shè)計圖，可以理解下，這個圖對于剛開始做的人來說有點復(fù)雜，不要緊，可以按我下面分析的來就大概知道思路了。

下面是我結(jié)合項目實際情況的具體的業(yè)務(wù)分析， 具體內(nèi)容分前后端兩塊來說：

前端業(yè)務(wù)

比如小明在手機上用微信登錄，他如果是首次登錄，就要用一個系統(tǒng)賬號綁定，比如admin賬號，他得完成兩步操作：1、微信授權(quán)并獲取微信賬號信息；2、微信賬號綁定系統(tǒng)賬號；

第一步，獲取微信賬號信息，簡單總結(jié)就是先獲得用戶授權(quán)，然后用開發(fā)者AppID及AppSecret調(diào)用特定的登錄接口得到用戶信息及openid等信息。

第二步，當拿到這些信息后，還要回到前端界面，再給一個登錄操作界面，這一步，是用來輸入系統(tǒng)用戶名及密碼的。

后端業(yè)務(wù)

第二步操作在一個新用戶訪問這個app時必須走的一步，這一步之后，系統(tǒng)用戶賬號信息和當前用戶的微信信息(openid)就可以同時傳到后臺，登錄接口除了常規(guī)登錄驗證，還要匹配這個openid,全對了才能登錄成功。系統(tǒng)賬號與openid是一對多的關(guān)系，這很容易理解，就是admin賬號，可以讓多個微信用戶登錄。當然，如果當前微信用戶是第一次登錄，那在登錄時就要插入一條當前微信用戶與系統(tǒng)賬號的綁定信息。

前端這塊的業(yè)務(wù)，其實可以把微信登錄這塊進行業(yè)務(wù)封裝，也做成服務(wù)后置來調(diào)用，因為AppID及AppSecret這些信息比較敏感，最好放后端存儲。

登錄業(yè)務(wù)實現(xiàn)

1、登錄授權(quán)并獲取臨時登錄憑證code

下面貼出了代碼，我具體分析下思路。微信登錄要彈出授權(quán)頁面，視圖層代碼有特殊格式，得這么寫"",然后在觸發(fā)按鈕事件方法時才會彈出授權(quán)頁面，授權(quán)后再調(diào)用uni.login這個api，這一步是獲取code，code相當于一個憑證，是臨時的，每次調(diào)用都不同。前端拿到這個憑證，到后端調(diào)用服務(wù)端接口'wxlogin'

"btnwx" class="login-wxpng" open-type="getUserInfo" @getuserinfo="xcxWxLogin"> ... xcxWxLogin() { var self = this; uni.login({ provider: 'weixin', success: function(res) { if (res.code) { //發(fā)起網(wǎng)絡(luò)請求 uni.request({ method: 'POST', url: 'http://************/wxlogin', data: { code: res.code }, success(res) { //將openid存入本地緩存 uni.setStorage({ key: 'openid_key', data: res.data.openid }); if (res.statusCode == 200 && res.data && res.data.username) { self.isFirstWXLogin = false; self.name = res.data.username; self.password = res.data.password; setTimeout(function() { self.tologin({ username: res.data.username, password: res.data.password, encrypted: true }) }, 0) } else { //首次登錄，可以跳轉(zhuǎn)到一個綁定賬號的頁面 uni.navigateTo({ url: 'wxlogin' }); } }) } else { console.log('登錄失??！' + res.errMsg) } }, fail(e) { console.log(e); }, complete(e) { console.log(e); } }); } 復(fù)制代碼

2、微信登錄并獲取用戶唯一標識

這一步放在服務(wù)端，我用node寫的接口，提供你參考下：

router.post("/wxlogin", (req, res, next) => {
    //將請求地址的url后面的參數(shù)拼接起來
    var data = http://www.wxapp-union.com/{
        'appid': config.appId,
        'secret': config.appSecret,
        'js_code': req.body.code,
        'grant_type': 'authorization_code'
    };
    console.log(data);
    // querystring的stringify用于拼接查詢
    var content = querystring.stringify(data);
    // 根據(jù)微信開發(fā)者文檔給的API
    var url = 'https://api.weixin.qq.com/sns/jscode2session?' + content;
    // 對url發(fā)出一個get請求
    request({
        'url': url
    }, (error, response, body) => {
        // 將body的內(nèi)容解析出來
        let abody = JSON.parse(body);
        // body里面包括openid和session_key
        console.log(abody)

        //根據(jù)openid查找用戶，如果查到則返回用戶名密碼登錄，否則直接提示登錄
        getAllUsers(abody, res)
    })
})
復(fù)制代碼

上面的代碼僅供參考，思路就是用appId、appSecret(這兩個在后端配置，或者存在數(shù)據(jù)庫)及前端傳過來的code參數(shù)，調(diào)用接口'https://api.weixin.qq.com/sns/jscode2session'，注意是get請求；將返回的結(jié)果(openid)解析后去數(shù)據(jù)庫匹配系統(tǒng)用戶，有就直接登錄，沒有就提示用戶綁定。

3、前端存入用戶信息到本地緩存

這一步在授權(quán)后就可以調(diào)用了，這個根據(jù)你實際需要來，可以不要，我用這個來存頭像、微信呢稱之類的。uni相關(guān)api不熟的可以先讀下api文檔^[4]。

uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						uni.setStorageSync('auth_service', infoRes.userInfo)
					}
				});
復(fù)制代碼

好了，小程序登錄的基本步驟到這里就結(jié)束了，希望有幫到你，如果有用就點個贊吧，謝謝！