在項目分工越來越精細的大趨勢下，微服務，前後端分離，前後端獨立開發測試部署已經成爲標配；於是單點登錄的問題就變成了，各個前端項目和認證中心的職責，跟後端的業務接口不再有關係，跟後端也不會再有任何瓜葛。
想要依靠前端實現單點登錄，也就是需要在各個網站中依賴於 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