小程序微信授权登录、获取用户信息及授权绑定微信手机号流程

登录及获取微信用户信息

1. 调用wx.login()获取登录凭证code，再调用后端接口换取用户登录态信息(openid, session_key)

   此时获得的登录状态具有时效性，可以调用wx.checkSession()检查是否过期，若过期，则需要重新调用wx.login()执行登录流程

2. 使用wx.getSetting()获取用户授权列表

   1. 若已授权：调用wx.getUserInfo()获取用户信息
   2. 若未授权：弹出模态框展示一个 微信授权登录 按钮提示用户点击登录
      1. 同意授权：用户授权后可通过绑定的方法获取用户信息
      2. 拒绝授权：则无法获取用户信息，若必须微信授权登录才可用，可以以恰当的方式给出说明，如使用wx.openSetting()引导用户手动打开授权开关

3. 将获取到的用户信息和第1部中得到的code使用服务端提供的接口更新用户信息，如1中的示例

授权绑定微信手机号

1. 显示授权绑定微信手机号的按钮(必须用户手动点击)
2. 用户同意授权后，调用成功回调处理后续操作

相应接口代码示例

1. 用户授权列表：wx.getSetting()

   wx.getSetting({
     success (res) {
       console.log(res.authSetting)
       // res.authSetting = {
       //   "scope.userInfo": true, // true已授权 false未授权
       //   "scope.userLocation": true
       //    ...
       // }
     }
   })
   

2. 检查登录态是否过期

   wx.checkSession({
     success () {
       //session_key 未过期，并且在本生命周期一直有效
     },
     fail () {
       // session_key 已经失效，需要重新执行登录流程
       wx.login() //重新登录
     }
   })
   

3. 调用wx.login()进行登录并获取cookies

   wx.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, () => {
                                // 成功保存用户信息
                               })
                           }
                       })
                }
               })
           }
       }
   })
   

4. 微信授权登录

   <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登录</button>
   

   methods = {
       onGetUserInfo: this.handleGetUserInfo
   }
   
   // 同意授权
   handleGetUserInfo(e) {
       wx.getUserInfo()
   }
   

5. 授权获取微信绑定的手机号

   <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
       }
   }