小程序篇(2):登陸獲取用戶信息

登陸和獲取用戶信息是小程序中最基本的兩步操做,可是因爲以前小程序官方開始時的設計缺陷,致使不少開發者將登陸和獲取用戶信息綁定使用,儘管後來小程序wx.getUserInfo接口調整爲:在用戶未受權過的狀況下調用此接口,將再也不出現受權彈窗,會直接進入 fail回調,可是改了以後,依舊有很多開發者對這兩步的概念混淆不清,接下來這篇文章將會詳細介紹小程序這兩步操做前端

登陸

wx.login()用來作登陸的方法,調用接口獲取登陸憑證,code發送給後端用於置換session_key和openid等數據,接下來看看小程序的整個登陸流程是怎樣的:
api-login.2fcc9f35.jpg
這是小程序官方的一張登陸流程圖,如今就來解讀一下這個流程git

  • 前端wx.login()獲取code,調用後端接口,將獲得的code發送到後端
  • 後端調用微信接口服務,用appid+appsecret+code發送過去,置換到session_key+openid,之前是不能置換unionid的,可是如今在知足如下條件能夠置換到unionid
  1. 在微信開放平臺下存在同主體的App、公衆號、小程序
  2. 用戶關注了某個相同主體公衆號,或曾經在某個相同主體App、公衆號上進行過微信登陸受權

同時知足以上兩個條件就能拿到用戶unionid,這樣一來,就能在wx.login()準確識別出用戶是誰github

  • 自定登陸態與openid和session_key關聯,實際就是生成一個與openid,session_key關聯的token,下發給前端
  • 前端將後端下發的token存入緩存,在後面的接口請求中帶上自定登陸態

以上就是小程序的整個登陸流程,能夠看到其實並非必定要wx.getUserInfo()才能拿到用戶的信息,在特定的條件下,經過wx.login()的調用拿到unionId也能後端數據庫裏拿到用戶信息數據庫

獲取用戶信息

wx.getUserInfo()之前調用時是會彈出受權彈框的,根據用戶的受權與否進入對應的回調函數,可是後來微信發現開發者濫用wx.getUserInfo()方法,不受權用戶信息不能使用小程序,如今就只能經過button組件open-type="getUserInfo"觸發受權彈窗,受權後能得到用戶信息以及用戶信息的加密數據,將用戶信息的加密數據發送到後端,後端經過wx.login()的code置換到的session_key對加密數據進行解密就能拿到用戶的完整信息,這一步實際上是對第一步的補充,當wx.login()沒法確認用戶的時候時候纔會執行到這一步,若是在wx.login()能夠確認用戶信息時,就能夠不用執行這一步,實現用戶的無感登陸。

注意點:根據小程序官方最近發佈的文檔來看,小程序不能用戶進入小程序時就彈登陸框要求用戶登陸才能體驗小程序,這種操做審覈會被拒,要用戶在體驗必定的小程序功能後,才能引導用戶去登陸受權用戶信息,具體文檔地址小程序

token過時重登

以往咱們寫網頁應用時,當後端下發的token失效時,請求接口會獲得403錯誤碼,而後前端接到返回的錯誤碼時就會跳到登陸頁要求用戶從新登陸,可是在小程序當token失效時,須要跳到一個登陸頁從新登陸嗎?明顯不須要,由於小程序自己就沒有帳號密碼登陸,所以登陸失效了直接作一個無感的重登操做就好了,除非某些小程序在並無依賴微信的登陸信息,而是小程序裏面內置本身的用戶登陸信息,這時候就須要跳到一個登陸頁面進行重登,可是這樣的小程序仍是少數,接下來就來看看如何小程序是如何作無感重登的。

直接來看代碼:後端

const Fly = require('../libs/flyio')
const fly = new Fly()
const newFly = new Fly()
let time = 0
let baseUrl = 'xxxxx'
fly.interceptors.request.use((request) => {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
newFly.interceptors.request.use((request) => {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
fly.interceptors.response.use(
  (response, promise) => {
    wx.hideNavigationBarLoading()
    return promise.resolve(response.data)
  },
  function (err, promise) {
    wx.hideNavigationBarLoading()
    // session或者session_key失效的時候從新登陸
    if (err.status === 403) {
      //鎖定當前實例,後續請求會在攔截器外排隊
      this.lock()
      // 當出現未認證的狀況時從新登陸,超過三次拋出錯誤
      if (time > 3) {
        time = 0
        return promise.reject(err.message + `(${err.status})`)
      }
      return new Promise((resolve, reject) => {
        wx.login({
          success: (e) => {
            let options = {
              'code': e.code
            }
            resolve(options)
          }
        })
      }).then((options) => {
        return newFly.post('/login', options).then(info => {
          wx.setStorageSync('token', info.token)
          time++
          //解鎖後,會繼續發起請求隊列中的任務
          this.unlock()
          // 從新請求失敗的請求
          return fly.request(err.request)
        })
      })
    }
  }
)

export {
  fly
}

上面的代碼展現的就是小程序token過時重登的過程,代碼很少,關鍵的地方也加上了註釋,很容易理解,這裏面最關鍵的就是使用了flyio這個網絡請求庫,利用這個庫作的過時重登,這是一個基於Promise的、強大的、支持多種JavaScript運行時的http請求庫,可使用一份http請求代碼在瀏覽器、微信小程序、Weex、Node、React Native、快應用中都能正常運行,在小程序中使用這個庫十分方便。這段代碼爲了不死循環,所以用了一個計數,超過三次就不會再重試登陸,直接拋錯微信小程序

總結

本篇文章主要介紹了小程序的登陸流程、獲取用戶信息、以及登陸過時重登的相關內容,這裏介紹的只是基礎的通用的流程,實際上每一個小程序的業務可能不太同樣,所以在具體應用須要根據具體業務再行調整。
若是有錯誤或不嚴謹的地方,歡迎批評指正,若是喜歡,歡迎點贊api

相關文章
相關標籤/搜索