單點(diǎn)登錄 (SSO) 是一種身份驗(yàn)證機(jī)制，允許用戶登錄一次并訪問(wèn)多個(gè)連接的應(yīng)用程序或系統(tǒng)，而無(wú)需對(duì)每個(gè)應(yīng)用程序或系統(tǒng)進(jìn)行重新身份驗(yàn)證。 SSO 將用戶身份驗(yàn)證集中到單個(gè)受信任的系統(tǒng)（通常稱為身份提供商或 IdP）中，然后該系統(tǒng)管理憑據(jù)并頒發(fā)令牌或會(huì)話數(shù)據(jù)以跨其他服務(wù)（稱為服務(wù)提供商或 SP）驗(yàn)證用戶的身份。 ??>

在本指南中，我們將探討 SSO 的工作原理、其優(yōu)點(diǎn)和缺點(diǎn)、常見(jiàn)用例以及 API（帶有 Express 的 Node.js）、主應(yīng)用程序 (React) 和外部應(yīng)用程序中 SSO 實(shí)現(xiàn)的示例應(yīng)用程序（反應(yīng)）。通過(guò)了解 SSO 的原理和實(shí)踐，組織可以增強(qiáng)其應(yīng)用程序和系統(tǒng)的用戶體驗(yàn)、安全性和運(yùn)營(yíng)效率。

目錄

單點(diǎn)登錄 (SSO)
• SSO 如何工作？
  SSO 的好處
  SSO 的缺點(diǎn)
  SSO 用例
  SSO 實(shí)施示例
  1. API（帶有 Express 的 Node.js）
  2.主要應(yīng)用程序（React）
  3.外部應(yīng)用程序（React）
結(jié)論

鏈接

GitHub 存儲(chǔ)庫(kù)

演示視頻

單點(diǎn)登錄 (SSO)

單點(diǎn)登錄 (SSO) 是一種身份驗(yàn)證機(jī)制，允許用戶登錄一次即可訪問(wèn)多個(gè)連接的應(yīng)用程序或系統(tǒng)，而無(wú)需對(duì)每個(gè)應(yīng)用程序或系統(tǒng)進(jìn)行重新身份驗(yàn)證。

SSO 將用戶身份驗(yàn)證集中到單個(gè)受信任的系統(tǒng)（通常稱為身份提供商或 IdP）中，然后該系統(tǒng)管理憑據(jù)并頒發(fā)令牌或會(huì)話數(shù)據(jù)，以跨其他服務(wù)（稱為服務(wù)提供商或 SP）驗(yàn)證用戶身份).

單點(diǎn)登錄如何工作？

SSO 通過(guò)基于安全令牌的機(jī)制（例如 OAuth 2.0、OpenID Connect (OIDC) 或安全斷言標(biāo)記語(yǔ)言 (SAML)）進(jìn)行操作。這是一個(gè)簡(jiǎn)化的流程：

• 用戶登錄：用戶在身份提供商 (IdP) 中輸入其憑據(jù)。

• 令牌頒發(fā)：IdP 驗(yàn)證憑據(jù)并頒發(fā)身份驗(yàn)證令牌（例如 JWT 或 SAML 斷言）。

• 服務(wù)訪問(wèn)：令牌被傳遞給服務(wù)提供商，服務(wù)提供商對(duì)其進(jìn)行驗(yàn)證并授予訪問(wèn)權(quán)限，而無(wú)需進(jìn)一步登錄。

單點(diǎn)登錄的好處

• 增強(qiáng)的用戶體驗(yàn)：用戶只需一次登錄即可訪問(wèn)多項(xiàng)服務(wù)，減少摩擦并提高可用性。

• 提高安全性：

  • 減少密碼疲勞，避免密碼重復(fù)使用等不安全行為。
  • 集中式身份驗(yàn)證可實(shí)現(xiàn)更強(qiáng)大的密碼策略并實(shí)施多重身份驗(yàn)證 (MFA)。

• 簡(jiǎn)化的用戶管理：

  • 管理員可以更輕松地管理跨連接應(yīng)用程序的用戶訪問(wèn)。
  • 從 IdP 撤銷(xiāo)對(duì)用戶的訪問(wèn)權(quán)限會(huì)禁用他們對(duì)所有集成系統(tǒng)的訪問(wèn)權(quán)限。

• 時(shí)間和成本效率：

  • 通過(guò)減少與登錄相關(guān)的幫助臺(tái)請(qǐng)求，為用戶和支持團(tuán)隊(duì)節(jié)省時(shí)間。
  • 通過(guò)利用現(xiàn)有的身份驗(yàn)證機(jī)制減少開(kāi)發(fā)時(shí)間和成本。

• 合規(guī)與審核：

  • 集中式身份驗(yàn)證和訪問(wèn)控制使執(zhí)行安全策略和跟蹤用戶活動(dòng)變得更加容易。

