單一登入 (SSO) 是一種身份驗(yàn)證機(jī)制，允許使用者登入一次並存取多個(gè)連接的應(yīng)用程式或系統(tǒng)，而無(wú)需對(duì)每個(gè)應(yīng)用程式或系統(tǒng)進(jìn)行重新驗(yàn)證。 SSO 將使用者驗(yàn)證集中到單一受信任的系統(tǒng)（通常稱為身分提供者或IdP）中，然後該系統(tǒng)管理憑證並頒發(fā)令牌或會(huì)話資料以跨其他服務(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)的範(fàn)例應(yīng)用程式（反應(yīng)）。透過(guò)了解 SSO 的原理和實(shí)踐，組織可以增強(qiáng)其應(yīng)用程式和系統(tǒng)的使用者體驗(yàn)、安全性和營(yíng)運(yùn)效率。

目錄

單一登入 (SSO)
• SSO 如何運(yùn)作？
  SSO 的好處
  SSO 的缺點(diǎn)
  SSO 用例
  SSO 實(shí)作範(fàn)例
  1. API（有 Express 的 Node.js）
  2.主要應(yīng)用（React）
  3.外部應(yīng)用程式（React）
結(jié)論

連結(jié)

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

示範(fàn)影片

單一登入 (SSO)

單一登入 (SSO) 是一種身份驗(yàn)證機(jī)制，允許使用者登入一次即可存取多個(gè)連接的應(yīng)用程式或系統(tǒng)，而無(wú)需對(duì)每個(gè)應(yīng)用程式或系統(tǒng)進(jìn)行重新驗(yàn)證。

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

單一登入如何運(yùn)作？

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

• 使用者登入：使用者在身分識(shí)別提供者 (IdP) 中輸入其憑證。

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

• 服務(wù)存?。毫钆苽鬟f給服務(wù)供應(yīng)商，服務(wù)提供者對(duì)其進(jìn)行驗(yàn)證並授予存取權(quán)限，而無(wú)需進(jìn)一步登入。

單一登入的好處

• 增強(qiáng)的使用者體驗(yàn)：使用者只需一次登入即可存取多項(xiàng)服務(wù)，減少摩擦並提高可用性。

• 提高安全性：

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

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

  • 管理員可以更輕鬆地管理跨連接應(yīng)用程式的使用者存取權(quán)。
  • 從 IdP 撤銷對(duì)使用者的存取權(quán)限會(huì)停用他們對(duì)所有整合系統(tǒng)的存取權(quán)。

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

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

• 合規(guī)與審核：

  • 集中式身份驗(yàn)證和存取控制使執(zhí)行安全性策略和追蹤使用者活動(dòng)變得更加容易。

單一登入的缺點(diǎn)

• 單點(diǎn)故障：

  • 如果 IdP 不可用或受到威脅，使用者將無(wú)法存取任何連接的系統(tǒng)。
  • 緩解措施：使用冗餘 IdP 並確保高可用性。

• 複雜的實(shí)作：

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

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

  • 如果攻擊者獲得使用者 SSO 憑證的存取權(quán)限，他們就有可能存取所有連接的系統(tǒng)。
  • 緩解措施：實(shí)施強(qiáng)大的 MFA 並監(jiān)控可疑的登入活動(dòng)。

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

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

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

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

SSO 用例

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

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

• 雲(yún)端服務(wù)：

  • 使用者可以在雲(yún)端應(yīng)用之間無(wú)縫切換，無(wú)需重複登入。
  • 提高生產(chǎn)力和使用者體驗(yàn)。

• 客戶入口網(wǎng)站：

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

• 合作夥伴整合：

  • 促進(jìn)對(duì)合作夥伴組織之間共享資源的安全存取。
  • 簡(jiǎn)化協(xié)作和資料交換。

SSO 實(shí)施範(fàn)例

1. API（Node.js 和 Express）

API 充當(dāng)身分提供者 (IdP)。它對(duì)使用者進(jìn)行身份驗(yàn)證並頒發(fā) JWT 令牌進(jìn)行存取。

以下是所提供程式碼的結(jié)構(gòu)化細(xì)分，為您的追蹤者解釋了每個(gè)部分的目的。這是如何在 API 層實(shí)現(xiàn) SSO 功能的可靠範(fàn)例。

設(shè)定和依賴關(guān)係

此設(shè)定中使用了以下軟體包：

• express：用於處理 HTTP 請(qǐng)求和路由。
• jsonwebtoken：用於產(chǎn)生和驗(yàn)證 JWT。
• cors：用於處理來(lái)自不同客戶端應(yīng)用程式的跨來(lái)源請(qǐng)求。
• @faker-js/faker：用於產(chǎn)生模擬使用者和待辦事項(xiàng)資料。
• cookie-parser：用於解析請(qǐng)求中傳送的cookie。
• dotenv：用於安全地載入環(huán)境變數(shù)。

配置

• 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 解析客戶端傳送的 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)證和令牌生成

模擬資料模擬使用者及其關(guān)聯(lián)的待辦事項(xiàng)。

使用者擁有角色（管理員或使用者）和基本個(gè)人資料資訊。
待辦事項(xiàng)連結(jié)到使用者 ID 以進(jìn)行個(gè)人化存取。

• /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)安全地登出。

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 並管理使用者互動(dòng)。

以下是所提供程式碼的結(jié)構(gòu)化細(xì)分，為您的追蹤者解釋了每個(gè)部分的目的。這是如何在主應(yīng)用程式層中實(shí)現(xiàn) SSO 功能的可靠範(fàn)例。

• 應(yīng)用程式元件

App 元件管理使用者驗(yàn)證並根據(jù)登入狀態(tài)進(jìn)行重新導(dǎo)向。

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 並管理使用者互動(dòng)。

以下是所提供程式碼的結(jié)構(gòu)化細(xì)分，為您的追蹤者解釋了每個(gè)部分的目的。這是如何在外部應(yīng)用程式層實(shí)現(xiàn) SSO 功能的可靠範(fàn)例。

• 應(yīng)用程式元件

App 元件管理使用者驗(yàn)證並根據(jù)登入狀態(tài)進(jìn)行重新導(dǎo)向。

// 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é)論

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

雖然 SSO 提供了眾多好處，但它也帶來(lái)了挑戰(zhàn)，例如單點(diǎn)故障、複雜的實(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íng)運(yùn)效率。

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