uniapp實現(xiàn)小程序微信登錄

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

接下來就講下步驟，流程比較簡單，需要注意一點的就是，每個小程序都是用郵箱注冊的，而且一個郵箱只能綁定一個小程序，所以一個人擁有的郵箱數(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è)計圖[3]，可以理解下，這個圖對于剛開始做的人來說有點復(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等信息。

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

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

第二步操作在一個新用戶訪問這個app時必須走的一步，這一步之后，系統(tǒng)用戶賬號信息和當(dāng)前用戶的微信信息(openid)就可以同時傳到后臺，登錄接口除了常規(guī)登錄驗證，還要匹配這個openid,全對了才能登錄成功。系統(tǒng)賬號與openid是一對多的關(guān)系，這很容易理解，就是admin賬號，可以讓多個微信用戶登錄。當(dāng)然，如果當(dāng)前微信用戶是第一次登錄，那在登錄時就要插入一條當(dāng)前微信用戶與系統(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相當(dāng)于一個憑證，是臨時的，每次調(diào)用都不同。前端拿到這個憑證，到后端調(diào)用服務(wù)端接口'wxlogin'

"btnwx"?class="login-wxpng"?open-type="getUserInfo"?@getuserinfo="xcxWxLogin"></button>

...

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);
?????}
????});
???}

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

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

router.post("/wxlogin",?(req,?res,?next)?=>?{
????//將請求地址的url后面的參數(shù)拼接起來
????var?data?=?{
????????'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)
????})
})

上面的代碼僅供參考，思路就是用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)
?????}
????});

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

參考資料：

1. https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN
2. https://jingyan.baidu.com/article/86112f130c459c6736978737.html
3. https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
4. https://uniapp.dcloud.io/api/plugins/login
5. https://blog.csdn.net/weixin_43126083/article/details/105655402#comments_14695505

本人其他uniapp系列原創(chuàng)推薦：

1. ?可能是最好的uniapp入門教程
   

2. uniapp動態(tài)路由實戰(zhàn)方案

3. uniapp適配到微信小程序注意事項

4. uniapp開發(fā)微信登錄功能(安卓app)