什么是單點登錄 (SSO)？

前端單點登錄 (SSO) 是一種用戶身份驗證和授權方法，使用戶能夠使用一組登錄憑據(jù)訪問多個應用程序或網(wǎng)站，從而消除重復登錄和注冊。 這改善了用戶體驗，降低了維護成本，并增強了安全性。

實施單點登錄解決方案

前端 SSO 實現(xiàn)有幾種關鍵方法：

基于 Cookie 的 SSO

這種廣泛使用的方法利用了瀏覽器的 cookie 機制。 首次登錄中央身份驗證頁面（例如頁面 A）時，會創(chuàng)建一個包含用戶數(shù)據(jù)和過期時間的加密 cookie。 Cookie 的域設置為頂級域（例如 example.com），從而允許在該域內(nèi)的應用程序之間共享（a.example.com、b.example.com 等）。隨后訪問其他應用程序會檢查此 cookie；如果存在，用戶將自動登錄；否則，重定向至認證頁面。 雖然簡單，但這種方法僅限于同域應用程序，面臨跨域挑戰(zhàn)，并且對 cookie 大小和數(shù)量有限制。

示例：設置和檢索 cookie。

設置cookie（頁面A）：

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

檢索和使用 cookie（頁面 B）：

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);

基于令牌的 SSO

這種無狀態(tài)方法涉及在認證中心成功登錄后生成加密令牌（包含用戶信息和過期時間）。該令牌存儲在客戶端（localStorage 或 sessionStorage）。 后續(xù)應用訪問驗證token；有效的令牌授予直接訪問權限，而無效的令牌則重定向到身份驗證中心。 基于令牌的 SSO 支持跨域功能并避免 cookie 限制，但需要額外的存儲和網(wǎng)絡開銷，并且如果令牌被泄露，則會帶來安全風險。

示例：存儲和驗證令牌。

存儲令牌（頁面 A）：

// Generate the token value
const token = generateToken(userinfo);

// Store the token
localStorage.setItem('sso_token', token);

檢索和使用令牌（其他頁面）：

// Retrieve the token
const token = localStorage.getItem('sso_token');

// Validate the token
const userinfo = verifyToken(token);

// Log in directly
login(userinfo);

基于 OAuth 2.0 的 SSO

此方法利用 OAuth 2.0 的授權代碼流程。 首次登錄會觸發(fā)對認證中心的請求，認證中心返回授權碼并重定向到應用程序的回調(diào) URL。 應用程序?qū)⒋舜a交換為存儲在客戶端的訪問和刷新令牌（包含用戶數(shù)據(jù)和過期時間）。 后續(xù)應用程序訪問會檢查有效的訪問令牌，如果找到則自動登錄，否則重定向到身份驗證中心。 雖然遵守 OAuth 2.0 標準并支持各種客戶端類型（Web、移動、桌面），但它更加復雜，需要多個請求和重定向。

示例：授權代碼流程。

發(fā)送授權請求（頁面 A）：

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

處理回調(diào)（頁面A）：

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);

Leapcell：您的首要 Node.js 托管解決方案

Leapcell 是一個用于 Web 托管、異步任務和 Redis 的尖端無服務器平臺，提供：

• 多語言支持： Node.js、Python、Go 和 Rust。
• 免費無限項目： 只需支付使用費用。
• 性價比：按需付費，無閑置費用。
• 簡化的開發(fā)人員體驗：直觀的 UI、自動化 CI/CD、實時指標。
• 可擴展且高性能：自動擴展，零運營開銷。

探索文檔并嘗試一下！

在 X 上關注我們：@LeapcellHQ

在我們的博客上閱讀更多內(nèi)容

以上是單點登錄 (SSO) 變得簡單的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！