SSO(Single Sign-On): React 및 ExpressJS에 대한 종합 가이드

SSO(Single Sign-On)는 사용자가 한 번 로그인하면 각각을 재인증할 필요 없이 연결된 여러 애플리케이션이나 시스템에 액세스할 수 있게 해주는 인증 메커니즘입니다. SSO는 사용자 인증을 신뢰할 수 있는 단일 시스템(종종 아이덴티티 공급자 또는 IdP라고 함)으로 중앙 집중화합니다. 그런 다음 이 시스템은 자격 증명을 관리하고 토큰 또는 세션 데이터를 발행하여 다른 서비스(서비스 공급자 또는 SP라고 함)에서 사용자의 신원을 확인합니다.

이 가이드에서는 SSO의 작동 방식, 장점과 단점, 일반적인 사용 사례, API(Express가 포함된 Node.js), 기본 애플리케이션(React) 및 외부 애플리케이션에서 SSO 구현의 예를 살펴보겠습니다. 애플리케이션(반응). SSO의 원칙과 관행을 이해함으로써 조직은 애플리케이션과 시스템 전반에 걸쳐 사용자 경험, 보안 및 운영 효율성을 향상시킬 수 있습니다.

목차

• 싱글 사인온(SSO)
  • SSO는 어떻게 작동하나요?
  • SSO의 장점
  • SSO의 단점
  • SSO 사용 사례
  • SSO 구현 사례
  • 1. API(Express가 포함된 Node.js)
  • 2. 주요 애플리케이션(React)
  • 3. 외부 애플리케이션(React)
• 결론

모래밭

• GitHub 저장소

데모 비디오

싱글 사인온(SSO)

SSO(Single Sign-On)는 사용자가 한 번 로그인하면 각각을 재인증할 필요 없이 연결된 여러 애플리케이션이나 시스템에 액세스할 수 있는 인증 메커니즘입니다.

SSO는 사용자 인증을 신뢰할 수 있는 단일 시스템(종종 아이덴티티 공급자 또는 IdP라고 함)으로 중앙 집중화합니다. 그런 다음 이 시스템은 자격 증명을 관리하고 토큰 또는 세션 데이터를 발행하여 다른 서비스(서비스 공급자 또는 SP라고 함)에서 사용자의 신원을 확인합니다. ).

SSO는 어떻게 작동하나요?

SSO는 OAuth 2.0, OIDC(OpenID Connect) 또는 SAML(Security Assertion Markup Language)과 같은 보안 토큰 기반 메커니즘을 통해 작동합니다. 단순화된 흐름은 다음과 같습니다.

• 사용자 로그인: 사용자는 IdP(ID 공급자)에 자격 증명을 입력합니다.

• 토큰 발급: IdP는 자격 증명을 검증하고 인증 토큰(예: JWT 또는 SAML 어설션)을 발급합니다.

• 서비스 액세스: 토큰은 서비스 제공업체에 전달되어 서비스 제공업체에서 이를 검증하고 추가 로그인 없이 액세스 권한을 부여합니다.

SSO의 이점

• 향상된 사용자 경험: 사용자는 한 번의 로그인으로 여러 서비스에 액세스할 수 있어 마찰이 줄어들고 사용성이 향상됩니다.

• 향상된 보안:

  • 비밀번호 재사용과 같은 안전하지 않은 관행으로 이어질 수 있는 비밀번호 피로를 줄입니다.
  • 중앙 집중식 인증을 통해 더욱 강력한 비밀번호 정책과 다단계 인증(MFA) 시행이 가능합니다.

• 단순화된 사용자 관리:

  • 관리자가 연결된 애플리케이션 전체에서 사용자 액세스를 더 쉽게 관리할 수 있습니다.
  • IdP에서 사용자의 액세스 권한을 취소하면 모든 통합 시스템에 대한 액세스가 비활성화됩니다.

