前言

在 B/S 系統中，登錄功能通常都是基于 Cookie 來實現的。當用戶登錄成功后，一般會將登錄狀態記錄到 Session 中，或者是給用戶簽發一個 Token，無論哪一種方式，都需要在客戶端保存一些信息（Session ID 或 Token ），并要求客戶端在之后的每次請求中攜帶它們。在這樣的場景下，使用 Cookie 無疑是最方便的，因此我們一般都會將 Session 的 ID 或 Token 保存到 Cookie 中，當服務端收到請求后，通過驗證 Cookie 中的信息來判斷用戶是否登錄 。

單點登錄（Single Sign On, SSO）是指在同一帳號平臺下的多個應用系統中，用戶只需登錄一次，即可訪問所有相互信任的應用系統。舉例來說，百度貼吧和百度地圖是百度公司旗下的兩個不同的應用系統，如果用戶在百度貼吧登錄過之后，當他訪問百度地圖時無需再次登錄，那么就說明百度貼吧和百度地圖之間實現了單點登錄。

單點登錄的本質就是在多個應用系統中共享登錄狀態。如果用戶的登錄狀態是記錄在 Session 中的，要實現共享登錄狀態，就要先共享 Session，比如可以將 Session 序列化到 Redis 中，讓多個應用系統共享同一個 Redis，直接讀取 Redis 來獲取 Session。當然僅此是不夠的，因為不同的應用系統有著不同的域名，盡管 Session 共享了，但是由于 Session ID 是往往保存在瀏覽器 Cookie 中的，因此存在作用域的限制，無法跨域名傳遞，也就是說當用戶在 http://app1.com 中登錄后，Session ID 僅在瀏覽器訪問 http://app1.com 時才會自動在請求頭中攜帶，而當瀏覽器訪問 http://app2.com 時，Session ID 是不會被帶過去的。實現單點登錄的關鍵在于，如何讓 Session ID（或 Token）在多個域中共享。

實現方式一：父域 Cookie

在將具體實現之前，我們先來聊一聊 Cookie 的作用域。

Cookie 的作用域由 domain 屬性和 path 屬性共同決定。domain 屬性的有效值為當前域或其父域的域名/IP地址，在 Tomcat 中，domain 屬性默認為當前域的域名/IP地址。path 屬性的有效值是以“/”開頭的路徑，在 Tomcat 中，path 屬性默認為當前 Web 應用的上下文路徑。

如果將 Cookie 的 domain 屬性設置為當前域的父域，那么就認為它是父域 Cookie。Cookie 有一個特點，即父域中的 Cookie 被子域所共享，換言之，子域會自動繼承父域中的Cookie。

利用 Cookie 的這個特點，不難想到，將 Session ID（或 Token）保存到父域中不就行了。沒錯，我們只需要將 Cookie 的 domain 屬性設置為父域的域名（主域名），同時將 Cookie 的 path 屬性設置為根路徑，這樣所有的子域應用就都可以訪問到這個 Cookie 了。不過這要求應用系統的域名需建立在一個共同的主域名之下，如 http://tieba.baidu.com 和 http://map.baidu.com，它們都建立在 http://baidu.com 這個主域名之下，那么它們就可以通過這種方式來實現單點登錄。

總結：此種實現方式比較簡單，但不支持跨主域名。

實現方式二：認證中心

我們可以部署一個認證中心，認證中心就是一個專門負責處理登錄請求的獨立的 Web 服務。

用戶統一在認證中心進行登錄，登錄成功后，認證中心記錄用戶的登錄狀態，并將 Token 寫入 Cookie。（注意這個 Cookie 是認證中心的，應用系統是訪問不到的。）

應用系統檢查當前請求有沒有 Token，如果沒有，說明用戶在當前系統中尚未登錄，那么就將頁面跳轉至認證中心。由于這個操作會將認證中心的 Cookie 自動帶過去，因此，認證中心能夠根據 Cookie 知道用戶是否已經登錄過了。如果認證中心發現用戶尚未登錄，則返回登錄頁面，等待用戶登錄，如果發現用戶已經登錄過了，就不會讓用戶再次登錄了，而是會跳轉回目標 URL ，并在跳轉前生成一個 Token，拼接在目標 URL 的后面，回傳給目標應用系統。

