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

Posted 2022-07-12 极客飞兔

✨ 目录

• • 🎈 什么是单点登录
  • 🎈 单点登录的凭证
  • 🎈 父域 Cookie 方式
  • 🎈 用户认证中心方式
  • 🎈 localstorage方式

🎈 什么是单点登录

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

🎈 单点登录的凭证

• 由单点登录的原理，可以看出来，最重要的就是这个通用的登录凭证 ticket 如何获得
• 而实现 ticket 多应用共享主要有三种方式：父域加密 Cookie、用户认证中心、Localstorage

🎈 父域 Cookie 方式

• 用户在登录父应用后，服务端返回用户登录后的 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 返回给前端处理即可
• 这样其实也实现了，多应用下单点登录的问题，并且支持跨域