全棧專案|小書架|微信小程式-登入及token鑑權
阿新 • • 發佈：2019-11-28
小程式登入
之前也寫過微信小程式登入的相關文章：
- 微信小程式~新版授權使用者登入例子
- 微信小程式-攜帶Token無感知登入的網路請求方案
- 微信小程式開通雲開發並利用雲函式獲取Openid
也可以通過官方的這張時序圖瞭解小程式的登入流程：
從流程圖上可以看出微信小程式登入需要先呼叫
wx.login()獲取 臨時登入憑證code，並回傳到開發者伺服器。然後在伺服器端呼叫 auth.code2Session 介面，換取 使用者唯一標識openid和 會話金鑰session_key等資訊。之後開發者伺服器可以根據使用者標識來生成自定義登入態，用於後續業務邏輯中前後端互動時識別使用者身份。
登入方式
wx.login() 是在微信小程式端登入的時候呼叫，而常見的登入方式有以下幾種：
- 啟動小程式之後彈出登入彈窗
- 點選特定按鈕登入
- 二者結合實現
登入實現
我這裡的實現是通過 點選登入按鈕 實現登入。在《小書架》專案中有兩處可以進行登入。
- 我的頁面，未登入會顯示登入區域
- 在文章詳情頁面，未登入會彈出登入彈窗
在點選了登入按鈕之後會呼叫下面的程式碼，將登入憑證發給伺服器：
wx.login({ success: function(loginRes) { if (loginRes.code) { let userStorageInfo = wx.getStorageSync('userInfo'); // 請求服務端的登入介面 wx.request({ url: api.loginUrl, method: 'POST', data: { account: loginRes.code, // 臨時登入憑證 type: 100, // 100 表示小程式使用者 userInfo: JSON.stringify(userStorageInfo) }, success: function(res) { console.log(res); if (res.statusCode == 200) { console.log('-----得到 Token---------'); wx.setStorageSync('loginToken', res.data.token); } else { console.log("Error:" + res.errmsg); } }, fail: function(error) { // 呼叫服務端登入介面失敗 } }); } else { // 獲取 code 失敗 } }, fail: function(error) { // 呼叫 wx.login 介面失敗 } });
當微信小程式端傳送code登入憑證給服務端之後，服務端呼叫微信提供 的介面，獲取openid等資料。
token 鑑權
在伺服器開發中有些介面API是需要登入後才能使用，比如：收藏、評論等。而如何判斷使用者是否登入，在移動端常見的手段是通過token 來驗證登入的時效性。也就是在使用者登入之後，生成一個具有有效期的token，返回給客戶端使用，token超過了有效期就說明使用者的登入狀態失效了，需要重新登入。
ps: token的介紹可以檢視我之前的相關文章。
獲取 token
驗證 token
諮詢請加微信：輕撩即可。
