新版小程序登錄授權(quán)怎么做

由于微信小程序api的升級，微信小程序的登錄授權(quán)也與之前不一樣，那么新版小程序登錄授權(quán)怎么做？以下為大家介紹流程：

模式概覽

由于微信小程序的改版導(dǎo)致直接彈出授權(quán)的登錄方式將逐漸不再支持，受影響的有 wx.getUserInfo 接口，以及 wx.authorize 接口傳入 scope=”scope.userInfo” 的情況。所以需要重新設(shè)計(jì)一套合適的登錄授權(quán)流程。整體流程如下圖：

主動(dòng)登錄

由于APP中有些頁面默認(rèn)需要登錄的，如[個(gè)人中心]頁面，需要登錄獲取到用戶信息，才能繼續(xù)操作。這樣的頁面就需要在每次進(jìn)入頁面(onShow)時(shí)判斷是否授權(quán)了。

profile頁面

onShow () {
    login(() => {
        do something...
    })
}

關(guān)于登錄授權(quán)相關(guān)的邏輯都可以封裝在handleLogin.js中

handleLogin.js

// 開始login
function login (callback) {
  wx.showLoading()
  wx.login({
    success (res) {
      if (res.code) {
        // 登錄成功，獲取用戶信息
        getUserInfo(res.code, callback)
      } else {
        // 否則彈窗顯示，showToast需要封裝
        showToast()
      }
    },
    fail () {
      showToast()
    }
  })
}

// 獲取用戶信息
function getUserInfo (code, callback) {
  wx.getUserInfo({
    // 獲取成功，全局存儲用戶信息，開發(fā)者服務(wù)器登錄
    success (res) {
      // 全局存儲用戶信息
      store.commit('storeUpdateWxUser', res.userInfo)
      postLogin(code, res.iv, res.encryptedData, callback)
    },
    // 獲取失敗，彈窗提示一鍵登錄
    fail () {
      wx.hideLoading()
      // 獲取用戶信息失敗，清楚全局存儲的登錄狀態(tài)，彈窗提示一鍵登錄
      // 使用token管理登錄態(tài)的，清楚存儲全局的token
      // 使用cookie管理登錄態(tài)的，可以清楚全局登錄狀態(tài)管理的變量
      store.commit('storeUpdateToken', '')
      // 獲取不到用戶信息，說明用戶沒有授權(quán)或者取消授權(quán)。彈窗提示一鍵登錄，后續(xù)會(huì)講
      showLoginModal()
    }
  })
}

// 開發(fā)者服務(wù)端登錄
function postLogin (code, iv, encryptedData, callback) {
  let params = {
    code: code,
    iv: iv,
    encryptedData: encryptedData
  }
  request(apiUrl.postLogin, params, 'post').then((res) => {
    if (res.code == 1) {
      wx.hideLoading()
      // 登錄成功，
      // 使用token管理登錄態(tài)的，存儲全局token，用于當(dāng)做登錄態(tài)判斷，
      // 使用cookie管理登錄態(tài)的，可以存任意變量當(dāng)做已登錄狀態(tài)
      store.commit('storeUpdateToken', res.data.token)
      callback && callback()
    } else {
      showToast()
    }
  }).catch((err) => {
    showToast()
  })
}

// 顯示toast彈窗
function showToast (content = '登錄失敗，請稍后再試') {
  wx.showToast({
    title: content,
    icon: 'none'
  })
}

到此為止，登錄就算完成了。不管使用token還是cookie都可以，都能有正常的登錄態(tài)了，可以執(zhí)行后續(xù)操作。

整個(gè)流程是 wx.login => wx.getUserInfo => 開發(fā)者服務(wù)器登錄postLogin。

調(diào)用接口

某些頁面默認(rèn)不需要登錄，但某些用戶操作事件是需要登錄狀態(tài)的，所以一者可以判斷全局存儲的登錄狀態(tài)管理的變量，如果為false，那么直接可以彈窗提示需要一鍵登錄。二者如果全局狀態(tài)為true，則調(diào)用接口看接口返回的code是否是未登錄狀態(tài)（此情況一般來說是登錄態(tài)過期），未登錄的話也彈窗提示需要一鍵登錄。

某頁面（需登錄的用戶操作）

getPlayer () {
    // 判斷全局是否有登錄狀態(tài)，如果沒有直接彈窗提示一鍵登錄
    isLogin(() => {
        let params = {
            token: this.token
        }
        request(apiUrl.getPlayer, params).then((res) => {
            // TODO: 刪除打印
            if (res.code === 1) {
                store.commit('storeUpdateUser', res.data.player_info)
            } else {
                // 獲取失敗了，如果是code是未登錄，則去登錄，然后執(zhí)行回調(diào)函數(shù)this.getPlayer
                // 如果code不是未登錄，直接彈窗報(bào)錯(cuò)誤信息
                handleError(res, this.getPlayer)
            }
        }).catch((err) => {
            handleError(err)
        })
    })
}

handleLogin.js

// 判斷是否登錄
function isLogin (callback) {
  let token = store.state.token
  if (token) {
    // 如果有全局存儲的登錄態(tài)，暫時(shí)認(rèn)為他是登錄狀態(tài)
    callback && callback()
  } else {
    // 如果沒有登錄態(tài)，彈窗提示一鍵登錄
    showLoginModal()
  }
}

// 接口調(diào)用失敗處理，
function handleError (res, callback) {
  // 規(guī)定-3041和-3042分別代表未登錄和登錄態(tài)失效
  if (res.code == -3041 || res.code == -3042) {
    // 彈窗提示一鍵登錄
    showLoginModal()
  } else if (res.msg) {
    // 彈窗顯示錯(cuò)誤信息
    showToast(res.msg)
  }
}

到此為止，需要登錄的用戶操作就可以處理了。如果全局登錄狀態(tài)變量為true，先去調(diào)用接口，根據(jù)返回的信息是否是未登錄再處理。

彈窗提示

由于微信小程序授權(quán)的接口wx.getUserInfo和wx.authorize中scope 為 “scope.userInfo” ，新版中調(diào)用這兩個(gè)API是不會(huì)主動(dòng)觸發(fā)彈出授權(quán)窗口的。需要使用 <button open-type="getUserInfo"></button> 方法。

上面代碼中多處出現(xiàn)的showLoginModal是用于顯示一鍵登錄的。如下：

handleLogin.js

// 顯示一鍵登錄的彈窗
function showLoginModal () {
  wx.showModal({
    title: '提示',
    content: '你還未登錄，登錄后可獲得完整體驗(yàn) ',
    confirmText: '一鍵登錄',
    success (res) {
      // 點(diǎn)擊一鍵登錄，去授權(quán)頁面
      if (res.confirm) {
        wx.navigateTo({
          url: '授權(quán)登錄頁面地址',
        })
      }
    }
  })
}

關(guān)于授權(quán)登錄，我們做了一個(gè)專門的頁面處理，此處的button為<button type="primary" v-if="canIUse" open-type="getUserInfo" @getuserinfo="getUserInfo">微信登錄</button>。如下：

getUserInfo (e) {
    if (e.target.userInfo) {
        // 點(diǎn)擊Button彈窗授權(quán)，如果授權(quán)了，執(zhí)行l(wèi)ogin
        // 因?yàn)長ogin流程中有wx.getUserInfo，此時(shí)就可以獲取到了
        login(() => {
            // 登錄成功后，返回
            wx.navigateBack()
        })
    }
}

到此為止，整個(gè)授權(quán)和登錄流程就算走完了?？梢曰剡^頭梳理一下最開始的流程圖，應(yīng)該就能理清整個(gè)邏輯了。