单点登录（SSO）

1. 什么是单点登录

单点登录（Single Sign On，SSO）是目前比较流行的企业业务整合的解决方案之一。

SSO 的定义是：在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

SSO 一般需要一个独立的认证中心（passport），子系统的登录均通过 passport，子系统本身不参与登录操作。当一个系统成功登录后，passport 会颁发一个令牌给各个子系统，子系统可拿令牌获取各自的受保护资源。为了减少频繁认证，各子系统在被 passport 授权后会建立一个局部会话，在一定时间内可无需再次向 passport 发起认证。

例子：淘宝、天猫都属于阿里旗下，当用户登录淘宝后再打开天猫，系统便自动帮用户登录了天猫，这种现象就属于单点登录。

2. 如何实现单点登录

2.1 同域名下的单点登录

利用 Cookie 的特点：把 Cookie 的 domain 属性设置为父域（主域名），path 属性设置为根路径，将 Session ID（或 Token）保存到父域中。所有子域应用都可以访问到这个 Cookie。

要求应用系统建立在共同的主域名之下（如 tieba.baidu.com 和 map.baidu.com 都建立在 baidu.com 下）。

2.2 不同域名下的单点登录

由于 Cookie 不跨域，可部署一个独立的认证中心 Web 服务：

用户在认证中心统一登录。
登录成功后，认证中心记录用户登录状态，将 token 写入 Cookie（这个 Cookie 是认证中心的，应用系统访问不到）。
应用系统检查请求是否带 Token；没有则跳转至认证中心，浏览器自动带上认证中心的 Cookie。
认证中心根据 Cookie 判断用户是否已登录：
- 已登录：生成 Token 拼到目标 URL 跳回应用系统。
- 未登录：返回登录页面。
应用系统拿到 Token 后向认证中心校验合法性，通过后写入自己的 Cookie 并放行。

此方式相对复杂、支持跨域、扩展性好，是单点登录的标准做法。

2.3 完全前端实现（不同域名）

将 Session ID（或 Token）保存到 LocalStorage，前端每次发请求主动带上：

// 获取 token
var token = result.data.token;

// 动态创建跨域 iframe，将 token 写入多个域的 LocalStorage
var iframe = document.createElement('iframe');
iframe.src = 'http://app1.com/localstorage.html';
document.body.append(iframe);

setTimeout(function () {
  iframe.contentWindow.postMessage(token, 'http://app1.com');
}, 4000);

setTimeout(function () { iframe.remove(); }, 6000);

// iframe 加载的 HTML 中监听 message 事件，把 token 写入 LocalStorage
window.addEventListener('message', function (event) {
  localStorage.setItem('token', event.data);
}, false);