亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

新版小程序登錄授權(quán)的方法

 更新時(shí)間:2018年12月12日 14:58:48   作者:江北晨  
這篇文章主要介紹了新版小程序登錄授權(quán)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

小程序自上線以來(lái),官方一直在調(diào)整API,因此也出現(xiàn)了一批被廢棄的接口,作為程序員的我們,此時(shí)此刻千萬(wàn)不能為這不斷的變化而感到頭疼,應(yīng)當(dāng)與時(shí)俱進(jìn),不斷的更新自己的知識(shí)儲(chǔ)備和應(yīng)用技能。

首先近期工作中需要做小程序框架升級(jí),升級(jí)成美團(tuán)開(kāi)源的mpvue框架;然后因?yàn)槲⑿判〕绦駻PI的改版,所以也順便將授權(quán)登錄的邏輯重新設(shè)計(jì)了。

新舊對(duì)比:

舊的方法:舊方法wx.getUserInfo按照用戶登錄時(shí),彈出需要授權(quán)的彈窗,用戶點(diǎn)擊授權(quán)后才能使用。

新方法:Open-data的靈活使用方法,不會(huì)讓你直接獲得用戶信息,而是小程序點(diǎn)擊登錄按鈕獲取用戶頭像,就是使用 button 組件,并將 open-type 指定為 getUserInfo 類型,獲取用戶基本信息。

授權(quán)登錄的邏輯參考了多個(gè)小程序,希望能找到最優(yōu)的模式。下面會(huì)配合代碼詳細(xì)講解整個(gè)流程。

模式概覽

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

主動(dòng)登錄

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

profile頁(yè)面

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

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

handleLogin.js

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

// 開(kāi)發(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)的,存儲(chǔ)全局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 = '登錄失敗,請(qǐng)稍后再試') {
 wx.showToast({
  title: content,
  icon: 'none'
 })
}

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

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

調(diào)用接口

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

某頁(yè)面(需登錄的用戶操作)

getPlayer () {
  // 判斷全局是否有登錄狀態(tài),如果沒(mé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) {
  // 如果有全局存儲(chǔ)的登錄態(tài),暫時(shí)認(rèn)為他是登錄狀態(tài)
  callback && callback()
 } else {
  // 如果沒(méi)有登錄態(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.getUserInfowx.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)頁(yè)面
   if (res.confirm) {
    wx.navigateTo({
     url: '授權(quán)登錄頁(yè)面地址',
    })
   }
  }
 })
}

關(guān)于授權(quán)登錄,我們做了一個(gè)專門的頁(yè)面處理,此處的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)長(zhǎng)ogin流程中有wx.getUserInfo,此時(shí)就可以獲取到了
    login(() => {
      // 登錄成功后,返回
      wx.navigateBack()
    })
  }
}

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

相關(guān)文章

最新評(píng)論