Skip to content

微信小程序登录

作者:青见春山
发表于:2024-12-10
字数统计:851 字
预计阅读3分钟

主流程

img

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

持久化存储

小程序一般用的都是sdk包自带的setStoragegetStorage

另外,全局变量就放到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,实现小程序登录态无感刷新

自定义登录态

后端生成accessTokenrefreshToken,实现长短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来标志重试次数上限,避免进入死循环。

    小程序的登录与静默续期

单点登录

参考资料

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

小程序的登录与静默续期

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

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

低代码对接微信小程序

活字格-微信公众平台

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