• 시간 및 비용 효율성:

  • 로그인 관련 헬프 데스크 요청을 줄여 사용자와 지원 팀의 시간을 절약합니다.
  • 기존 인증 메커니즘을 활용하여 개발 시간과 비용을 절감합니다.

• 규정 준수 및 감사:

  • 중앙 집중식 인증 및 액세스 제어를 통해 보다 쉽게 ​​보안 정책을 시행하고 사용자 활동을 추적할 수 있습니다.

SSO의 단점

• 단일 실패 지점:

  • IdP를 사용할 수 없거나 손상된 경우 사용자는 연결된 시스템에 액세스할 수 없습니다.
  • 완화: 중복 IdP를 사용하고 고가용성을 보장합니다.

• 복잡한 구현:

  • SSO를 통합하려면 특히 다양한 애플리케이션과 프로토콜이 있는 환경에서 상당한 계획과 전문 지식이 필요합니다.
  • 완화: OAuth 2.0 또는 SAML과 같은 확립된 프로토콜과 강력한 SSO 라이브러리를 활용하세요.

• 보안 위험:

  • 공격자가 사용자의 SSO 자격 증명에 대한 액세스 권한을 얻으면 잠재적으로 연결된 모든 시스템에 액세스할 수 있습니다.
  • 완화: 강력한 MFA를 시행하고 의심스러운 로그인 활동을 모니터링합니다.

• 공급업체 종속:

  • 조직은 특정 IdP 공급업체에 크게 의존하므로 마이그레이션이 어려울 수 있습니다.
  • 완화: 개방형 표준을 선택하고 독점 솔루션을 피하세요.

• 토큰 관리 과제:

  • 만료되거나 도난당한 토큰은 액세스를 방해하거나 보안 취약성을 야기할 수 있습니다.
  • 완화: 토큰 만료, 새로 고침 메커니즘 및 보안 토큰 저장을 구현합니다.

SSO 사용 사례

• 엔터프라이즈 애플리케이션:

  • 직원은 한 번의 로그인으로 다양한 내부 도구와 서비스에 액세스할 수 있습니다.
  • 온보딩 및 오프보딩 프로세스를 단순화합니다.

• 클라우드 서비스:

  • 사용자는 반복적인 로그인 없이 클라우드 애플리케이션 간에 원활하게 전환할 수 있습니다.
  • 생산성과 사용자 경험을 향상합니다.

• 고객 포털:

  • 다양한 서비스 전반에 걸쳐 고객에게 통합된 로그인 환경을 제공합니다.
  • 개인화 및 타겟 마케팅이 가능합니다.

• 파트너 통합:

  • 파트너 조직 간의 공유 리소스에 대한 안전한 액세스를 촉진합니다.
  • 협업 및 데이터 교환을 간소화합니다.

SSO 구현 예

1. API(Express를 사용한 Node.js)

API는 IdP(ID 제공자) 역할을 합니다. 사용자를 인증하고 액세스를 위해 JWT 토큰을 발급합니다.

다음은 팔로어를 위한 각 섹션의 목적을 설명하는 제공된 코드의 구조화된 분석입니다. 이는 API 계층에서 SSO 기능을 구현하는 방법에 대한 강력한 예입니다.

설정 및 종속성

이 설정에는 다음 패키지가 사용됩니다.

• express: HTTP 요청 처리 및 라우팅용.
• jsonwebtoken: JWT 생성 및 확인용.
• cors: 다양한 클라이언트 애플리케이션의 교차 출처 요청을 처리합니다.
• @faker-js/faker: 모의 사용자 및 할일 데이터 생성용.
• cookie-parser: 요청으로 전송된 쿠키를 구문 분석하는 데 사용됩니다.
• dotenv: 환경 변수를 안전하게 로드합니다.

구성

• 비밀키를 안전하게 관리하기 위해 dotenv를 사용합니다.
• 개발 환경을 위한 대체 비밀번호가 제공됩니다.

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

