實戰模擬│單點登錄 SSO 的實現

🎈 什麼是單點登錄

  • 單點登錄: SSO(Single Sign On) 用戶只需登錄一次,就可訪問同一帳號平台下的多個應用系統。
  • 比如阿里巴巴這樣的大集團,旗下有很多的服務系統,比如天貓,淘寶,1688等等,如果每個子系統都需要用戶進行登錄認證,估計用戶會被煩死。
  • SSO 是一種統一認證和授權機制,去解決這種重複認證的邏輯,提高用戶的體驗。


單點登錄原理圖

🎈 單點登錄的憑證

  • 由單點登錄的原理,可以看出來,最重要的就是這個通用的登錄憑證 ticket 如何獲得
  • 而實現 ticket 多應用共享主要有三種方式:父域加密 Cookie、用戶認證中心、Localstorage
  • 用戶在登錄父應用後,服務端返回用戶登錄後的 cookie,客戶端將該 cookie 保存到父域中
  • 這個 cookie 最好經過加密處理,因為 Cookie 本身並不安全
  • 這種加密演算法只有服務端才可以知道,服務端的解密演算法不能暴漏
  • 放在父域中,主要是因為 Cookie 不能跨域實現免登,放到父域中可以解決跨域的問題
  • 父域也就是 domain 要設置成主域名,而非二級域名,這樣二級域名就可以使用同一個 Cookie
// 如果某個平台有三個應用,分別是:
// 門戶應用:www.autofelix.com
// 商城應用:shop.autofelix.com
// 支付應用:pay.autofelix.com

document.cookie = "ticket=xxxxxx;domain=.autofelix.com;path=/

🎈 用戶認證中心方式

  • 使用一個認證中心,用來專門負責處理登錄請求
  • 用戶中心不處理業務邏輯,只是處理用戶資訊的管理以及授權給第三方應用
  • 第三方應用需要登錄的時候,則把用戶的登錄請求轉發給用戶中心進行處理,用戶處理完畢返回憑證,第三方應用驗證憑證,通過後就登錄用戶。
  • 流程是用戶訪問應用系統,應用系統先檢查用戶是否有 Ticket,如果沒有,則說明用戶在該應用上尚未登錄,跳轉到用戶中心,通過用戶中心的 Cookie 去判斷用戶是否在其他應用上進行了登錄
  • 如果認證中心發現用戶尚未在其他任何應用上執行過登錄,則提示用戶執行登錄操作,等待用戶登錄後,生成 Tickcet,並讓 Ticket 拼接在 URL 上,重定向回應用系統
  • 當應用系統拿到 Ticket 後,將重新向用戶認證中心發起驗證,防止該 Ticket 是用戶偽造,驗證成功後,記錄用戶登錄狀態,並將 Ticket 寫入到當前應用的 Cookie
  • 而當用戶訪問該應用系統時,就都會帶上當前的 Ticket,也就能正常訪問服務了


用戶認證中心方式

🎈 localstorage方式

  • 當用戶在一個應用下登錄後,前端可以通過 iframe+postMessage() 方式,將同一份 Ticket 保存到多個域名下的 LocalStorage
  • 但是這種方式完全由前端控制,後端僅僅需要將用戶登錄成功後的 Ticket 返回給前端處理即可
  • 這樣其實也實現了,多應用下單點登錄的問題,並且支援跨域


localstorage方式