應用系統拿到 Token 之后，還需要向認證中心確認下 Token 的合法性，防止用戶偽造。確認無誤后，應用系統記錄用戶的登錄狀態，并將 Token 寫入 Cookie，然后給本次訪問放行。（注意這個 Cookie 是當前應用系統的，其他應用系統是訪問不到的。）當用戶再次訪問當前應用系統時，就會自動帶上這個 Token，應用系統驗證 Token 發現用戶已登錄，于是就不會有認證中心什么事了。

這里順便介紹兩款認證中心的開源實現：

• Apereo CAS 是一個企業級單點登錄系統，其中 CAS 的意思是”Central Authentication Service“。它最初是耶魯大學實驗室的項目，后來轉讓給了 JASIG 組織，項目更名為 JASIG CAS，后來該組織并入了Apereo 基金會，項目也隨之更名為 Apereo CAS。
• XXL-SSO 是一個簡易的單點登錄系統，由大眾點評工程師許雪里個人開發，代碼比較簡單，沒有做安全控制，因而不推薦直接應用在項目中，這里列出來僅供參考。

總結：此種實現方式相對復雜，支持跨域，擴展性好，是單點登錄的標準做法。

實現方式三：LocalStorage 跨域

前面，我們說實現單點登錄的關鍵在于，如何讓 Session ID（或 Token）在多個域中共享。

父域 Cookie 確實是一種不錯的解決方案，但是不支持跨域。那么有沒有什么奇淫技巧能夠讓 Cookie 跨域傳遞呢？

很遺憾，瀏覽器對 Cookie 的跨域限制越來越嚴格。Chrome 瀏覽器還給 Cookie 新增了一個 SameSite 屬性，此舉幾乎禁止了一切跨域請求的 Cookie 傳遞（超鏈接除外），并且只有當使用 HTTPs 協議時，才有可能被允許在 AJAX 跨域請求中接受服務器傳來的 Cookie。

不過，在前后端分離的情況下，完全可以不使用 Cookie，我們可以選擇將 Session ID （或 Token ）保存到瀏覽器的 LocalStorage 中，讓前端在每次向后端發送請求時，主動將 LocalStorage 的數據傳遞給服務端。這些都是由前端來控制的，后端需要做的僅僅是在用戶登錄成功后，將 Session ID （或 Token ）放在響應體中傳遞給前端。

在這樣的場景下，單點登錄完全可以在前端實現。前端拿到 Session ID （或 Token ）后，除了將它寫入自己的 LocalStorage 中之外，還可以通過特殊手段將它寫入多個其他域下的 LocalStorage 中。

關鍵代碼如下：

// 獲取 token var token = result.data.token;// 動態創建一個不可見的iframe，在iframe中加載一個跨域HTML var iframe = document.createElement("iframe"); iframe.src = "http://app1.com/localstorage.html"; document.body.append(iframe); // 使用postMessage()方法將token傳遞給iframe setTimeout(function () {iframe.contentWindow.postMessage(token, "http://app1.com"); }, 4000); setTimeout(function () {iframe.remove(); }, 6000);// 在這個iframe所加載的HTML中綁定一個事件監聽器，當事件被觸發時，把接收到的token數據寫入localStorage window.addEventListener('message', function (event) {localStorage.setItem('token', event.data) }, false);

前端通過 iframe+postMessage() 方式，將同一份 Token 寫入到了多個域下的 LocalStorage 中，前端每次在向后端發送請求之前，都會主動從 LocalStorage 中讀取 Token 并在請求中攜帶，這樣就實現了同一份 Token 被多個域所共享。

總結：此種實現方式完全由前端控制，幾乎不需要后端參與，同樣支持跨域。

補充：域名分級

從專業的角度來說（根據《計算機網絡》中的定義），.com、.cn 為一級域名（也稱頂級域名），.http://com.cn、http://baidu.com 為二級域名，http://sina.com.cn、http://tieba.baidu.com 為三級域名，以此類推，N 級域名就是 N-1 級域名的直接子域名。

從使用者的角度來說，一般把可支持獨立備案的主域名稱作一級域名，如 http://baidu.com、http://sina.com.cn 皆可稱作一級域名，在主域名下建立的直接子域名稱作二級域名，如 http://tieba.baidu.com 為二級域名。

為了避免歧義，本人將使用“主域名“替代”一級域名“的說法。

---

感謝大家看到最后，我是不務正業的程序汪，文章每天持續更新！歡迎大家指出我的文章的不足之處，也歡迎大家關注、點贊+轉發。

總結

以上是生活随笔為你收集整理的实现iframe_面试官：来说说单点登录的三种实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。