小程序的登陆流程个人详解

小程序的登陆流程个人分析

最近开发了小程序，小程序感觉有很多坑，比方说授权方式从主动推送现在改为了必须主动点击，还有类似于无法进行双向绑定，还有表单校验的问题，这里先写一下我认为比较关键的小程序的 登陆流程

下面这张图是小程序官方文档登陆流程图

光看这张图理解起来其实是有点难以理解的

这里我先分析一下我在做小程序的时候登陆的流程

登陆流程

​ 首先我们手动触发wx.login()这个内置方法获取code，这个code相当于一个临时的验证码，发送给后端，后端再通过微信的开放接口将这个code+appid+appsecret发送给微信后台（appid和appsecret是再微信的小程序平台配置好的，后端以及存好这两个码），到这步为止后端还不知道到底这个用户的openId（微信用户的专属id）是多少。

​ 微信后台收到以后会触发小程序提醒，告诉用户这个小程序想要获取你的信息你是否同意，授权之后微信会给我们的后端返回openId和session_key(用于解密用户的隐私信息)，这时候后端才得到了用户的专属openId并存起来，将这个用户当作后台的一个真正用户，并返回一个后台的token，用于小程序的接口请求

wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          app.globalData.post({
            url: app.globalData.api.LOGIN,
            data: {
              code: res.code
            }
          }).then(r => {
            if (r.data.phoneNumber && r.data.phoneNumber != '') { //用于判断是否数据库中已存用户的手机号，如果没有需要用户手动授权获取
              that.setData({ hasPhone: true })
            }else {
              that.setData({ hasPhone: false })
            }
            wx.setStorageSync('token', r.data.weixinUserToken) //将token存储在本地，当token没有失效时，后台可以直接登陆不需要再向微信后台求证
            app.globalData.header.wxToken = r.data.weixinUserToken //将token放入小程序的请求头重
            resolve(r.data.weixinUserToken)
          }).catch(e => {
            wx.showToast({
              icon: 'cancel',
              title: '验签失败'
            })
            reject(e)
          })
        }
      })
    })
  },

这时候小程序获取了后台的token相当于已经在后台登陆了，小程序端可以直接向后台请求接口了