前言
最近和同事吃饭，聊到单点登录的实现，颇有争议。这两天特意花时间看了下源码，发现里面的学问还真不少！网上单点登录相关的文章大多是后端方向，前端的很少。一是为了补缺，二是作为记录，于是写下这篇文章。
1.跳还是不跳？这是一个问题！
用户仅需要在任意系统登录一次，就可以访问其他相互信任的应用系统。从技术角度来看，需要解决以下问题：
- 登录校验
- 持久化存储
- 过期机制
校验登录状态，首先检查本地sessionStorage/localStorage中是否存储了用户信息。如果没有，则继续检查用户端和sso服务端是否存在有效会话。如果没有，则跳转到sso登录页面。
用户在sso登录页面登录成功时，会与sso服务端建立起一次会话，服务器将会话ID写入sso登录页面的cookie中。为什么写入cookie，而不是其他存储方式？这里有一篇讲持久化存储的文章，不太理解的小伙伴自行阅读。在用户访问其他关联应用时，正是凭借这个cookie，告诉服务器近期已经登录过，请放行。
那么问题来了，cookie存储在sso登录页，而众所周知，cookie无法跨域访问，用户如何在其他关联应用中获取cookie呢？
刚开始我的设想是用户在访问其他关联应用时，先跳转到sso登录页面，登录页检查cookie是否存续。如果存续就将cookie拼接在关联应用地址上，然后重定向回来。这种方案从技术角度上可行，从用户体验看有极大的弊端：因为多了两次跳转，页面在首次加载时会刷新两次，白屏等待时间较长。
那有没有不跳转到sso登录页面获取cookie的方法呢？严格意义上讲并没有！但我们可以通过技术手段实现无感知跳转并获取cookie。
2.XSS和跨窗口通信
XSS跨站脚本攻击（Cross-site scripting）是一种安全漏洞。被攻击网站保持存续期间，攻击者可以向目标网站注入恶意代码窃取cookie，达到冒用目标站点用户身份的目的。
鲁迅曾经说过：‘’枪炮可以用来害人也可以用来帮人，IT技术也一样‘’。利用XSS窃取cookie的原理，通过脚本在主窗口创建一个指向sso登录页地址的iframe子窗口，并向其中注入窃取cookie的代码，然后通过postMessageAPI进行跨窗口通信，将cookie发送到主窗口中来。
还记得前文提到的会话ID吗，用户获取到cookie就意味着拿到了会话ID，向SSO服务器发送携带cookie的请求，验证该会话是否过期。如果过期，则跳转到sso登录页登录，否则返回该用户唯一凭证。通过用户唯一凭证，我们即可访问关联应用内容而不需要登录。
3.写在最后
web端实现SSO，核心是弄清楚单点登录流程的设计与架构，重点是解决跨浏览器传递信息的问题。距离上一次更文，已经很久很久了。如果您坚持看到了这里，并觉得这篇文章有用，记得点赞收藏加评论，分享给更多有需要的人哦！您的支持将是我们持续输出的动力～