單點(diǎn)登錄的缺點(diǎn)

• 單點(diǎn)故障：

  • 如果 IdP 不可用或受到威脅，用戶將無(wú)法訪問(wèn)任何連接的系統(tǒng)。
  • 緩解措施：使用冗余 IdP 并確保高可用性。

• 復(fù)雜的實(shí)現(xiàn)：

  • 集成 SSO 需要大量的規(guī)劃和專(zhuān)業(yè)知識(shí)，尤其是在具有不同應(yīng)用程序和協(xié)議的環(huán)境中。
  • 緩解措施：利用 OAuth 2.0 或 SAML 等既定協(xié)議以及強(qiáng)大的 SSO 庫(kù)。

• 安全風(fēng)險(xiǎn)：

  • 如果攻擊者獲得對(duì)用戶 SSO 憑據(jù)的訪問(wèn)權(quán)限，他們就有可能訪問(wèn)所有連接的系統(tǒng)。
  • 緩解措施：實(shí)施強(qiáng)大的 MFA 并監(jiān)控可疑的登錄活動(dòng)。

• 供應(yīng)商鎖定：

  • 組織可能?chē)?yán)重依賴特定的 IdP 供應(yīng)商，這使得遷移充滿挑戰(zhàn)。
  • 緩解措施：選擇開(kāi)放標(biāo)準(zhǔn)并避免專(zhuān)有解決方案。

• 代幣管理挑戰(zhàn)：

  • 過(guò)期或被盜的令牌可能會(huì)中斷訪問(wèn)或造成安全漏洞。
  • 緩解措施：實(shí)施令牌過(guò)期、刷新機(jī)制和安全令牌存儲(chǔ)。

SSO 用例

• 企業(yè)應(yīng)用：

  • 員工只需登錄即可訪問(wèn)各種內(nèi)部工具和服務(wù)。
  • 簡(jiǎn)化入職和離職流程。

• 云服務(wù)：

  • 用戶可以在云應(yīng)用之間無(wú)縫切換，無(wú)需重復(fù)登錄。
  • 提高生產(chǎn)力和用戶體驗(yàn)。

• 客戶門(mén)戶：

  • 為不同服務(wù)的客戶提供統(tǒng)一的登錄體驗(yàn)。
  • 實(shí)現(xiàn)個(gè)性化和有針對(duì)性的營(yíng)銷(xiāo)。

• 合作伙伴集成：

  • 促進(jìn)對(duì)合作伙伴組織之間共享資源的安全訪問(wèn)。
  • 簡(jiǎn)化協(xié)作和數(shù)據(jù)交換。

SSO 實(shí)施示例

1. API（Node.js 和 Express）

API 充當(dāng)身份提供商 (IdP)。它對(duì)用戶進(jìn)行身份驗(yàn)證并頒發(fā) JWT 令牌進(jìn)行訪問(wèn)。

下面是所提供代碼的結(jié)構(gòu)化細(xì)分，為您的關(guān)注者解釋了每個(gè)部分的目的。這是如何在 API 層實(shí)現(xiàn) SSO 功能的可靠示例。

設(shè)置和依賴關(guān)系

此設(shè)置中使用了以下軟件包：

• express：用于處理 HTTP 請(qǐng)求和路由。
• jsonwebtoken：用于生成和驗(yàn)證 JWT。
• cors：用于處理來(lái)自不同客戶端應(yīng)用程序的跨源請(qǐng)求。
• @faker-js/faker：用于生成模擬用戶和待辦事項(xiàng)數(shù)據(jù)。
• cookie-parser：用于解析請(qǐng)求中發(fā)送的cookie。
• dotenv：用于安全地加載環(huán)境變量。

配置

• dotenv 用于安全地管理密鑰。
• 為開(kāi)發(fā)環(huán)境提供了后備秘密。

dotenv.config();
const SECRET_KEY = process.env.SECRET_KEY || "secret";

中間件

• CORS 確保允許來(lái)自特定前端來(lái)源（主應(yīng)用程序和外部應(yīng)用程序）的請(qǐng)求。
• cookieParser 解析客戶端發(fā)送的 cookie。
• express.json 允許解析 JSON 請(qǐng)求主體。

app.use(
  cors({
    origin: ["http://localhost:5173", "http://localhost:5174"],
    credentials: true,
  })
);
app.use(express.json());
app.use(cookieParser());

用戶身份驗(yàn)證和令牌生成

模擬數(shù)據(jù)模擬用戶及其關(guān)聯(lián)的待辦事項(xiàng)。

用戶擁有角色（管理員或用戶）和基本個(gè)人資料信息。
待辦事項(xiàng)鏈接到用戶 ID 以進(jìn)行個(gè)性化訪問(wèn)。

