天天看點

微信小程式登入實作--流程介紹

(一)流程分析

微信小程式登入實作--流程介紹
微信小程式登入實作--流程介紹
openId為使用者唯一辨別      

 分析:

  1、三個角色:前端、後端、微信伺服器

  2、互動:公司的伺服器和微信的伺服器做互動,擷取openId和session_key。然後公司伺服器将其存儲到資料庫裡

  3、流程

①調用wx.login擷取code
②将剛才用戶端擷取的code傳遞給公司的伺服器
③公司伺服器拿着code+appid+appsecret去和微信伺服器做互動,通過接口傳遞給微信伺服器
④公司伺服器接受微信伺服器傳回的openId和session_key
  注意:一般情況下公司伺服器并不會把擷取到的openId直接傳回給用戶端,一般會将其存起來。如果伺服器有自己的登入方式,例如手機号或賬号密碼登入的話,需要結合openId,不僅僅微信登入,
  需要将openid和賬号密碼綁定起來。
      

  

微信小程式登入實作--流程介紹

  目前幾個步驟如下所示

  

微信小程式登入實作--流程介紹
⑤公司伺服器傳回一個自定義的登入态,即傳回給用戶端自定義登入态(也叫token令牌)
⑥用戶端将token儲存到本地,後期發送時攜帶token      

  

微信小程式登入實作--流程介紹
⑥下次使用者登入直接拿緩存裡的token發送給伺服器判斷token是否過期,如果沒有過期直接用      

  

微信小程式登入實作--流程介紹

前端開發需要做的事情

  

微信小程式登入實作--流程介紹

  

(二)代碼演練

1、背景接口

  

微信小程式登入實作--流程介紹

2、編寫用戶端代碼

  ①擷取code,注意:有效期隻有5分鐘

    

微信小程式登入實作--流程介紹

  ②發送code給公司背景伺服器

    

微信小程式登入實作--流程介紹

    這裡我們可以看下伺服器操作

    

微信小程式登入實作--流程介紹

    

微信小程式登入實作--流程介紹

    在配置檔案裡做過配置,如下

    

微信小程式登入實作--流程介紹

    遠端伺服器配置如下

    

微信小程式登入實作--流程介紹

    背景代碼接口路由操作如下

    

微信小程式登入實作--流程介紹

    接下來操作如下

    

微信小程式登入實作--流程介紹

  ③編寫用戶端方法,接受服務端傳回的token,并儲存到全局

    

微信小程式登入實作--流程介紹

    

微信小程式登入實作--流程介紹

    此時便儲存到全局,可以在其他頁面使用

    

微信小程式登入實作--流程介紹

    此時是将其放到全局對象裡,但此時存在問題,即對象存儲的話,當程式關閉後便會清空對象記憶體,記憶體便會被回收。使用者還需要再次登入.... ....

    是以除了儲存到全局對象globalData外,還需要儲存到記憶體裡

  ④存儲到記憶體

注意:存儲wx.setStorage(異步)和wx.setStorageSync(同步)差別      

  

微信小程式登入實作--流程介紹

  同步存儲時,代碼會等到存儲完畢才會接着往下執行。

  

微信小程式登入實作--流程介紹

  異步存儲表示存儲過程中,代碼不會等待執行完畢,會接着往下繼續執行。

  開發裡使用同步較多,如下所示,最後進行存儲即可。

  

微信小程式登入實作--流程介紹

  ⑤完善登入态記錄

    

微信小程式登入實作--流程介紹

    如上所示,目前為止雖然實作了登入操作,但每次啟動小程式都會進行一次登入,這顯然不符合業務邏輯。。。

    是以首先需要判斷token,如果沒有token,則進行登入操作

    

微信小程式登入實作--流程介紹

    如果有token,則進行驗證

    

微信小程式登入實作--流程介紹

    接着調用接口驗證token是否過期

    

微信小程式登入實作--流程介紹

    如果沒有過期則驗證如下

    

微信小程式登入實作--流程介紹

    背景代碼如下

    

微信小程式登入實作--流程介紹

    檢視該代碼遠端碼

    

微信小程式登入實作--流程介紹

    

微信小程式登入實作--流程介紹

    接下來做個判斷,檢視是否有errCode

    

微信小程式登入實作--流程介紹

    

    

    

    

    

.