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

微信扫一扫,分享到朋友圈

单点登录(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这个概念。

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

先来想几个问题

  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)
  }
}
复制代码

渣渣水平,欢迎点赞讨论

微信扫一扫,分享到朋友圈

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

无数据知识蒸馏

上一篇

配置nginx https

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友