• /login：根據(jù)電子郵件和密碼對(duì)用戶進(jìn)行身份驗(yàn)證。

用戶成功登錄后會(huì)收到包含 JWT 的 cookie (sso_token)。
該令牌是安全的、僅限 HTTP 且有時(shí)間限制以防止篡改。

app.post("/login", (req, res) => {
  const { email, password } = req.body;
  const user = users.find(
    (user) => user.email === email && user.password === password
  );

  if (user) {
    const token = jwt.sign({ user }, SECRET_KEY, { expiresIn: "1h" });
    res.cookie("sso_token", token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      maxAge: 3600000,
      sameSite: "strict",
    });
    res.json({ message: "Login successful" });
  } else {
    res.status(400).json({ error: "Invalid credentials" });
  }
});

• /verify：通過(guò)解碼令牌來(lái)驗(yàn)證用戶的身份。無(wú)效令牌會(huì)導(dǎo)致未經(jīng)授權(quán)的響應(yīng)。

app.get("/verify", (req, res) => {
  const token = req.cookies.sso_token;

  if (!token) {
    return res.status(401).json({ authenticated: false });
  }

  try {
    const decoded = jwt.verify(token, SECRET_KEY);
    res.json({ authenticated: true, user: decoded });
  } catch {
    res.status(401).json({ authenticated: false, error: "Invalid token" });
  }
});

• /logout：清除包含 JWT 令牌的 cookie。

確保用戶可以通過(guò)清除令牌來(lái)安全注銷(xiāo)。

dotenv.config();
const SECRET_KEY = process.env.SECRET_KEY || "secret";

• /todos：檢索與經(jīng)過(guò)身份驗(yàn)證的用戶關(guān)聯(lián)的待辦事項(xiàng)。

app.use(
  cors({
    origin: ["http://localhost:5173", "http://localhost:5174"],
    credentials: true,
  })
);
app.use(express.json());
app.use(cookieParser());

• /todos：為經(jīng)過(guò)身份驗(yàn)證的用戶添加新的待辦事項(xiàng)。

app.post("/login", (req, res) => {
  const { email, password } = req.body;
  const user = users.find(
    (user) => user.email === email && user.password === password
  );

  if (user) {
    const token = jwt.sign({ user }, SECRET_KEY, { expiresIn: "1h" });
    res.cookie("sso_token", token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      maxAge: 3600000,
      sameSite: "strict",
    });
    res.json({ message: "Login successful" });
  } else {
    res.status(400).json({ error: "Invalid credentials" });
  }
});

• /todos/:id：根據(jù)提供的 ID 更新待辦事項(xiàng)。

app.get("/verify", (req, res) => {
  const token = req.cookies.sso_token;

  if (!token) {
    return res.status(401).json({ authenticated: false });
  }

  try {
    const decoded = jwt.verify(token, SECRET_KEY);
    res.json({ authenticated: true, user: decoded });
  } catch {
    res.status(401).json({ authenticated: false, error: "Invalid token" });
  }
});

• /todos/:id：根據(jù)提供的 ID 刪除待辦事項(xiàng)。

app.post("/logout", (req, res) => {
  res.clearCookie("sso_token");
  res.json({ message: "Logout successful" });
});

2. 主要應(yīng)用程序（React）

主應(yīng)用程序充當(dāng)服務(wù)提供商 (SP)，使用 API 并管理用戶交互。

下面是所提供代碼的結(jié)構(gòu)化細(xì)分，為您的關(guān)注者解釋了每個(gè)部分的目的。這是如何在主應(yīng)用程序?qū)又袑?shí)現(xiàn) SSO 功能的可靠示例。

• 應(yīng)用程序組件

App 組件管理用戶身份驗(yàn)證并根據(jù)登錄狀態(tài)進(jìn)行重定向。

app.get("/todos/:userId", (req, res) => {
  const ssoToken = req.cookies.sso_token;
  const user = getUser(ssoToken);

  if (!user) {
    return res.status(401).json({ error: "Unauthorized" });
  }

  const userTodos = todos.filter((todo) => todo.userId === user.id);
  res.json(userTodos);
});

• 登錄組件

登錄組件處理用戶登錄并在身份驗(yàn)證成功后重定向到 Todos 頁(yè)面。

app.post("/todos", (req, res) => {
  const ssoToken = req.cookies.sso_token;
  const user = getUser(ssoToken);

  if (!user) {
    return res.status(401).json({ error: "Unauthorized" });
  }

  const { title, description } = req.body;
  const newTodo = {
    id: faker.string.uuid(),
    userId: user.id,
    title,
    description,
  };

  todos.push(newTodo);
  res.status(201).json({ message: "Todo added successfully", data: newTodo });
});

• 待辦事項(xiàng)組件

