シングル サインオン (SSO) は、ユーザーが一度ログインすると、接続されている複數(shù)のアプリケーションやシステムにそれぞれ再認証することなくアクセスできるようにする認証メカニズムです。 SSO は、ユーザー認証を単一の信頼できるシステム (アイデンティティ プロバイダー (IdP) と呼ばれることが多い) に集中させ、そのシステムが資格情報を管理し、トークンまたはセッション データを発行して、他のサービス (サービス プロバイダー (SP) と呼ばれる) 間でユーザーの ID を検証します。

このガイドでは、SSO の仕組み、その利點と欠點、一般的な使用例、API (Express を使用した Node.js)、メイン アプリケーション (React)、および外部アプリケーションでの SSO 実裝の例について説明します。アプリケーション（React）。 SSO の原則と実踐を理解することで、組織はアプリケーションとシステム全體のユーザー エクスペリエンス、セキュリティ、運用効率を向上させることができます。

目次

• シングル サインオン (SSO)
  • SSO はどのように機能しますか?
  • SSO の利點
  • SSO の欠點
  • SSO の使用例
  • SSO 実裝例
  • 1. API (Express を使用した Node.js)
  • 2.メインアプリケーション (React)
  • 3.外部アプリケーション (React)
• 結(jié)論

リンク

• GitHub リポジトリ

デモビデオ

シングル サインオン (SSO)

シングル サインオン (SSO) は、ユーザーが一度ログインすると、接続されている複數(shù)のアプリケーションやシステムにそれぞれ再認証することなくアクセスできるようにする認証メカニズムです。

SSO は、ユーザー認証を単一の信頼できるシステム (アイデンティティ プロバイダー (IdP) と呼ばれることが多い) に集中させ、そのシステムが認証情報を管理し、トークンまたはセッション データを発行して、他のサービス (サービス プロバイダー (SP) と呼ばれる) 全體でユーザーの ID を検証します。 ).

SSO はどのように機能しますか?

SSO は、OAuth 2.0、OpenID Connect (OIDC)、または Security Assertion Markup Language (SAML) などの安全なトークンベースのメカニズムを通じて動作します。簡略化されたフローは次のとおりです:

• ユーザー ログイン: ユーザーはアイデンティティ プロバイダー (IdP) に資格情報を入力します。

• トークン発行: IdP は資格情報を検証し、認証トークン (JWT または SAML アサーションなど) を発行します。

• サービス アクセス: トークンはサービス プロバイダーに渡され、サービス プロバイダーがそれを検証し、追加のログインを必要とせずにアクセスを許可します。

SSO の利點

• ユーザー エクスペリエンスの強化: ユーザーは 1 回のログインで複數(shù)のサービスにアクセスできるため、煩雑さが軽減され、使いやすさが向上します。

• セキュリティの向上:

  • パスワードの再利用などの安全でない行為につながる可能性のあるパスワード疲労を軽減します。
  • 一元化された認証により、より強力なパスワード ポリシーと多要素認証 (MFA) の強制が可能になります。

• 簡素化されたユーザー管理:

  • 管理者は、接続されているアプリケーション全體でのユーザー アクセスを管理しやすくなります。
  • IdP からユーザーへのアクセスを取り消すと、すべての統(tǒng)合システムへのアクセスが無効になります。

• 時間とコストの効率:

  • ログイン関連のヘルプデスクへのリクエストを減らすことで、ユーザーとサポートチームの時間を節(jié)約します。
  • 既存の認証メカニズムを活用することで、開発時間とコストを削減します。

• コンプライアンスと監(jiān)査:

  • 一元化された認証とアクセス制御により、セキュリティ ポリシーの適用とユーザー アクティビティの追跡が容易になります。

SSO の欠點

• 単一障害點:

  • IdP が利用できないか侵害されている場合、ユーザーは接続されているシステムにアクセスできません。
  • 軽減策: 冗長 IdP を使用し、高可用性を確保します。

• 複雑な実裝:

  • SSO の統(tǒng)合には、特に多様なアプリケーションやプロトコルが存在する環(huán)境では、重要な計畫と専門知識が必要です。
  • 軽減策: OAuth 2.0 や SAML などの確立されたプロトコルと堅牢な SSO ライブラリを活用します。

• セキュリティリスク:

  • 攻撃者がユーザーの SSO 認証情報にアクセスすると、接続されているすべてのシステムにアクセスできる可能性があります。
  • 軽減策: 強力な MFA を適用し、不審なログイン アクティビティを監(jiān)視します。

• ベンダーロックイン:

  • 組織は特定の IdP ベンダーに大きく依存している場合があり、移行が困難になります。
  • 緩和策: オープンスタンダードを選択し、獨自のソリューションを避けてください。

• トークン管理の課題:

  • トークンの有効期限が切れたり盜まれたりすると、アクセスが中斷されたり、セキュリティ上の脆弱性が生じたりする可能性があります。
  • 緩和策: トークンの有効期限、更新メカニズム、安全なトークン ストレージを?qū)g裝します。

SSO の使用例

• エンタープライズ アプリケーション:

  • 従業(yè)員は 1 回のログインでさまざまな社內(nèi)ツールやサービスにアクセスできます。
  • オンボーディングおよびオフボーディングのプロセスを簡素化します。

• クラウド サービス:

  • ユーザーはログインを繰り返すことなく、クラウド アプリケーションをシームレスに切り替えることができます。
  • 生産性とユーザー エクスペリエンスを向上させます。

