什么是SSO？
如果你点开这里，那么我默认你已经知道什么是SSO单点登录。如果你还不知道那么可能本文对你也许没多大帮助。
前言
为什么要写前言？其实我很懒我不想写文章、前言只是发个牢骚，很多文章都有写到SSO单点登录的实现说明，但大多都是介绍什么是session、什么是cookie之类的，千篇一律。文章很长、但都略过了怎么在一个浏览器中不同域名下共享登录状态的核心操作，这很气人！为了节省时间本篇仅讲解如何共享的问题。
正文
一、假设我们有网站 A(www.a.com)和网站B(www.b.com)。在某一时刻用户登录了网站A，那么怎么通知用户本地的网站B标记用户已经登录呢？也许有点绕，看代码。我们首先需要在网站A的登录成功页面嵌入如下HTML代码（这样在我们登录A成功的同时嵌入B）：
<iframe src="http://www.b.com" style="height: 0px;width: 0px;display: none;"></iframe>
二、当然这还没有完成，嵌入了B的目的就是要网站B在该浏览器标记用户已经登录那么标记谁登录了？这个谁就需要我们从A的登录结果中传递过去。在网站A的登录成功页面继续嵌入如下javascript代码（实现数据从A到iframe中B的传递）postMessage实例参考：
<script>
var data=JSON.stringify({
msg:'建议以字符串形式传输字符串',
token:'这是从后台而来的token'
})
document.getElementsByTagName('iframe')[0].contentWindow.postMessage(data,'*');
</script>
三、此时我们已经通过postMessage方法传输数据到B，那么下一步我们就必须在B中接收该数据并存贮就好了（我们第一步中iframe中的src不一定非要指向B的首页，可以是B的某个页面即可，以下所指的B页面均指该src指向的页面）。那么我们在B页面下嵌入如下javascript代码接收A的数据并存贮：
<script>
// 有消息从父级传来时 存贮 tokenData
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
//e.data即是我们从A传来的数据 这里使用localStorage进行存贮（请勿使用sessionStorage）
localStorage.setItem("tokenData",e.data);
},false);
</script>
四、其实到上面就完成了共享的过程，第三步就相当于在网站B在用户浏览器中存了一些数据，当用户打开网站B时通过localStorage.getItem("tokenData")即可判断用户的是否登录，当然这个数据一般仅存贮用户的一个标识和过期时间，是否过期则交由服务器仔细判断。
实例
以下提供完整的实例代码进行测试
- a.html
<title>A首页</title>
<meta charset="utf-8">
<p>
<button onclick="login();" id="login">同步登录</button>
<p id="msg" style="display: none;">该用户已经登录
<button onclick="localStorage.clear();" id="login">注销</button>
</p>
</p>
<iframe src="http://www.b.com" style="height: 0px;width: 0px;display: none;"></iframe>
<script>
// 是否显示“同步登录”按钮
var tokenData=localStorage.getItem('tokenData')
if(tokenData){
document.getElementById('login').style.display='none';
document.getElementById('msg').style.display='block';
}
// 同步登录
function login(){
let data=JSON.stringify({
msg:'建议以字符串形式传输字符串',
token:'这是从后台而来的token'
})
document.getElementsByTagName('iframe')[0].contentWindow.postMessage(data,'*');
}
// 有消息从父级传来时 存贮 tokenData
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
localStorage.setItem("tokenData",e.data);
},false);
</script>
- b.html
<title>B首页</title>
<meta charset="utf-8">
<p>
<button onclick="login();" id="login">同步登录</button>
<p id="msg" style="display: none;">该用户已经登录
<button onclick="localStorage.clear();" id="login">注销</button>
</p>
</p>
<iframe src="http://www.a.com" style="height: 0px;width: 0px;display: none;"></iframe>
<script>
// 是否显示“同步登录”按钮
var tokenData=localStorage.getItem('tokenData')
if(tokenData){
document.getElementById('login').style.display='none';
document.getElementById('msg').style.display='block';
}
// 同步登录
function login(){
let data=JSON.stringify({
msg:'建议以字符串形式传输字符串',
token:'这是从后台而来的token'
})
document.getElementsByTagName('iframe')[0].contentWindow.postMessage(data,'*');
}
// 有消息从父级传来时 存贮 tokenData
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
localStorage.setItem("tokenData",e.data);
},false);
</script>
效果（注：A、B域名均在本地模拟）
- 未登录之前A、B的效果均如下图：
未登录
- 点击A “同步登录”按钮 然后打开B
www.b.com如果你已经打开，那么请刷新B即可看到如下效果：
同步登录效果
- 例子很简洁由于一些细节并未过于深究，比如点击A的“同步登录”按钮，A的状态并未改变等，感兴趣可以自行完善。
结语
也许你可能会觉得文章与标题不符，因为这里并未讲到后端服务器也未曾进行登录，仅仅实现的跨域同步信息。那么我就再啰嗦一下，跨域同步信息就是SSO实现的核心，无论是否前后端分离，你最终都会获取到一个token或者sessionid之类的，共享这个数据就能实现效果。这里的A页面和B页面不仅仅指A、B的首页而是指某一个可直接访问的页面即可。关于安全的问题，我们说了token类似：{id:1,time:1538884342}，SSO服务器需要验证该token是否未被篡改、是否过期，id 为1的用户是否登录。略！
网友评论