单点登录(SSO),前端需要考虑些什么？

前言

最近在做单点登录的前端适配工作，包括移动端、小程序、web。也许一些人还没有接触过单点登录，接下来我将以keycloak为例进行探讨。首先介绍两个概念:

单点登录（Single Sign On），简称为 SSO，是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。(百度百科)

Keycloak是一个为浏览器和RESTful Web服务提供 SSO 的集成。

声明：本文仅代表个人观点

Refresh_token

如果做过微信开发的人应该看到过refresh_token这个概念。我就直接引用官方的解释

refresh_token由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。(微信开放文档)

简单介绍一下，在token即将过期时，通过refresh_token来拿到最新的token

在接下来的介绍中也会用到refresh这个概念。

流程图

先来看一下整体的流程图，如果不是很明白，可以先往下看，之后再翻上来看就容易理解了

keycloak单点登录前端适配流程图

先来想几个问题

1. 首次登录如何处理？
2. 之前登录过如何处理？(考虑关掉后和重新打开的间隔时间)
3. 用户在使用当中，网络断了，然后几分钟网好了如何处理？(比如过隧道)
4. 定时器选择setInterval还是选择setTimeout?(考虑使用过程中，token过期的时间是否可能在服务端被修改)

问题1和问题2我们可以在流程图中找到答案；

问题3(考虑用户体验)：在过隧道的时候，假如正好是定时器请求刷新token的时间，这时候刷新token肯定会失败，那也不能直接就让定时器断掉，而是多次尝试重新连接，直到refresh_token也过期。

问题4：考虑到token过期的时间会被在服务端更改，所以setTimeout是更好的选择

核心代码

token检查，我们需要考虑超时时间(我们的技术栈是vue)

// 返回值为过期时间
function checkTokenExpire(type: string) {
  let kcData: any = localStorage.getItem('keycloak')
  if (kcData) kcData = JSON.parse(kcData)

  if (!kcData || !kcData[type]) return -1

  const TokenParsed = kcData[type]

  if (!TokenParsed.exp) return -1

  const exp = TokenParsed.exp * 1000 - 15000

  return exp - now()
}
// token过期的时间
export function tokenNotExpire() {
  return checkTokenExpire('tokenParsed')
}
// refresh_token过期的时间
export function refreshTokenNotExpire() {
  return checkTokenExpire('refreshTokenParsed')
}

刷新token，这里会考虑到“过隧道”的情况

export async function refreshToken() {
  try {
    const refreshed = await store.state.keycloak.updateToken(-1)

    if (refreshed) {
      const kc = await initKc()

      localStorage.setItem('keycloak', JSON.stringify(kc))
      const exp = kc.tokenParsed?.exp
      if (exp) return exp * 1000 - 15000 - now()
    }
  } catch (error) {
    if (refreshTokenNotExpire() > 0) {
      setInteralToken(5000, refreshToken)
    }
  }
}

检查token过期检查策略

export async function tokenCheckStrategy() {
  // t, rt为有效期(毫秒)
  const t = tokenNotExpire()

  if (t <= 0) {
    const rt = refreshTokenNotExpire()
    if (rt <= 0) return false

    // 如果refresh_token没有过期，通过refresh_token拿到access_token, 并且开启刷新token定时器
    const tokenExp = await refreshToken()
    if (tokenExp) {
      setInteralToken(tokenExp, refreshToken)
      return true
    }
    return false
  }
  setInteralToken(t, refreshToken)
  return true
}

定时器需要在得到有效数据才能继续

export function setInteralToken(exp: number, refreshTokenFn: Function) {
  if (exp > 0) {
    setTimeout(async () => {
      const t = await refreshTokenFn()
      setInteralToken(t, refreshTokenFn)
    }, exp)
  }
}

总结

渣渣水平，欢迎点赞讨论