Todos 組件顯示用戶特定的待辦事項(xiàng)并允許添加和刪除待辦事項(xiàng)。

// Update a todo
app.put("/todos/:id", (req, res) => {
  const ssotoken = req.cookies.sso_token;
  const user = getUser(ssotoken);
  if (!user) {
    return res.status(401).json({ message: "Unauthorized" });
  }

  const { id } = req.params;
  const { title, description } = req.body;
  const index = todos.findIndex((todo) => todo.id === id);

  if (index !== -1) {
    todos[index] = {
      ...todos[index],
      title,
      description,
    };
    res.json({
      message: "Todo updated successfully",
      data: todos[index],
    });
  } else {
    res.status(404).json({ message: "Todo not found" });
  }
});

3. 外部應(yīng)用程序（React）

外部應(yīng)用程序充當(dāng)另一個(gè)服務(wù)提供商 (SP)，使用 API 并管理用戶交互。

下面是所提供代碼的結(jié)構(gòu)化細(xì)分，為您的關(guān)注者解釋了每個(gè)部分的目的。這是如何在外部應(yīng)用程序?qū)訉?shí)現(xiàn) SSO 功能的可靠示例。

• 應(yīng)用程序組件

App 組件管理用戶身份驗(yàn)證并根據(jù)登錄狀態(tài)進(jìn)行重定向。

// Delete a todo
app.delete("/todos/:id", (req, res) => {
  const ssoToken = req.cookies.sso_token;
  const user = getUser(ssoToken);
  if (!user) {
    return res.status(401).json({ message: "Unauthorized" });
  }

  const { id } = req.params;
  const index = todos.findIndex((todo) => todo.id === id);

  if (index !== -1) {
    todos = todos.filter((todo) => todo.id !== id);
    res.json({ message: "Todo deleted successfully" });
  } else {
    res.status(404).json({ message: "Todo not found" });
  }
});

• 待辦事項(xiàng)組件

Todos 組件顯示用戶特定的待辦事項(xiàng)。

import { useState, useEffect } from "react";
import {
  Navigate,
  Route,
  Routes,
  useNavigate,
  useSearchParams,
} from "react-router-dom";
import Todos from "./components/Todos";
import Login from "./components/Login";
import { toast } from "react-toastify";
import api from "./api";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  useEffect(() => {
    const verifyLogin = async () => {
      const returnUrl = searchParams.get("returnUrl");
      try {
        const response = await api.get("/verify", {
          withCredentials: true,
        });
        if (response.data.authenticated) {
          setIsLoggedIn(true);
          toast.success("You are logged in.");
          navigate("/todos");
        } else {
          setIsLoggedIn(false);
          if (!returnUrl) {
            toast.error("You are not logged in.");
          }
        }
      } catch (error) {
        setIsLoggedIn(false);
        console.error("Verification failed:", error);
      }
    };

    verifyLogin();

    const handleVisibilityChange = () => {
      if (document.visibilityState === "visible") {
        verifyLogin();
      }
    };

    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, [navigate, searchParams]);

  return (
    <div className="container p-4 mx-auto">
      <Routes>
        <Route path="/" element={<Login />} />
        <Route
          path="/todos"
          element={isLoggedIn ? <Todos /> : <Navigate to={"/"} />}
        />
      </Routes>
    </div>
  );
}

export default App;

結(jié)論

單點(diǎn)登錄 (SSO) 簡(jiǎn)化了跨多個(gè)應(yīng)用程序的用戶身份驗(yàn)證和訪問(wèn)管理，從而增強(qiáng)了用戶體驗(yàn)、安全性和運(yùn)營(yíng)效率。通過(guò)集中身份驗(yàn)證并利用基于安全令牌的機(jī)制，組織可以簡(jiǎn)化用戶訪問(wèn)、降低與密碼相關(guān)的風(fēng)險(xiǎn)并提高合規(guī)性和審核能力。

雖然 SSO 提供了眾多好處，但它也帶來(lái)了挑戰(zhàn)，例如單點(diǎn)故障、復(fù)雜的實(shí)施要求、安全風(fēng)險(xiǎn)和潛在的供應(yīng)商鎖定。組織必須仔細(xì)規(guī)劃和實(shí)施 SSO 解決方案，以減輕這些風(fēng)險(xiǎn)并最大限度地發(fā)揮集中式身份驗(yàn)證的優(yōu)勢(shì)。

通過(guò)遵循最佳實(shí)踐、利用既定協(xié)議并選擇開(kāi)放標(biāo)準(zhǔn)，組織可以成功實(shí)施 SSO，以增強(qiáng)其應(yīng)用程序和系統(tǒng)的用戶體驗(yàn)、安全性和運(yùn)營(yíng)效率。

以上是單點(diǎn)登錄 (SSO)：React 和 ExpressJS 綜合指南的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！