全棧項目|小書架|微信小程序-登錄及token鑒權


小程序登錄

之前也寫過微信小程序登錄的相關文章:

也可以通過官方的這張時序圖了解小程序的登錄流程:
在這里插入圖片描述

從流程圖上可以看出微信小程序登錄需要先調用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 接口

驗證 token

在這里插入圖片描述


咨詢請加微信:輕撩即可。
在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM