html5实现单点登录,图文并茂,为你揭开“单点登录“的神秘面纱
概念
單點登錄( Single Sign On ,簡稱 SSO),是目前比較流行的企業業務整合的解決方案之一,用于多個應用系統間,用戶只需要登錄一次就可以訪問所有相互信任的應用系統。
前置介紹
同源策略 限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互,要求協議,端口和主機都相同。
HTTP 用于分布式、協作式和超媒體信息系統的應用層協議。HTTP 是無狀態協議,所以服務器單從網絡連接上無從知道客戶身份。 那要如何才能識別客戶端呢?給每個客戶端頒發一個通行證,每次訪問時都要求帶上通行證,這樣服務器就可以根據通行證識別客戶了。最常見的方案就是 Cookie。
Cookie 是客戶端保存用戶信息的一種機制,保存在客戶機硬盤上。可以由服務器響應報文Set-Cookie的首部字段信息或者客戶端 document.cookie來設置,并隨著每次請求發送到服務器。子域名可以獲取父級域名 Cookie。
Session 其實是一個抽象概念,用于跟蹤會話,識別多次 HTTP 請求來自同一個客戶端。Cookie 只是通用性較好的一種實現方案,通常是設置一個名為 SessionID(名稱可自定義,便于描述,本文均使用此名稱)的 Cookie,每次請求時攜帶該 Cookie,后臺服務即可依賴此 SessionID 值識別客戶端。
單系統登錄
在介紹單點登錄之前,我們先來了解一下在瀏覽器中,訪問一個需要登錄的應用時主要發生的一系列流程,如下圖所示:
登錄流程
以下為連環畫形式,期望能讓讀者更好的理解:
依賴于登錄后設置的 Cookie,之后每次訪問時都會攜帶該 Cookie,從而讓后臺服務能識別當前登錄用戶。
題外話
后臺是如何通過 SessionID 知道是哪個用戶呢?
數據庫存儲關聯:將 SessionID 與數據信息關聯,存儲在 Redis、mysql 等數據庫中;
數據加密直接存儲:比如 JWT 方式,用戶數據直接從 SessionID 值解密出來(此方式時 Cookie 名稱以 Token 居多)。
多系統登錄問題
同域名
當訪問同域名下的頁面時,Cookie 和單系統登錄時一樣,會正常攜帶,后臺服務即可直接獲取到對應的 SessionID 值,后臺為單服務還是多服務無差別。
不同子域名
子域名間 Cookie 是不共享的,但各子域名均可獲取到父級域名的 Cookie,即app.demo.com與news.demo.com均可以獲取 demo.com域名下的 Cookie。所以可以通過將 Cookie 設置在父級域名上,可以達到子域名共享的效果,即當用戶在 app.demo.com 域名下登錄時,在demo.com域名下設置名為 SessionID 的 Cookie,當用戶之后訪問news.demo.com時,后臺服務也可以獲取到該 SessionID,從而識別用戶。
完全不同域名
默認情況下,不同域名是無法直接共享 Cookie 的。
前端跨域帶 Cookie
如果只是期望異步請求時獲取當前用戶的登錄態,可以通過發送跨域請求到已經登錄過的域名,并配置屬性:
xhrFields: {
withCredentials: true
}
這樣可在請求時攜帶目標域名的 Cookie,目標域名的服務即可識別當前用戶。
但是,這要求目標域名的接口支持 CORS 訪問(出于安全考慮,CORS 開啟 withCredentials 時,瀏覽器不支持使用通配符*,需明確設置可跨域訪問的域名名單)。
題外話:
如果只是為了規避瀏覽器的限制,實現與通配*同樣的效果,到達所有域名都可以訪問的目的,可根據訪問的 Referrer 解析請求來源域名,作為可訪問名單。但是出于安全考慮,不推薦使用,請設置明確的可訪問域名。
CAS
CAS(Central Authentication Service),即中央認證服務,是 Yale 大學發起的一個開源項目,旨在為 Web 應用系統提供一種可靠的單點登錄方法。
既然不能跨域獲取,那 CAS 如何做到共享呢?它通過跳轉中間域名的方式來實現登錄。
頁面訪問流程如下圖:
流程圖
以下為連環畫形式,期望能讓讀者更好的理解:
其中需要關注以下 2 點:
所有的登錄過程都依賴于 CAS 服務,包含用戶登錄頁面、ST 生成、驗證;
為了保證 ST 的安全性,一般 ST 都是隨機生成的,沒有規律性。CAS 規定 ST 只能保留一定的時間,之后 CAS 服務會讓它失效,而且,CAS 協議規定 ST 只能使用一次,無論 ST 驗證是否成功,CAS 服務都會清除服務端緩存中的該 ST,從而規避同一個 ST 被使用兩次或被竊取的風險。
擴展閱讀
其他相關的內容,也可以進行簡單了解,如:單點登錄退出 SLO、OAuth2。
參考文檔
招賢納士
政采云前端團隊(ZooTeam),一個年輕富有激情和創造力的前端團隊,隸屬于政采云產品研發部,Base 在風景如畫的杭州。團隊現有 50 余個前端小伙伴,平均年齡 27 歲,近 3 成是全棧工程師,妥妥的青年風暴團。成員構成既有來自于阿里、網易的“老”兵,也有浙大、中科大、杭電等校的應屆新人。團隊在日常的業務對接之外,還在物料體系、工程平臺、搭建平臺、性能體驗、云端應用、數據分析及可視化等方向進行技術探索和實戰,推動并落地了一系列的內部技術產品,持續探索前端技術體系的新邊界。
如果你想改變一直被事折騰,希望開始能折騰事;如果你想改變一直被告誡需要多些想法,卻無從破局;如果你想改變你有能力去做成那個結果,卻不需要你;如果你想改變你想做成的事需要一個團隊去支撐,但沒你帶人的位置;如果你想改變既定的節奏,將會是“5 年工作時間 3 年工作經驗”;如果你想改變本來悟性不錯,但總是有那一層窗戶紙的模糊… 如果你相信相信的力量,相信平凡人能成就非凡事,相信能遇到更好的自己。如果你希望參與到隨著業務騰飛的過程,親手推動一個有著深入的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長歷程,我覺得我們該聊聊。任何時間,等著你寫點什么,發給 ZooTeam@cai-inc.com
關于找一找教程網
本站文章僅代表作者觀點,不代表本站立場,所有文章非營利性免費分享。
本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章,希望廣大程序員努力學習,讓我們用科技改變世界。
[圖文并茂,為你揭開“單點登錄“的神秘面紗]http://www.zyiz.net/tech/detail-98819.html
總結
以上是生活随笔為你收集整理的html5实现单点登录,图文并茂,为你揭开“单点登录“的神秘面纱的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 21 | 毕业了,户口和档案怎么安排
- 下一篇: 视频捕捉、获取静态图片(自定义相机)