미들웨어

• CORS는 특정 프런트엔드 원본(기본 및 외부 앱)의 요청이 허용되도록 보장합니다.
• cookieParser는 클라이언트가 보낸 쿠키를 구문 분석합니다.
• express.json을 사용하면 JSON 요청 본문을 구문 분석할 수 있습니다.

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

사용자 인증 및 토큰 생성

모의 데이터는 사용자 및 사용자와 관련된 할 일을 시뮬레이션합니다.

사용자에게는 역할(관리자 또는 사용자)과 기본 프로필 정보가 있습니다.
Todos는 개인화된 액세스를 위해 사용자 ID에 연결됩니다.

• /login : 이메일과 비밀번호를 기반으로 사용자를 인증합니다.

사용자는 로그인에 성공하면 JWT가 포함된 쿠키(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: 토큰을 디코딩하여 사용자의 신원을 확인합니다. 잘못된 토큰으로 인해 승인되지 않은 응답이 발생합니다.

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 토큰이 포함된 쿠키를 지웁니다.

토큰을 삭제하여 사용자가 안전하게 로그아웃할 수 있도록 보장합니다.

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

• /todos: 인증된 사용자와 관련된 할 일을 검색합니다.

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

• /todos: 인증된 사용자에게 새로운 할일을 추가합니다.

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를 기반으로 할 일을 업데이트합니다.

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를 기반으로 할 일을 삭제합니다.

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

2. 주요 애플리케이션(React)

메인 애플리케이션은 API를 사용하고 사용자 상호작용을 관리하는 서비스 제공자(SP) 역할을 합니다.

다음은 팔로어를 위한 각 섹션의 목적을 설명하는 제공된 코드의 구조화된 분석입니다. 이는 기본 애플리케이션 계층에서 SSO 기능을 구현하는 방법에 대한 강력한 예입니다.

• 앱 구성요소

App 구성 요소는 로그인 상태에 따라 사용자 인증 및 리디렉션을 관리합니다.

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 구성 요소는 사용자별 할 일을 표시하고 할 일을 추가 및 삭제할 수 있습니다.

// 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) 역할을 합니다.

다음은 팔로어를 위한 각 섹션의 목적을 설명하는 제공된 코드의 구조화된 분석입니다. 이는 외부 애플리케이션 계층에서 SSO 기능을 구현하는 방법에 대한 강력한 예입니다.

• 앱 구성요소

App 구성 요소는 로그인 상태에 따라 사용자 인증 및 리디렉션을 관리합니다.

// 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 구성 요소는 사용자별 할 일을 표시합니다.

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;

결론

SSO(Single Sign-On)는 여러 애플리케이션 전반에 걸쳐 사용자 인증 및 액세스 관리를 단순화하여 사용자 경험, 보안 및 운영 효율성을 향상시킵니다. 인증을 중앙 집중화하고 보안 토큰 기반 메커니즘을 활용함으로써 조직은 사용자 액세스를 간소화하고 비밀번호 관련 위험을 줄이며 규정 준수 및 감사 기능을 향상시킬 수 있습니다.

SSO는 수많은 이점을 제공하지만 단일 실패 지점, 복잡한 구현 요구 사항, 보안 위험, 잠재적인 공급업체 종속과 같은 과제도 제시합니다. 조직은 이러한 위험을 완화하고 중앙 집중식 인증의 이점을 극대화하기 위해 SSO 솔루션을 신중하게 계획하고 구현해야 합니다.

모범 사례를 따르고, 확립된 프로토콜을 활용하고, 개방형 표준을 선택함으로써 조직은 SSO를 성공적으로 구현하여 애플리케이션과 시스템 전반에 걸쳐 사용자 경험, 보안 및 운영 효율성을 향상할 수 있습니다.

위 내용은 SSO(Single Sign-On): React 및 ExpressJS에 대한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!