SSO(Single Sign-On)는 사용자가 한 번 로그인하면 각각을 재인증할 필요 없이 연결된 여러 애플리케이션이나 시스템에 액세스할 수 있게 해주는 인증 메커니즘입니다. SSO는 사용자 인증을 신뢰할 수 있는 단일 시스템(종종 아이덴티티 공급자 또는 IdP라고 함)으로 중앙 집중화합니다. 그런 다음 이 시스템은 자격 증명을 관리하고 토큰 또는 세션 데이터를 발행하여 다른 서비스(서비스 공급자 또는 SP라고 함)에서 사용자의 신원을 확인합니다.
이 가이드에서는 SSO의 작동 방식, 장점과 단점, 일반적인 사용 사례, API(Express가 포함된 Node.js), 기본 애플리케이션(React) 및 외부 애플리케이션에서 SSO 구현의 예를 살펴보겠습니다. 애플리케이션(반응). SSO의 원칙과 관행을 이해함으로써 조직은 애플리케이션과 시스템 전반에 걸쳐 사용자 경험, 보안 및 운영 효율성을 향상시킬 수 있습니다.
SSO(Single Sign-On)는 사용자가 한 번 로그인하면 각각을 재인증할 필요 없이 연결된 여러 애플리케이션이나 시스템에 액세스할 수 있는 인증 메커니즘입니다.
SSO는 사용자 인증을 신뢰할 수 있는 단일 시스템(종종 아이덴티티 공급자 또는 IdP라고 함)으로 중앙 집중화합니다. 그런 다음 이 시스템은 자격 증명을 관리하고 토큰 또는 세션 데이터를 발행하여 다른 서비스(서비스 공급자 또는 SP라고 함)에서 사용자의 신원을 확인합니다. ).
SSO는 OAuth 2.0, OIDC(OpenID Connect) 또는 SAML(Security Assertion Markup Language)과 같은 보안 토큰 기반 메커니즘을 통해 작동합니다. 단순화된 흐름은 다음과 같습니다.
사용자 로그인: 사용자는 IdP(ID 공급자)에 자격 증명을 입력합니다.
토큰 발급: IdP는 자격 증명을 검증하고 인증 토큰(예: JWT 또는 SAML 어설션)을 발급합니다.
서비스 액세스: 토큰은 서비스 제공업체에 전달되어 서비스 제공업체에서 이를 검증하고 추가 로그인 없이 액세스 권한을 부여합니다.
향상된 사용자 경험: 사용자는 한 번의 로그인으로 여러 서비스에 액세스할 수 있어 마찰이 줄어들고 사용성이 향상됩니다.
향상된 보안:
단순화된 사용자 관리:
시간 및 비용 효율성:
규정 준수 및 감사:
단일 실패 지점:
복잡한 구현:
보안 위험:
공급업체 종속:
토큰 관리 과제:
엔터프라이즈 애플리케이션:
클라우드 서비스:
고객 포털:
파트너 통합:
API는 IdP(ID 제공자) 역할을 합니다. 사용자를 인증하고 액세스를 위해 JWT 토큰을 발급합니다.
다음은 팔로어를 위한 각 섹션의 목적을 설명하는 제공된 코드의 구조화된 분석입니다. 이는 API 계층에서 SSO 기능을 구현하는 방법에 대한 강력한 예입니다.
이 설정에는 다음 패키지가 사용됩니다.
dotenv.config(); const SECRET_KEY = process.env.SECRET_KEY || "secret";
app.use(
cors({
origin: ["http://localhost:5173", "http://localhost:5174"],
credentials: true,
})
);
app.use(express.json());
app.use(cookieParser());
모의 데이터는 사용자 및 사용자와 관련된 할 일을 시뮬레이션합니다.
사용자에게는 역할(관리자 또는 사용자)과 기본 프로필 정보가 있습니다.
Todos는 개인화된 액세스를 위해 사용자 ID에 연결됩니다.
사용자는 로그인에 성공하면 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" });
}
});
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" });
}
});
토큰을 삭제하여 사용자가 안전하게 로그아웃할 수 있도록 보장합니다.
dotenv.config(); const SECRET_KEY = process.env.SECRET_KEY || "secret";
app.use(
cors({
origin: ["http://localhost:5173", "http://localhost:5174"],
credentials: true,
})
);
app.use(express.json());
app.use(cookieParser());
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" });
}
});
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" });
}
});
app.post("/logout", (req, res) => {
res.clearCookie("sso_token");
res.json({ message: "Logout successful" });
});
메인 애플리케이션은 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 구성 요소는 사용자별 할 일을 표시하고 할 일을 추가 및 삭제할 수 있습니다.
// 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" });
}
});
외부 애플리케이션은 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 구성 요소는 사용자별 할 일을 표시합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