• カスタマーポータル:

  • さまざまなサービスにわたる顧客に統(tǒng)一されたログイン エクスペリエンスを提供します。
  • パーソナライゼーションとターゲットを絞ったマーケティングを可能にします。

• パートナー統(tǒng)合:

  • パートナー組織間の共有リソースへの安全なアクセスを容易にします。
  • コラボレーションとデータ交換を合理化します。

SSOの実裝例

1. API (Express を使用した Node.js)

API はアイデンティティ プロバイダー (IdP) として機能します。ユーザーを認証し、アクセス用の JWT トークンを発行します。

以下は、提供されたコードの構(gòu)造化された內(nèi)訳であり、フォロワー向けに各セクションの目的を説明しています。これは、API レイヤーに SSO 機能を?qū)g裝する方法の確実な例として機能します。

セットアップと依存関係

このセットアップでは次のパッケージが使用されます:

• express: HTTP リクエストとルーティングの処理用。
• jsonwebtoken: JWT の生成と検証用。
• cors: 異なるクライアント アプリケーションからのクロスオリジン リクエストを処理します。
• @faker-js/faker: 模擬ユーザーと Todo データの生成用。
• cookie-parser: リクエストで送信された Cookie を解析します。
• dotenv: 環(huán)境変數(shù)を安全にロードするため。

構(gòu)成

• dotenv は秘密鍵を安全に管理するために使用されます。
• 開発環(huán)境にはフォールバック シークレットが提供されます。

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

ミドルウェア

• CORS は、特定のフロントエンドオリジン (メインおよび外部アプリ) からのリクエストが確実に許可されるようにします。
• cookieParser はクライアントから送信された Cookie を解析します。
• express.json では、JSON リクエスト本文の解析が可能です。

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

ユーザー認証とトークン生成

モック データは、ユーザーとユーザーに関連付けられた ToDo をシミュレートします。

ユーザーにはロール (管理者またはユーザー) と基本的なプロフィール情報があります。
Todo はユーザー ID にリンクされており、パーソナライズされたアクセスが可能です。

• /login: 電子メールとパスワードに基づいてユーザーを認証します。

ユーザーはログインに成功すると、JWT を含む Cookie (sso_token) を受け取ります。
このトークンは安全で、HTTP 専用であり、改ざんを防ぐために期間が制限されています。

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: トークンをデコードしてユーザーの ID を検証します。無効なトークンを使用すると、不正な応答が返されます。

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 をクリアします。

トークンをクリアすることで、ユーザーが安全にログアウトできるようにします。

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

• /todos: 認証されたユーザーに関連付けられた todos を取得します。

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

• /todos: 認証されたユーザーの新しい todo を追加します。

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: 指定された ID に基づいて todo を更新します。

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: 指定された ID に基づいて todo を削除します。

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

2. メインアプリケーション（React）

メイン アプリケーションは、API を使用してユーザー インタラクションを管理するサービス プロバイダー (SP) として機能します。

以下は、提供されたコードの構(gòu)造化された內(nèi)訳であり、フォロワー向けに各セクションの目的を説明しています。これは、メイン アプリケーション層に SSO 機能を?qū)g裝する方法の確実な例として機能します。

• アプリコンポーネント

アプリ コンポーネントはユーザー認証を管理し、ログイン ステータスに基づいてリダイレクトします。

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);
});

• ログインコンポーネント

ログイン コンポーネントはユーザーのログインを処理し、認証が成功すると Todos ページにリダイレクトします。

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 });
});

• Todos コンポーネント

Todos コンポーネントはユーザー固有の Todo を表示し、Todo の追加と削除を可能にします。

// 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. 外部アプリケーション（React）

外部アプリケーションは、API を使用してユーザー操作を管理する別のサービス プロバイダー (SP) として機能します。

以下は、提供されたコードの構(gòu)造化された內(nèi)訳であり、フォロワー向けに各セクションの目的を説明しています。これは、外部アプリケーション層に SSO 機能を?qū)g裝する方法の確実な例として機能します。

• アプリコンポーネント

アプリ コンポーネントはユーザー認証を管理し、ログイン ステータスに基づいてリダイレクトします。

// 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" });
  }
});

• Todos コンポーネント

Todos コンポーネントには、ユーザー固有の Todo が表示されます。

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) は、複數(shù)のアプリケーションにわたるユーザー認証とアクセス管理を簡素化し、ユーザー エクスペリエンス、セキュリティ、運用効率を向上させます。認証を一元化し、安全なトークンベースのメカニズムを活用することで、組織はユーザー アクセスを合理化し、パスワード関連のリスクを軽減し、コンプライアンスと監(jiān)査機能を向上させることができます。

SSO には多くの利點がありますが、単一障害點、複雑な実裝要件、セキュリティ リスク、潛在的なベンダー ロックインなどの課題も存在します。組織は、これらのリスクを軽減し、集中認証の利點を最大化するために、SSO ソリューションを慎重に計畫して実裝する必要があります。

ベスト プラクティスに従い、確立されたプロトコルを活用し、オープン スタンダードを選択することで、組織は SSO を適切に実裝して、アプリケーションとシステム全體のユーザー エクスペリエンス、セキュリティ、運用効率を向上させることができます。

以上がシングル サインオン (SSO): React と ExpressJS の包括的なガイドの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。