前后端分离的架构下的单点登录方案

在项目分工越来越精细的大趋势下，微服务，前后端分离，前后端独立开发测试部署已经成为标配；于是单点登录的问题就变成了，各个前端项目和认证中心的职责，跟后端的业务接口不再有关系，跟后端也不会再有任何瓜葛。

想要依靠前端实现单点登录，也就是需要在各个网站中依赖于 HTML 和 JS 的能力共享 Session 句柄，这个Session句柄，在目前 Oauth2 泛滥的情况下，也就是 OAuth2 的 access token。

而 Cookie 和 LocalStorage 本不能跨域，但是依赖于现有互联网的基础设施，可以实现跨域，比如依赖于浏览器实现原理的JSONP，依赖于HTML5的 Iframe + window.postMessage 方案，依赖于HTTP协议的GET URL地址传递的方式等等都可以在不同域名的网站之间传递信息；

下面的方案依赖 Iframe + window.postMessage 的能力，实现了 access token 的统一发放和在多个网站中共享。

• 单点登出，业务系统中，退出按钮，调用 revoke接口，revoke一个 token；
• 登录页面：手机号 + 微信扫码 + 钉钉扫码；登录成功后回种token，然后跳转到业务系统等待页面；
• 代理页面：proxy，判断存储的token失效的话，跳转到登录页面；有效的话，回种token到业务系统；然后跳转回业务系统
• 业务系统proxy：没有有效的token时跳转到sso的代理页面，token有效时跳转到源页面；nginx全部代理到同一个域名，处理回种token的逻辑；
• 业务系统的每次接口调用，401的话，跳转到sso的登录页面
• SSO Server：手机号密码接口，微信钉钉扫码登录授权回调接口，revoke token接口，refresh token 接口；
• 某个业务系统中刷新token时，要回种到sso；
• 回种token的过程就是使用上下文信息创建一个iframe，然后postMessage两次；

参考

cookie设置域名问题，cookie跨域
XMLHttpRequest Level 2 使用指南
跨源通信 ：描述前端跨域的各种方法；
localStorage和cookie的跨域解决方案：实现前端 SSO 的原理；
localstorage跨域解决方案：postMessage demo

什么是SSO?
单点登录（SSO）的设计
前后端分离 单点登录SSO 纯前端实现单点登录SSO
前后端分离下的CAS跨域流程分析
前后端分离完全跨域实现单点登录(感觉很low但是真香)
前后端分离如何做SSO单点登录？
前后端分离 单点登录SSO 纯前端实现单点登录SSO