登錄及獲取微信用戶信息
-
調用wx.login()獲取登錄憑證code,再調用后端接口換取用戶登錄態信息(openid, session_key)
此時獲得的登錄狀態具有時效性,可以調用
wx.checkSession()
檢查是否過期,若過期,則需要重新調用wx.login()
執行登錄流程 -
使用wx.getSetting()獲取用戶授權列表
- 若已授權:調用wx.getUserInfo()獲取用戶信息
- 若未授權:彈出模態框展示一個 微信授權登錄 按鈕提示用戶點擊登錄
- 同意授權:用戶授權后可通過綁定的方法獲取用戶信息
- 拒絕授權:則無法獲取用戶信息,若必須微信授權登錄才可用,可以以恰當的方式給出說明,如使用
wx.openSetting()
引導用戶手動打開授權開關
將獲取到的用戶信息和第1部中得到的code使用服務端提供的接口更新用戶信息,如1中的示例
授權綁定微信手機號
- 顯示授權綁定微信手機號的按鈕(必須用戶手動點擊)
- 用戶同意授權后,調用成功回調處理后續操作
相應接口代碼示例
-
用戶授權列表:wx.getSetting()
wx.getSetting({ success (res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // true已授權 false未授權 // "scope.userLocation": true // ... // } } })
-
wx.checkSession({ success () { //session_key 未過期,并且在本生命周期一直有效 }, fail () { // session_key 已經失效,需要重新執行登錄流程 wx.login() //重新登錄 } })
-
調用
wx.login()
進行登錄并獲取cookieswx.login({ success: function(res) { // 得到了code if (res.code) { wx.request({ url: api.user.authLogin(res.code) // 后端提供的驗證登錄接口 success: function(response) { // 驗證成功,保存cookies, 封裝在全局統一的請求方法中,如get, post wx.setStorage({ key: 'cookies', data: response.data.res.cookies }) wx.getUserInfo({ withCredentials: true, success: function(res) { // 取得用戶微信信息,調用后端接口更新用戶信息 const userInfo = res.userInfo const encryptedData = res.encryptedData const iv = res.iv const params = { nick_name: userInfo.nickName, gender: userInfo.gender, province: userInfo.province, city: userInfo.city, country: userInfo.country, avatar_url: userInfo.avatarUrl, encrypted_data: encryptedData, encrypt_iv: iv } server.get(api.user.updateBaseInfo(), params, () => { // 成功保存用戶信息 }) } }) } }) } } })
-
微信授權登錄
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登錄</button>
methods = { onGetUserInfo: this.handleGetUserInfo } // 同意授權 handleGetUserInfo(e) { wx.getUserInfo() }
-
授權獲取微信綁定的手機號
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber"> 綁定微信手機號 </button>
methods = { onGetPhoneNumber: this.handleGetPhoneNumber } /** * 同意授權獲取手機號 * @desc 獲取到 encryptedData,iv信息,需要服務端解密才能獲取到真正的手機號 */ handleGetPhoneNumber(e) { if (e.detail.iv) { server.post(api.user.bindWXPhoneNumber(), { encrypted_data: e.detail.encryptedData, encrypt_iv: e.detail.iv }, data => { wx.showToast({ title: '綁定成功' }) // do something }, error => { wx.showModal({ title: '綁定失敗', content: '[服務端返回的錯誤信息]', showCancel: false, success: res => { if (res.confirm) { // 用戶確認后 // do something } } }) }) } else { // 用戶拒絕授權 // do something } }