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

登录及获取微信用户信息

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

推荐阅读更多精彩内容