实战模拟│单点登录 SSO 的实现

什么是单点登录

  • 单点登录: SSO(Single Sign On) 用户只需登录一次,就可访问同一帐号平台下的多个应用系统。
  • 比如阿里巴巴这样的大集团,旗下有很多的服务系统,比如天猫,淘宝,1688等等,如果每个子系统都需要用户进行登录认证,估计用户会被烦死。
  • SSO 是一种统一认证和授权机制,去解决这种重复认证的逻辑,提高用户的体验。

单点登录原理图

单点登录的凭证

  • 由单点登录的原理,可以看出来,最重要的就是这个通用的登录凭证 ticket 如何获得
  • 而实现 ticket 多应用共享主要有三种方式:父域加密 Cookie、用户认证中心、Localstorage
  • 用户在登录父应用后,服务端返回用户登录后的 cookie,客户端将该 cookie 保存到父域中
  • 这个 cookie 最好经过加密处理,因为 Cookie 本身并不安全
  • 这种加密算法只有服务端才可以知道,服务端的解密算法不能暴漏
  • 放在父域中,主要是因为 Cookie 不能跨域实现免登,放到父域中可以解决跨域的问题
  • 父域也就是 domain 要设置成主域名,而非二级域名,这样二级域名就可以使用同一个 Cookie
// 如果某个平台有三个应用,分别是:
// 门户应用:www.autofelix.com
// 商城应用:shop.autofelix.com
// 支付应用:pay.autofelix.com

document.cookie = "ticket=xxxxxx;domain=.autofelix.com;path=/

用户认证中心方式

  • 使用一个认证中心,用来专门负责处理登录请求
  • 用户中心不处理业务逻辑,只是处理用户信息的管理以及授权给第三方应用
  • 第三方应用需要登录的时候,则把用户的登录请求转发给用户中心进行处理,用户处理完毕返回凭证,第三方应用验证凭证,通过后就登录用户。
  • 流程是用户访问应用系统,应用系统先检查用户是否有 Ticket,如果没有,则说明用户在该应用上尚未登录,跳转到用户中心,通过用户中心的 Cookie 去判断用户是否在其他应用上进行了登录
  • 如果认证中心发现用户尚未在其他任何应用上执行过登录,则提示用户执行登录操作,等待用户登录后,生成 Tickcet,并让 Ticket 拼接在 URL 上,重定向回应用系统
  • 当应用系统拿到 Ticket 后,将重新向用户认证中心发起验证,防止该 Ticket 是用户伪造,验证成功后,记录用户登录状态,并将 Ticket 写入到当前应用的 Cookie
  • 而当用户访问该应用系统时,就都会带上当前的 Ticket,也就能正常访问服务了

用户认证中心方式

localstorage方式

  • 当用户在一个应用下登录后,前端可以通过 iframe+postMessage() 方式,将同一份 Ticket 保存到多个域名下的 LocalStorage
  • 但是这种方式完全由前端控制,后端仅仅需要将用户登录成功后的 Ticket 返回给前端处理即可
  • 这样其实也实现了,多应用下单点登录的问题,并且支持跨域

localstorage方式
张贴在2