微信小程序登录体系

微信小程序登录体系

一.背景

微信小程序的登录跟传统的登录不一样,传统的登录是需要写个表单,然后表单中有用户名和密码,但是微信小程序不一样.微信小程序是依赖于微信的.

小程序可以通过微信官方提供的登录能力,方便的获取微信提供的用户身份标识,快速的建立小程序内的用户体系.

二.登录流程

微信小程序的登录体系,是涉及到三个端的,小程序端,开发者服务器端,以及微信接口服务

微信官网:登录流程时序

1.获取临时登录凭证wx.login()

调用wx.login(),获取用户临时登录凭证code

也就是说wx.login是生成一个带有时效性的凭证,在wx.login调用时,会先在微信后台生成一个临时的身份证,时效性为5分钟,然后返回给小程序,这个凭证,我们称之为:微信登录凭证code

// 登录
wx.login({
  success: res => {
    // 发送 res.code 到后台换取 openId, sessionKey, unionId
    console.log(res.code);
  }
})

2.将临时凭证回传到开发者服务器

调用wx.request()将临时凭证code,发送到我们后端自己的服务器,

在wx.login的success回调中拿到临时登录凭证code,然后通过wx.request把code传到后端开发者服务器,为了后续能拿到微信用户身份id.如果当前微信用户还没有绑定到当前小程序的用户身份.那么在这次请求中会把用户输入的账号和密码一起传到后台,然后后端的开发者服务器就可以校验账号密码之后再和微信用户id进行绑定

3.服务端登录凭证校验

在后端服务器中,开发者通过调用登录凭证校验接口来完成登录流程

登录凭证校验. 后端拿到临时登录凭证code,然后拿出配置在配置文件中的小程序appid和小程序appSecret,这三个必要参数,去调用微信服务器的登录凭证校验接口, 返回我们需要的openid和session_key.

PS：用户已经授权过的平台还会返回unionId

• openid 用户唯一标识
• session_key 会话密钥

后端拿到openid和session_key之后,会保存在数据库中,并且会生成一个自定义登录态,也就是我们常说的token,然后返回给前端

4.获取自定义登录态 token

我们拿到后端返回的token,存储于storage中

在小程序中,使用wx.setStorageSync()来存储后端返回来的token.

wx.setStorageSync('token', res.token)

其实到这里,整个微信小程序的登录体系基本已经结束了.这个时候,我们可以实现业务相关的东西了.

5.业务请求

当需要我们发起业务请求时,因为我们整个登录流程都已经走完了,令牌token已经存于storage中了,这个时候我们就可以从storage中取出token,然后携带在请求头中,向我们的后端开发者服务器发起请求.

这时通过业务请求携带的token,在数据库中去查找对应的openid,和session_key,查找到相应的微信用户id,然后把需要返回的业务数据,直接返回到前端.