小程序篇(2):登陆获取用户信息

登陆和获取用户信息是小程序中最基本的两步操做,可是因为以前小程序官方开始时的设计缺陷,致使不少开发者将登陆和获取用户信息绑定使用,尽管后来小程序wx.getUserInfo接口调整为:在用户未受权过的状况下调用此接口,将再也不出现受权弹窗,会直接进入 fail回调,可是改了以后,依旧有很多开发者对这两步的概念混淆不清,接下来这篇文章将会详细介绍小程序这两步操做前端

登陆

wx.login()用来作登陆的方法,调用接口获取登陆凭证,code发送给后端用于置换session_key和openid等数据,接下来看看小程序的整个登陆流程是怎样的:
api-login.2fcc9f35.jpg
这是小程序官方的一张登陆流程图,如今就来解读一下这个流程git

  • 前端wx.login()获取code,调用后端接口,将获得的code发送到后端
  • 后端调用微信接口服务,用appid+appsecret+code发送过去,置换到session_key+openid,之前是不能置换unionid的,可是如今在知足如下条件能够置换到unionid
  1. 在微信开放平台下存在同主体的App、公众号、小程序
  2. 用户关注了某个相同主体公众号,或曾经在某个相同主体App、公众号上进行过微信登陆受权

同时知足以上两个条件就能拿到用户unionid,这样一来,就能在wx.login()准确识别出用户是谁github

  • 自定登陆态与openid和session_key关联,实际就是生成一个与openid,session_key关联的token,下发给前端
  • 前端将后端下发的token存入缓存,在后面的接口请求中带上自定登陆态

以上就是小程序的整个登陆流程,能够看到其实并非必定要wx.getUserInfo()才能拿到用户的信息,在特定的条件下,经过wx.login()的调用拿到unionId也能后端数据库里拿到用户信息数据库

获取用户信息

wx.getUserInfo()之前调用时是会弹出受权弹框的,根据用户的受权与否进入对应的回调函数,可是后来微信发现开发者滥用wx.getUserInfo()方法,不受权用户信息不能使用小程序,如今就只能经过button组件open-type="getUserInfo"触发受权弹窗,受权后能得到用户信息以及用户信息的加密数据,将用户信息的加密数据发送到后端,后端经过wx.login()的code置换到的session_key对加密数据进行解密就能拿到用户的完整信息,这一步实际上是对第一步的补充,当wx.login()没法确认用户的时候时候才会执行到这一步,若是在wx.login()能够确认用户信息时,就能够不用执行这一步,实现用户的无感登陆。

注意点:根据小程序官方最近发布的文档来看,小程序不能用户进入小程序时就弹登陆框要求用户登陆才能体验小程序,这种操做审核会被拒,要用户在体验必定的小程序功能后,才能引导用户去登陆受权用户信息,具体文档地址小程序

token过时重登

以往咱们写网页应用时,当后端下发的token失效时,请求接口会获得403错误码,而后前端接到返回的错误码时就会跳到登陆页要求用户从新登陆,可是在小程序当token失效时,须要跳到一个登陆页从新登陆吗?明显不须要,由于小程序自己就没有帐号密码登陆,所以登陆失效了直接作一个无感的重登操做就好了,除非某些小程序在并无依赖微信的登陆信息,而是小程序里面内置本身的用户登陆信息,这时候就须要跳到一个登陆页面进行重登,可是这样的小程序仍是少数,接下来就来看看如何小程序是如何作无感重登的。

直接来看代码:后端

const Fly = require('../libs/flyio')
const fly = new Fly()
const newFly = new Fly()
let time = 0
let baseUrl = 'xxxxx'
fly.interceptors.request.use((request) => {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
newFly.interceptors.request.use((request) => {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
fly.interceptors.response.use(
  (response, promise) => {
    wx.hideNavigationBarLoading()
    return promise.resolve(response.data)
  },
  function (err, promise) {
    wx.hideNavigationBarLoading()
    // session或者session_key失效的时候从新登陆
    if (err.status === 403) {
      //锁定当前实例,后续请求会在拦截器外排队
      this.lock()
      // 当出现未认证的状况时从新登陆,超过三次抛出错误
      if (time > 3) {
        time = 0
        return promise.reject(err.message + `(${err.status})`)
      }
      return new Promise((resolve, reject) => {
        wx.login({
          success: (e) => {
            let options = {
              'code': e.code
            }
            resolve(options)
          }
        })
      }).then((options) => {
        return newFly.post('/login', options).then(info => {
          wx.setStorageSync('token', info.token)
          time++
          //解锁后,会继续发起请求队列中的任务
          this.unlock()
          // 从新请求失败的请求
          return fly.request(err.request)
        })
      })
    }
  }
)

export {
  fly
}

上面的代码展现的就是小程序token过时重登的过程,代码很少,关键的地方也加上了注释,很容易理解,这里面最关键的就是使用了flyio这个网络请求库,利用这个库作的过时重登,这是一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库,可使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行,在小程序中使用这个库十分方便。这段代码为了不死循环,所以用了一个计数,超过三次就不会再重试登陆,直接抛错微信小程序

总结

本篇文章主要介绍了小程序的登陆流程、获取用户信息、以及登陆过时重登的相关内容,这里介绍的只是基础的通用的流程,实际上每一个小程序的业务可能不太同样,所以在具体应用须要根据具体业务再行调整。
若是有错误或不严谨的地方,欢迎批评指正,若是喜欢,欢迎点赞api

相关文章
相关标签/搜索