前后端分离 单点登录SSO 纯前端实现单点登录SSO
2017-02-10 10:39
666 查看
示例代码地址【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的文章泛滥了~
以前涉及到单点登录,都是用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的文章泛滥了~
相关文章推荐
- 基于CAS的单点登录SSO[5]: 基于Springboot实现CAS客户端的前后端分离
- 电子商务网站的设计与实现(三):四大子系统,登录-账务-前端-后端
- 中后端管理系统前后分离、前端框架的实现拙见
- 电子商务网站的设计与实现(三):四大子系统,登录-账务-前端-后端
- 前后端分离架构使用shiro框架进行登录的两种实现
- java结合node.js非对称加密,实现密文登录传参——让前后端分离的项目更安全
- 前端那些事之react篇实现登录(前后台分离)
- java前后端分离项目整合CAS实现单点登录解决方案
- Oracle OAM 实现Angular JS 前端应用SSO单点登录
- vue+springboot前后端分离实现单点登录跨域问题解决方法
- laravel 实现前后端登录分离
- Nginx配置实现前端Route路由与后端路由的分离
- Nginx部署前端代码实现前后端分离
- web前端--实现前后端分离的心得
- 电子商务网站的设计与实现(三):四大子系统,登录-账务-前端-后端
- 通过nginx部署前端代码实现前后端分离
- 电子商务网站的设计与实现(三):四大子系统,登录-账务-前端-后端
- 一个完全由后端人员写的前端页面怎么实现前后端分离?
- ThinkPHP快速实现数据分页(前端/后端分离)
- WebSphere环境下的SSO(Single sign-on:单点登录、全网漫游)实现之: 二 SSO(Single Sign-On)实现步骤