前后端分离 单点登录SSO 纯前端实现单点登录SSO

示例代码地址【GitHub】

以前涉及到单点登录，都是用CAS解决的，不过体验不是很好，但是也确确实实实现了单点登录，利用了session会话。后来我到了公司的架构部，部门决定重新定位前端技术路线，我大胆地采用了前后端分离的方式，让前端工程化，这样遇到单点登录就涉及到一个问题，前端已经不存在session会话了，于是我就采用cookie，将登录信息存储进cookie，这时有人就会问，cookie是不是不安全，在我看来session和cookie的安全级别是差不多的，都很容易被攻击。如果对于内网项目，可以暂不考虑，如果是外网项目则必须采用https协议。

现在我就简单地说下我是如何实现的吧：

比如现在有a.com、b.com、uc.com；a.com和b.com中利用iframe嵌套uc.com，利用html5跨域通讯postMessage将在a.com中登录的信息告知uc.com,然后uc.com将需要保存的信息存入cookie，a.com也将需要保存的信息存入cookie；此时访问b.com时，b.com中的iframe中的uc.com会将cookie中的登录信息通过postMessage告知b.com这些信息，然后b.com将这些信息存入cookie中，此时b.com就是已登录状态了，无需再登录，这样便实现了单点登录。以上反之则是未登录。

上一种方式对于安全性较高的Safari和Opera浏览器是不可行的，不同之处在于这些浏览器不允许iframe中跨域存储cookie，此时解决方案是在a.com中登录后将信息存入cookie，然后跳转至利用iframe嵌套a.com的uc.com，a.com将cookie中的登录信息传递给uc.com，这样uc.com就获取到了登录信息，然后存储进cookie，然后利用浏览器路径替换方式进入a.com，这样便实现了单点登录。

我的方法很简单，有一个地方需要注意，就是postMessage只将信息发送给约定好的域，iframe只被约定好的域嵌套！

单点登录SSO-流程图：

 

对于安全性较高的浏览器，单点登录SSO-流程图：

是不是很简单，目前我是这么解决的，如果谁有更好的想法的话，就在此请求你一起分享下吧~

补充：前端和后端交互的时候，基本都是和rest风格的接口交互，我平时交互的时候都是头部信息中放入后端以JWT形式生成的token，后端获取请求时去解析前端传过来的token值，然后判断后给以相应的处理。这里就不介绍JWT了，关于JWT的文章泛滥了~