图文并茂，为你揭开“单点登陆“的神秘面纱

原创不易，但愿能关注下咱们，再顺手点个赞~~

本文首发于政采云前端团队博客： 图文并茂，为你揭开“单点登陆“的神秘面纱

概念

单点登陆( Single Sign On ，简称 SSO），是目前比较流行的企业业务整合的解决方案之一，用于多个应用系统间，用户只须要登陆一次就能够访问全部相互信任的应用系统。

前置介绍

1. 同源策略 限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互，要求协议，端口和主机都相同。
2. HTTP 用于分布式、协做式和超媒体信息系统的应用层协议。HTTP 是无状态协议，因此服务器单从网络链接上无从知道客户身份。 那要如何才能识别客户端呢？给每一个客户端颁发一个通行证，每次访问时都要求带上通行证，这样服务器就能够根据通行证识别客户了。最多见的方案就是 Cookie。
3. Cookie 是客户端保存用户信息的一种机制，保存在客户机硬盘上。能够由服务器响应报文Set-Cookie的首部字段信息或者客户端 document.cookie来设置，并随着每次请求发送到服务器。子域名能够获取父级域名 Cookie。
4. Session 实际上是一个抽象概念，用于跟踪会话，识别屡次 HTTP 请求来自同一个客户端。Cookie 只是通用性较好的一种实现方案，一般是设置一个名为 SessionID（名称可自定义，便于描述，本文均使用此名称）的 Cookie，每次请求时携带该 Cookie，后台服务便可依赖此 SessionID 值识别客户端。

单系统登陆

在介绍单点登陆以前，咱们先来了解一下在浏览器中，访问一个须要登陆的应用时主要发生的一系列流程，以下图所示：

如下为连环画形式，指望能让读者更好的理解：

依赖于登陆后设置的 Cookie，以后每次访问时都会携带该 Cookie，从而让后台服务能识别当前登陆用户。

题外话

后台是如何经过 SessionID 知道是哪一个用户呢？

1. 数据库存储关联：将 SessionID 与数据信息关联，存储在 Redis、mysql 等数据库中；
2. 数据加密直接存储：好比 JWT 方式，用户数据直接从 SessionID 值解密出来（此方式时 Cookie 名称以 Token 居多）。

多系统登陆问题

同域名

当访问同域名下的页面时，Cookie 和单系统登陆时同样，会正常携带，后台服务便可直接获取到对应的 SessionID 值，后台为单服务仍是多服务无差异。

不一样子域名

子域名间 Cookie 是不共享的，但各子域名都可获取到父级域名的 Cookie，即app.demo.com与news.demo.com都可以获取 demo.com域名下的 Cookie。因此能够经过将 Cookie 设置在父级域名上，能够达到子域名共享的效果，即当用户在 app.demo.com 域名下登陆时，在demo.com域名下设置名为 SessionID 的 Cookie，当用户以后访问news.demo.com时，后台服务也能够获取到该 SessionID，从而识别用户。

彻底不一样域名

默认状况下，不一样域名是没法直接共享 Cookie 的。

前端跨域带 Cookie

若是只是指望异步请求时获取当前用户的登陆态，能够经过发送跨域请求到已经登陆过的域名，并配置属性：

xhrFields: {
  withCredentials: true
}
复制代码

这样可在请求时携带目标域名的 Cookie，目标域名的服务便可识别当前用户。

可是，这要求目标域名的接口支持 CORS 访问（出于安全考虑，CORS 开启 withCredentials 时，浏览器不支持使用通配符*，需明确设置可跨域访问的域名名单）。

题外话：

若是只是为了规避浏览器的限制，实现与通配*一样的效果，到达全部域名均可以访问的目的，可根据访问的 Referrer 解析请求来源域名，做为可访问名单。可是出于安全考虑，不推荐使用，请设置明确的可访问域名。

CAS

CAS（Central Authentication Service），即中央认证服务，是 Yale 大学发起的一个开源项目，旨在为 Web 应用系统提供一种可靠的单点登陆方法。

既然不能跨域获取，那 CAS 如何作到共享呢？它经过跳转中间域名的方式来实现登陆。

页面访问流程以下图：

如下为连环画形式，指望能让读者更好的理解：

其中须要关注如下 2 点：

1. 全部的登陆过程都依赖于 CAS 服务，包含用户登陆页面、ST 生成、验证；
2. 为了保证 ST 的安全性，通常 ST 都是随机生成的，没有规律性。CAS 规定 ST 只能保留必定的时间，以后 CAS 服务会让它失效，并且，CAS 协议规定 ST 只能使用一次，不管 ST 验证是否成功，CAS 服务都会清除服务端缓存中的该 ST，从而规避同一个 ST 被使用两次或被窃取的风险。

扩展阅读

其余相关的内容，也能够进行简单了解，如：单点登陆退出 SLO、OAuth2。

参考文档

浏览器的同源策略

CAS 协议

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“ 5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com

推荐阅读

1024 巨献！！一文看尽前端过去一年的精华沉淀（700 篇好文大汇总）

多是最全的 “文本溢出截断省略” 方案合集

乾坤大挪移！React 也能 “用上” computed 属性