什麼是單一登入 (SSO)？

前端單一登入 (SSO) 是一種使用者驗證和授權方法，使用戶能夠使用一組登入憑證存取多個應用程式或網(wǎng)站，從而消除重複登入和註冊。 這改善了使用者體驗，降低了維護成本，並增強了安全性。

實作單一登入解決方案

前端 SSO 實作有幾個關鍵方法：

基於 Cookie 的 SSO

這種廣泛使用的方法利用了瀏覽器的 cookie 機制。 首次登入中央驗證頁面（例如頁面 A）時，會建立一個包含使用者資料和過期時間的加密 cookie。 Cookie 的網(wǎng)域設定為頂級網(wǎng)域（例如 example.com），從而允許在該網(wǎng)域內(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)方法涉及在認證中心成功登入後產(chǎn)生加密令牌（包含使用者資訊和過期時間）。該令牌儲存在客戶端（localStorage 或 sessionStorage）。 後續(xù)應用程式存取驗證token；有效的令牌授予直接存取權限，而無效的令牌則重定向到身份驗證中心。 基於令牌的 SSO 支援跨網(wǎng)域功能並避免 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ā)認證中心的請求，認證中心會傳回授權碼並重新導向到應用程式的回呼 URL。 應用程式將此程式碼交換為儲存在客戶端的存取和刷新令牌（包含使用者資料和過期時間）。 後續(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;`;

處理回呼（頁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

在我們的部落格上閱讀更多

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