什么是單點(diǎn)登錄 (SSO)？

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

實(shí)施單點(diǎn)登錄解決方案

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

基于 Cookie 的 SSO

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

示例：設(shè)置和檢索 cookie。

設(shè)置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)方法涉及在認(rèn)證中心成功登錄后生成加密令牌（包含用戶信息和過期時(shí)間）。該令牌存儲(chǔ)在客戶端（localStorage 或 sessionStorage）。 后續(xù)應(yīng)用訪問驗(yàn)證token；有效的令牌授予直接訪問權(quán)限，而無效的令牌則重定向到身份驗(yàn)證中心。 基于令牌的 SSO 支持跨域功能并避免 cookie 限制，但需要額外的存儲(chǔ)和網(wǎng)絡(luò)開銷，并且如果令牌被泄露，則會(huì)帶來安全風(fēng)險(xiǎn)。

示例：存儲(chǔ)和驗(yàn)證令牌。

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

示例：授權(quán)代碼流程。

發(fā)送授權(quán)請求（頁面 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 是一個(gè)用于 Web 托管、異步任務(wù)和 Redis 的尖端無服務(wù)器平臺(tái)，提供：

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

探索文檔并嘗試一下！

在 X 上關(guān)注我們：@LeapcellHQ

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

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