小程序登录流程

一、登录原理

1、调用wx.login获得 code

• WXML

  <view>
    <text>第1步：</text>
    <button type="primary" bindtap="wxlogin" size="mini">微信登录</button>
  </view>

• JS

  // 第1步：微信登录, 得到code
  wxlogin() {
    wx.login({
      success: (res) => {
        console.log("微信登录", res);
        this.setData({
          code: res.code
        })
      },
      fail(err) {
        console.log(err);
      }
    })
  },

2、获取客户信息,wx.getUserInfo (要先授权), 获得 encryptedData,iv

官方文档说明

（因为微信官方考虑到用户隐私，所以关闭了用户进入小程序时自动弹出获取用户信息的接口，只能通过button绑定getuserinfo事件来获取用户信息）

• WXML

<view>
    <text>第2步：</text>
    <button type="warn" open-type="getUserInfo" bindgetuserinfo="getUserInfo" size="mini">
        获取用户授权信息
    </button>
</view>

• JS

  // 第2步： 获取用户授权信息，得到encryptedData，iv
  getUserInfo(event) {
    console.log("用户授权信息", event.detail);
    let detail = event.detail;
    this.setData({
      encryptedData: detail.encryptedData,
      iv: detail.iv
    })
  },

3、调用login接口,传入code,encryptedData,iv, 后台返回获得token

• WXML

<view>
    <text>第3步：</text>
    <button type="primary" bindtap="login" size="mini">登录（我们自己的服务器）</button>
</view>

• JS

  // 第3步：登录（我们自己的服务器）
  login() {
    let url = "/user/login";
    let data = {
      code: this.data.code,
      encryptedData: this.data.encryptedData,
      iv: this.data.iv
    }
    app.$http.post(url, data, true).then(res => {
      console.log("登录", res);

      // 第4步，把后台返回的token存到本地缓存
      try {
        wx.setStorageSync('token', res.user.token)
      } catch (e) { }
    })
  },

二、一键登录（三合一）

• XML

  <button open-type="getUserInfo" bindgetuserinfo="login" type="default" size="mini" class='f14 ml-10'>
    立即登入
  </button>

• JS

  // 一键登录
  login(event) {
    // 1、获取 encryptedData, iv 
    let { encryptedData, iv } = event.detail;
    // 微信登录
    wx.login({
      success: (res) => {
        // 2、获取code
        let code = res.code;
        // 3、登录后台服务器
        let url = "/user/login";
        let data = { encryptedData, iv, code }
        app.$http.post(url, data, true).then(res => {
          console.log("登录成功", res);
          this.setData({
            token: res.user.token
          })
          // 4、把token存到本地缓存
          try {
            wx.setStorageSync('token', res.user.token)
          } catch (e) { }
        })
      }
    })
  },

三、授权

wx.authorize()

• 举个栗子

  onLoad: function (options) {

    // 查看用户是否授权
    wx.getSetting({
      success(res) {
        console.log("录音授权", res.authSetting['scope.record'])
        let record = res.authSetting['scope.record'];
        if (!record) {
          wx.authorize({
            scope: 'scope.record',
            success() {
              // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
              wx.startRecord()
            }
          })
        }
      }
    })
  },