微信小程式處理使用者拒絕授權情況及微信登入,登入儲存等系列解決方案
在微信小程式開發時,當我們呼叫API wx.getUserInfo(OBJECT) 時,需要使用者授權。但如果使用者拒絕授權,我們如何相容使用者拒絕授權狀態,擁有更好的使用者體驗呢?
先看看這個介面的官方文件:
wx.getUserInfo(OBJECT)
獲取使用者資訊,需要先呼叫 wx.login 介面。
OBJECT引數說明:
引數名 | 型別 | 必填 | 說明 |
---|---|---|---|
withCredentials | Boolean | 否 | 是否帶上登入態資訊 |
success | Function | 否 | 介面呼叫成功的回撥函式 |
fail | Function | 否 | 介面呼叫失敗的回撥函式 |
complete | Function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |
tip
:wx.getUserInfo
介面需要使用者授權,請相容使用者拒絕授權的場景。
我們就是要在使用者點選拒絕的時候,彈出提示框,提示使用者以提升使用者體驗。像下面這樣的。
用具體程式碼實現就是,將彈窗寫在 wx.getUserInfo 的fail回撥函式中,像下面這樣:
wx.getUserInfo({
success: function (resuser) {
console.log(success)
},
fail: function () {
// 呼叫微信彈窗介面
wx.showModal({
title: '警告' ,
content: '您點選了拒絕授權,將無法正常使用******的功能體驗。請10分鐘後再次點選授權,或者刪除小程式重新進入。',
success: function (res) {
if (res.confirm) {
console.log('使用者點選確定')
}
}
})
}
})
這樣使用者就獲得了提示資訊,但此時,使用者還是停留在頁面的,如果某些展示資訊,還是給要給使用者展示的,只是在進行某些操作的時候要對授權進行驗證的話,那就得繼續修改我們的程式碼,儲存使用者的登入態,在其他地方做驗證使用。
第一種思路:
儲存登入態這裡是這樣的,將使用者的登入資訊傳給後臺,後臺儲存使用者資訊,同時用 open_id 在後臺換取一個SessionId 用換取的這個SessionId 存在快取,做為登入態驗證。
wx.getUserInfo({
success: function (resuser) {
let userInfo = resuser.userInfo
that.healthApi.login(code, userInfo).then(logindata => { // 這裡將微信的請求封裝成Promiese 風格
if (logindata.code === 0) {
var sessionId = logindata.data
// 呼叫微信wechat.setStorage將換回來的 SessionId 存在本地快取
that.wechat.setStorage('sessionId', sessionId).then(() => {
that.globalData.userInfo = userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
})
}
})
},
fail: function () {
wx.showModal({
title: '警告',
content: '您點選了拒絕授權,將無法正常使用*****的功能體驗。請10分鐘後再次點選授權,或者刪除小程式重新進入。',
success: function (res) {
if (res.confirm) {
console.log('使用者點選確定')
}
}
})
}
})
這樣我們將登入態儲存在了 SessionId 中,在每次登入的時候我們只需要再呼叫一個 檢查 SessionId的介面就行,檢查不通過再調微信登入介面。此處不做延伸了。
第二種思路:
在3.29微信小程式更新的版本中,加入了這樣一條屬性
withCredentials 欄位基礎庫版本 1.1.0 開始支援,低版本需做相容處理
這個欄位的意思就是呼叫 wx.getUserInfo(OBJECT) 是否帶上 登入態 的資訊。
官方文件是這樣解釋的:
withCredentials 欄位基礎庫版本 1.1.0 開始支援,低版本需做相容處理
注:當 withCredentials 為 true 時,要求此前有呼叫過 wx.login 且登入態尚未過期,此時返回的資料會包含 encryptedData, iv 等敏感資訊;當 withCredentials 為 false 時,不要求有登入態,返回的資料不包含 encryptedData, iv 等敏感資訊。
success返回引數說明:
引數 | 型別 | 說明 |
---|---|---|
userInfo | OBJECT | 使用者資訊物件,不包含 openid 等敏感資訊 |
rawData | String | 不包括敏感資訊的原始資料字串,用於計算簽名。 |
String | 使用 sha1( rawData + sessionkey ) 得到字串,用於校驗使用者資訊。 | |
iv | String | 加密演算法的初始向量,詳細見加密資料解密演算法 |
注:需要相容微信低版本,向後相容。
那麼利用這個介面,我們可以直接拿到 登入狀態,在其他需要驗證登入的地方進行提示,而在不需要授權的地方還可以讓使用者瀏覽小程式。
回到前面的問題,在使用者點選拒絕授權後,在某些操作時需要驗證使用者是否授權過,彈出互動資訊,那麼就利用上面的 SessionId或者 withCredentials 登入態進行下面的操作:
applyIn: function applyIn() {
if (wx.getStorageSync('sessionId')) { // 根據儲存的sessionId 進行驗證
wx.navigateTo({
url: 'familyDoctorApply/familyDoctorApply?Oid=' + this.data.params.Oid + '&title=' + this.data.params.title + '&serviceCity=' + this.data.array[this.data.index].name + '&productPrice=' + this.data.product.productPrice
});
} else {
wx.showModal({
title: '警告',
content: '您點選了拒絕授權,無法使用此功能。',
success: function (res) {
if (res.confirm) {
console.log('使用者點選確定')
}
}
})
}
效果像這樣:
這樣一個簡單完整的登入及授權,登入態儲存等前端微信小程式解決方案就完成了,還可以繼續擴充套件到登入有效期,退出登入,使用者許可權等跟多擴充套件的地方。