前端的单点登录（简单理解）

参考链接:
https://blog.csdn.net/ban_tang/article/details/80015946
https://www.jianshu.com/p/75edcc05acfd

一、什么是单点登录

单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

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

---

二、单点登录的实现

1、同域名下的单点登录

一个企业一般情况下只有一个域名，通过二级域名区分不同的系统，比如说我们公司的域名a.com ，同时有两个业务系统分别为：qa.a.com和qa2.a.com。那么需要再做单点登录（SSO），需要一个登录系统，叫做：sso.a.com。

可以在sso.a.com中登录，并在将cookie设置在顶级域名中,这样所有的子域应用就都可以访问到这个 Cookie 了.实现了简单的单点登录

2、不同域名下的单点登录

（1）统一认证中心方案（CAS标准方案）

看到很有意思的例子：
例如你去食堂吃饭，食堂打饭的阿姨（www.qiandu.com）告诉你，不收现金。并且告诉你，你去门口找换票的（passport.com）换小票。于是你换完票之后，再去找食堂阿姨，食堂阿姨拿着你的票，问门口换票的，这个票是真的吗？换票的说，是真的，于是给你打饭了。

• 第一步：用户访问www.qiandu.com。过滤器判断用户是否登录，没有登录，则重定向（302）到网站http://passport.com。
• 第二步：重定向到passport.com，输入用户名密码。passport.com将用户登录的信息记录到服务器的session中。
• 第三步：passport.com给浏览器发送一个特殊的凭证，浏览器将凭证交给www.qiandu.com，www.qiandu.com则拿着浏览器交 给他的凭证去passport.com验证凭证是否有效，从而判断用户是否登录成功。
• 第四步：登录成功，浏览器与网站之间进行正常的访问。

(2)LocalStorage跨域实现

前端可以通过 iframe+postMessage() 方式，将同一份 Token 写入到了多个域下的 LocalStorage 中，前端每次在向后端发送请求之前，都会主动从 LocalStorage 中读取 Token 并在请求中携带，这样就实现了同一份 Token 被多个域所共享。
示例代码

// 获取 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);

个人的简单理解，如有不足之处希望大佬补充

标签：单点,iframe,登录,前端,token,passport,com
来源： https://blog.csdn.net/weixin_44283145/article/details/115474072