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 ??? ????? ?? ?? ??? ?????!