微信小程序登录流程授权流程

前言

开发一个微信小程序项目，首要问题就是用户的登录授权流程问题，结合今年9月份小程序实施的新的审查来说。首次登录微信小程序的用户，如果要获取用户的个人信息，需要用户点击button来做授权登录，授权登录成功之后，就可以获取用户的一些基本信息，再紧接着跟后台进行交互获取用户的openID、unionid、token等为以后接口交互打下基础。用户首次授权成功后，再次进入小程序可以在小程序的app.js走自动授权流程。

需求和代码

用户进入页面后，在需要授权的地方写button

<button class="goUserInfo" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">

用户需求是不想再做弹窗提醒授权，所以button按钮无法安放，所以我把它做成透明按钮遮挡在页面上，用户如果没有授权则button按钮存在，点击页面任意位置，拉起小程序授权弹窗，如果用户已授权则去掉button。

  //授权个人信息
  bindGetUserInfo(res) {
    if (res.detail.userInfo) {
      wx.showLoading({
        title: '加载中...',
        mask: true,
      });
      //用户同意授权
      app.globalData.userInfo = res.detail.userInfo;
      //第一步手动授权登录
      wx.login({
        success: ress => {
          //第二步获取openid和uid
          wx.request({
            url: '', //请求地址
            data: {
              code: ress.code,
              ...
              //请求数据
            },
            method: 'POST',
            dataType: 'json',
            responseType: 'text',
            success: ({
              data
            }) => {
              //对获得的信息进行存取
              app.globalData.openId = data.data.openid
              wx.setStorageSync('openId', data.data.openid)
              app.globalData.unionid = data.data.unionid
              //第三步根据需求继续获取用户相应的信息
              this.getUser(参数)
            },
          });
        },
      });
    } else {
      wx.showToast({
        title: '您拒绝了授权',
        icon: 'none',
        duration: 2000
      });
    }
  },

自动授权流程app.js

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        let code = res.code;
        this.globalData.code = code;
        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              //本地存储方法结合页面透明button按钮的显现
              wx.setStorageSync(参数, false);
              // 已经授权，可以直接调用 getUserInfo 获取头像昵称
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
                  wx.request({
                    url: '',
                    data: {
                      code,
                      ...
                      //传送相应的信息
                    },
                    method: 'POST',
                    dataType: 'json',
                    responseType: 'text',
                    success: ({
                      data
                    }) => {
                      this.globalData.openId = data.data.openid
                      wx.setStorageSync('openId', data.data.openid)
                      this.globalData.unionid = data.data.unionid
                      //第三步继续获取用户的相应信息
                     this.getUser(参数)
                    },
                    fail: err => {
                      console.log('微信 request 接口报错', err);
                    }
                  });
                  // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res);
                  }
                },
                fail: err => {
                  console.log('微信 getUserInfo 接口报错', err)
                }
              })
            } else {
              //结合透明button的显现
              wx.setStorageSync(参数, true);
            }
          },
          fail: err => {
            console.log('微信 getSetting 接口报错', err)
          }
        })
      },
      fail: err => {
        console.log('微信 login 接口报错', err);
      }
    })