新版小程序登錄授權(quán)的方法
小程序自上線以來(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.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)頁(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è)邏輯了。
- 詳解微信小程序-獲取用戶session_key,openid,unionid - 后端為nodejs
- 微信小程序授權(quán)登錄解決方案的代碼實(shí)例(含未通過(guò)授權(quán)解決方案)
- 微信小程序用戶授權(quán),以及判斷登錄是否過(guò)期的方法
- 微信小程序授權(quán)登錄及解密unionId出錯(cuò)的方法
- 微信小程序獲取手機(jī)號(hào)授權(quán)用戶登錄功能
- 微信小程序 獲取session_key和openid的實(shí)例
- 微信小程序開(kāi)發(fā)一鍵登錄 獲取session_key和openid實(shí)例
- 小程序:授權(quán)、登錄、session_key、unionId的詳解
相關(guān)文章
微信小程序?qū)崿F(xiàn)拍照畫(huà)布指定區(qū)域生成圖片
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拍照畫(huà)布指定區(qū)域生成圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07JavaScript 浮點(diǎn)數(shù)運(yùn)算 精度問(wèn)題
JavaScript小數(shù)在做四則運(yùn)算時(shí),精度會(huì)丟失,這會(huì)在項(xiàng)目中引起諸多不便,先請(qǐng)看下面腳本。2009-10-10JS小功能(offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果)實(shí)例代碼
這篇文章主要介紹了offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果實(shí)例代碼,有需要的朋友可以參考一下2013-11-11微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果(ajax)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06引入autocomplete組件時(shí)JS報(bào)未結(jié)束字符串常量錯(cuò)誤
在引入jQuery的autocomplete組件時(shí),遇到j(luò)s報(bào)未結(jié)束字符串常量錯(cuò)誤,原因及解決方法如下,大家可以參考下2014-03-03