Skip to content

微信小程序登录 ​

作者:江月迟迟
发表于:2024-12-10
字数统计:851 字
预计阅读3分钟

主流程 ​

img

  1. 小程序端通过原生wx.login()方法从微信接口服务获取临时登录凭证code
  2. 小程序端通过wx.request()方法发送code到开发者服务器(服务端、后端)
  3. (后端)通过auth.code2Session接口换取open_id、union_id、session_key
  4. (后端)上一步换取的东西,自定义登录态(session方案和token方案)
  5. 小程序端拿到token,存入前端状态存储中(setStorage 和 getStorage)
  6. 小程序端通过请求服务端业务接口,通过token换取存储的个人信息、业务信息。

持久化存储 ​

小程序一般用的都是sdk包自带的setStorage 和 getStorage

另外,全局变量就放到App下的globalData

过期校验 ​

小程序登录态过期校验 ​

我们知道, 浏览器里面的登录态 cookie 是有失效时间的, 比如一天, 七天, 或者一个月

也许有朋友会提出疑问, 直接用 storage 的话, 小程序的登录态有效期怎么办?

问到点上了! 小程序已经帮我们实现好了 session 有效期的判断 wx.checkSession

它比 cookie 更智能, 官方文档描述如下

通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序,用户登录态越有可能失效。反之如果用户一直在使用小程序,则用户登录态一直保持有效

也就是说小程序还会帮我们自动 renew 咱们的登录态, 简直是人工智能 cookie, 点个赞👍

这个wx.checkSession不用传参,自动调的,就会知道这个用户在这个微信小程序是否登录态失效,查看文档得知,这个会通过session_key来判断是否过期,session_key是放到后端的,所以联动后端一起判断是否登录态失效,是很有必要的。

调用时机:在onMount周期下检测。

自定义登录态过期校验 ​

这个校验不由前端做,将token挂到header上,在需要token的接口调用时,后端会判断这个token是否是过期的,如果token过期,后端应该会返回请重新登录相关内容。

无感刷新 ​

小程序登录态 ​

使用wx.checkSession,过期就重新调用wx.login,实现小程序登录态无感刷新

自定义登录态 ​

后端生成accessToken和refreshToken,实现长短token的无感刷新

主流程 ​

在这里插入图片描述

图片:前后端利用accessToken与refreshToken无感刷新_refreshtoken刷新accesstoken-CSDN博客

参考:前后端利用accessToken与refreshToken无感刷新_refreshtoken刷新accesstoken-CSDN博客

JWT中RefreshToken的应用场景及刷新token的具体实现思路_jwt refresh token-CSDN博客

Asp.Net Core 5 REST API 使用 RefreshToken 刷新 JWT - Step by Step - 技术译民 - 博客园 (cnblogs.com)

拓展 ​

当自定义返回的错误导致业务出错时,静默续期的的重试次数应有上限

至此,我们可以封装一个简单的接口,来在每次登录态过期的时候自动续期:

  1. 在请求前,使用checkSession()检车本次周期内session_key是否有效,无效则doLogin()拉起登录获取sessionId。

  2. 请求接口,若返回特定登录态失效错误码(此处假设为LOGIN_FAIL_CODE),则doLogin()拉起登录获取sessionId。

  3. 使用tryLoginCount来标志重试次数,TRY_LOGIN_LIMIT来标志重试次数上限,避免进入死循环。

    小程序的登录与静默续期

单点登录 ​

参考资料 ​

微信小程序登录流程(详细+图解)

小程序的登录与静默续期

微信小程序登录的前端设计与实现

彻底搞懂小程序登录流程-附小程序和服务端代码

低代码对接微信小程序

活字格-微信公众平台

小程序:跨平台单点登录的实现与优化