微信小程序登陆流程梳理总结

前言

写博客主要是用来总结、巩固知识点，加深本身对这个知识点的理解。同时但愿能帮助到有须要的人。若有不正确的地方。能够在评论区指出。大家的支持。是我不断进步的源泉。

小程序登陆流程

这里引用下官方的一张登陆流程图，我就按照登陆流程图来说下个人理解。

第一步

客户端（小程序）获取当前微信登陆用户的登陆凭证（code）

可经过wx.login api得到。这里有地方须要注意

1.wx.login不会弹受权弹框

2.wx.login换取的code只能使用一次,若是须要新code只能从新调用wx.login接口

wx.login({
        success:(res)=>{
            let code= res.code
        }
    })
复制代码

第二步

经过上一步得到的临时登陆凭证传给服务器端获取openid和session_key.服务器端须要经过appid、appsecret、（这里的数据能够从小程序管理后台得到）code（第一步获取到的code）向微信服务端发送请求获取seeeion_key和openid。为了安全。建议将得到的session_key加密后再传给客户端。

第三步

客户端得到加密后的登陆态后把登陆态存在本地以便后面进行业务请求。因为小程序中不存在cookie机制。因此能够把登陆态存储在storage中。

以上就是微信官方登陆流程图的一个大致过程。

可是在实际应用中可能要复杂点？咱们接下来看。

登陆态在实际应用中的维护

这里看一下微信官方的说明

经过 wx.login 接口得到的用户登陆态拥有必定的时效性。
用户越久未使用小程序，用户登陆态越有可能失效。
反之若是用户一直在使用小程序，则用户登陆态一直保持有效。
具体时效逻辑由微信维护，对开发者透明。
开发者只须要调用 wx.checkSession 接口检测当前用户登陆态是否有效。
复制代码

这说明若是用户一直在使用小程序。登陆态就不会过时。反之就会过时。这里能够经过wx.checkSession api 来判断登陆态是否过时。

接下来上代码。来看下在应用中的登陆态维护。

目前在小程序中须要拉起微信登陆受权的弹框。须要在wxml文件中调用button组件来调用：以下

<button bindgetuserinfo="getInfo"  hover-class="none" open-type="getUserInfo"></button>
复制代码

这样用户点击按钮的时候会弹出受权获取用户信息的弹窗。用户点击容许咱们就能够拿到数据进行登陆并进行业务请求。 若是点击拒绝能够获取不须要登陆可查看的数据请求，并安利用户拒绝后的结果。从新引导用户进行受权。

下面是用户非首次进入应用的一个登陆态维护（首次进入经过button来受权。因此success回调是不会执行的。直接fail的回调。）

// 小程序启动判断用户是否受权，根据是否受权来请求不一样的业务数据
wx.getSetting({
  success: (res) => {
    //用户已受权
    if (res.authSetting['scope.userInfo']) {
      // 判断登陆态是否过时
      wx.checkSession({
        // 登陆态未过时，直接进行业务请求
        success: (res) => {
          //业务请求代码。。。
        },
        // 登陆态已过时 。从新调用wx.login进行登陆换取code
        fail: (res) => {
        // 能够在这里进行从新登陆后的回调
          wx.login({
            success: function(res) {
              let code = res.code;
            }
          })
        }
      })
    }
    // 为受权 
    else {
      // 执行未受权的业务代码
    }
  }
})
复制代码

附上登陆态过时的回调。

/**
   * 登陆失败后从新登陆
   */
  getToken: function(fn) {
    let that = this;
    let getLogin = new Promise((resolve, reject) => {
      //登陆获取code
      wx.login({
        success: function(res) {
          var code = res.code;
          that.globalData.code = code;
          resolve([fn, code]);
        },
        fail: function(res) {
          reject();
        }
      })
    });
    getLogin.then(([fn, code]) => {
      return new Promise((resolve, reject) => {
        //使用该api须要在页面经过button组件触发受权弹窗
        wx.getUserInfo({
          success: function(res) {
            //这里的iv，encryptedData等数据是用来服务器端进行解密的。
            let requestData = {
              "Data": {
                "IV": res.iv,
                "EncryptedData": res.encryptedData,
                "JsCode": code,
              },
            }
            //发送请求
            wx.request({
              url: that.apiList.login.getLogin,
              data: requestData,
              method: "POST",
              success: function(res) {
              //获取到自定义登陆态存入storage
                if (res.data && res.data.Success) {
                  that.globalData.token = res.data.Data.Key;
                  wx.setStorageSync('LoginSessionKey', res.data.Data.Key);
                  resolve(fn);
                } else {
                  reject();
                }
              },
              fail: function() {
                Hq.tipMaskNoneIcon('您的网络开小差了');
              }
            })
          }
       
        })
      });
    }).then((fn) => {
      that.getCountryInfo(fn);
    }, function() {}))
  },

  //执行fn回调函数
  getCountryInfo: function(fn) {
    if (typeof fn == 'function') {
      //登陆成功后进行业务请求。
      fn();
    } else {
      Hq.afterSend();
    }
  },
复制代码

以上就是个人一些理解。有语句不通，逻辑不清晰的地方,请不吝留言赐教!

感谢阅读个人文章!