目录

1.什么是单点登录（Single Sign On）简称SSO

2.实现方法

---

1.什么是单点登录（Single Sign On）简称SSO

• 单点登录是指在同一账号平台下或者同一父级系统下的多个应用子系统中，用户只需要登录一次，即可访问所有相互信任的应用系统。
• 单点登录的本质就是在多个应用系统中共享登录状态。

2.实现方法

• 前端实现单点登录的关键就在于共享SessionID或者Token在cookie中
• cookie的domain属性的有效值为当前域或者其父级作用域的域名/ip地址

    2.1 父域Cookie实现        同一域名的情况下（不支持跨域）

• 可以将当前cookie的domain设置为父域，父域cookie的domain会自动共享给子域domain属性；  
• 将cookie的path设置为根路径"/"，换言之就是将sessionId和token设置给父域，其下面的子系统就可以访问到这个cookie。

    2.2 统一认证中心实现       不同域名（支持跨域）

• 认证中心就是一个专门负责处理登录请求的独立web服务；
• 用户统一在认证中心进行登录，认证中心登录后将token写入cookie（此cookie是认证中心独有的），子应用系统访问不到；
• 目标应用系统登录检查当前用户有没有token，如果没有则说明用户没有登录当前系统，将跳转到认证中心（跳转时会自动带上认证中心的cookie，因此认证中心会知道当前用户是否已经登录过了）；
• 如果没有则返回登录页面进行登录；
• 如果已经登录过则会跳转到目标URL并在跳转前生成一个token拼接在URL后回传给目标应用系统，
• 目标系统拿到token向认证中心确认token合法性；
• 目标系统记录用户token登录状态，并将token写入cookie后放行进入（此cookie也是当前应用系统独有），其他子系统无法访问；
• 用户再次访问目标应用系统时会自动带上token，系统验证token进行登录，脱离认证中心。

    2.3 前后端分离实现         不同域名（支持cookie跨域传递）

• 将sessionID或者token保存在浏览器的local storage中；
• 前端每次向后端发送请求时主动将local storage中的数据传递给后端；
• 登录成功后后端将sessionID和token放在响应体中返回给前端；
• 前端拿到后将sessionID和token写在自己的localstorage中；
• 也可以通过动态iframe+post message实现将token写在多个系统的localstorage中。

// 获取 token
var token = result.data.token;
 
// 动态创建一个不可见的iframe，在iframe中加载一个跨域HTML
var iframe = document.createElement("iframe");
iframe.src = "http://app1.com/localstorage.html";
document.body.append(iframe);
// 使用postMessage()方法将token传递给iframe
setTimeout(function () {
    iframe.contentWindow.postMessage(token, "http://app1.com");
}, 4000);
setTimeout(function () {
    iframe.remove();
}, 6000);
 
// 在这个iframe所加载的HTML中绑定一个事件监听器，当事件被触发时，把接收到的token数据写入localStorage
window.addEventListener('message', function (event) {
    localStorage.setItem('token', event.data)
}, false);