Single Sign-On (SSO): Panduan Komprehensif dengan React dan ExpressJS

Single Sign-On (SSO) ialah mekanisme pengesahan yang membolehkan pengguna log masuk sekali dan mengakses berbilang aplikasi atau sistem yang disambungkan tanpa perlu mengesahkan semula untuk setiap satu. SSO memusatkan pengesahan pengguna ke dalam sistem tunggal yang dipercayai (sering dipanggil Pembekal Identiti, atau IdP), yang kemudiannya mengurus bukti kelayakan dan mengeluarkan token atau data sesi untuk mengesahkan identiti pengguna merentas perkhidmatan lain (dikenali sebagai Pembekal Perkhidmatan atau SP).

Dalam panduan ini, kami akan meneroka cara SSO berfungsi, kebaikan dan keburukannya, kes penggunaan biasa dan contoh pelaksanaan SSO dalam API (Node.js dengan Express), aplikasi utama (React) dan luaran aplikasi (React). Dengan memahami prinsip dan amalan SSO, organisasi boleh meningkatkan pengalaman pengguna, keselamatan dan kecekapan operasi merentas aplikasi dan sistem mereka.

Jadual Kandungan

• Log Masuk Tunggal (SSO)
  • Bagaimana SSO Berfungsi?
  • Kebaikan SSO
  • Kelemahan SSO
  • Kes Penggunaan untuk SSO
  • Contoh Pelaksanaan SSO
  • 1. API (Node.js dengan Express)
  • 2. Aplikasi Utama (React)
  • 3. Aplikasi Luaran (React)
• Kesimpulan

Pautan

• Repositori GitHub

Video Demo

Log Masuk Tunggal (SSO)

Single Sign-On (SSO) ialah mekanisme pengesahan yang membolehkan pengguna log masuk sekali dan mendapat akses kepada berbilang aplikasi atau sistem yang disambungkan tanpa perlu mengesahkan semula untuk setiap satu.

SSO memusatkan pengesahan pengguna ke dalam satu sistem yang dipercayai (sering dipanggil Pembekal Identiti, atau IdP), yang kemudiannya mengurus bukti kelayakan dan mengeluarkan token atau data sesi untuk mengesahkan identiti pengguna merentas perkhidmatan lain (dikenali sebagai Pembekal Perkhidmatan atau SP ).

Bagaimana SSO Berfungsi?

SSO beroperasi melalui mekanisme berasaskan token selamat seperti OAuth 2.0, OpenID Connect (OIDC) atau Security Assertion Markup Language (SAML). Berikut ialah aliran yang dipermudahkan:

• Log Masuk Pengguna: Pengguna memasukkan bukti kelayakan mereka dalam Pembekal Identiti (IdP).

• Pengeluaran Token: IdP mengesahkan bukti kelayakan dan mengeluarkan token pengesahan (mis., pernyataan JWT atau SAML).

• Akses Perkhidmatan: Token diserahkan kepada Pembekal Perkhidmatan, yang mengesahkannya dan memberikan akses tanpa memerlukan log masuk selanjutnya.

Faedah SSO

• Pengalaman Pengguna yang Dipertingkat: Pengguna boleh mengakses berbilang perkhidmatan dengan satu log masuk, mengurangkan geseran dan meningkatkan kebolehgunaan.

• Keselamatan yang Dipertingkat:

  • Mengurangkan keletihan kata laluan, yang boleh membawa kepada amalan tidak selamat seperti penggunaan semula kata laluan.
  • Pengesahan berpusat membolehkan dasar kata laluan yang lebih kukuh dan penguatkuasaan pengesahan berbilang faktor (MFA).

• Pengurusan Pengguna Ringkas:

  • Lebih mudah untuk pentadbir mengurus akses pengguna merentas aplikasi yang disambungkan.
  • Membatalkan akses kepada pengguna daripada IdP melumpuhkan akses mereka kepada semua sistem bersepadu.

• Kecekapan Masa dan Kos:

  • Menjimatkan masa untuk pengguna dan pasukan sokongan dengan mengurangkan permintaan meja bantuan berkaitan log masuk.
  • Mengurangkan masa dan kos pembangunan dengan memanfaatkan mekanisme pengesahan sedia ada.

• Pematuhan dan Pengauditan:

  • Pengesahan berpusat dan kawalan akses memudahkan untuk menguatkuasakan dasar keselamatan dan menjejaki aktiviti pengguna.

Kelemahan SSO

• Satu Titik Kegagalan:

  • Jika IdP tidak tersedia atau terjejas, pengguna tidak boleh mengakses mana-mana sistem yang disambungkan.
  • Mitigasi: Gunakan IdP yang berlebihan dan pastikan ketersediaan yang tinggi.

• Pelaksanaan Kompleks:

  • Mengintegrasikan SSO memerlukan perancangan dan kepakaran yang ketara, terutamanya dalam persekitaran dengan aplikasi dan protokol yang pelbagai.
  • Mitigasi: Manfaatkan protokol yang telah ditetapkan seperti OAuth 2.0 atau SAML dan perpustakaan SSO yang teguh.

• Risiko Keselamatan:

  • Jika penyerang mendapat akses kepada bukti kelayakan SSO pengguna, mereka berpotensi mengakses semua sistem yang disambungkan.
  • Mitigasi: Kuatkuasakan MFA yang kukuh dan pantau aktiviti log masuk yang mencurigakan.

• Kunci Masuk Vendor:

  • Organisasi mungkin sangat bergantung pada vendor IdP tertentu, menjadikan penghijrahan mencabar.
  • Mitigasi: Pilih standard terbuka dan elakkan penyelesaian proprietari.

• Cabaran Pengurusan Token:

  • Token yang telah tamat tempoh atau dicuri boleh mengganggu akses atau mewujudkan kelemahan keselamatan.
  • Mitigasi: Laksanakan tamat tempoh token, mekanisme muat semula dan storan token selamat.

Use Cases untuk SSO

• Aplikasi Perusahaan:

  • Pekerja boleh mengakses pelbagai alatan dan perkhidmatan dalaman dengan satu log masuk.
  • Memudahkan proses onboarding dan offboarding.

• Perkhidmatan Awan:

  • Pengguna boleh bertukar dengan lancar antara aplikasi awan tanpa log masuk berulang.
  • Meningkatkan produktiviti dan pengalaman pengguna.

• Portal Pelanggan:

  • Menyediakan pengalaman log masuk bersatu untuk pelanggan merentas perkhidmatan yang berbeza.
  • Mendayakan pemperibadian dan pemasaran disasarkan.

• Integrasi Rakan Kongsi:

  • Memudahkan akses selamat kepada sumber yang dikongsi antara organisasi rakan kongsi.
  • Memperkemaskan kerjasama dan pertukaran data.

Contoh Pelaksanaan SSO

1. API (Node.js dengan Express)

API bertindak sebagai Pembekal Identiti (IdP). Ia mengesahkan pengguna dan mengeluarkan token JWT untuk akses.

Di bawah ialah pecahan berstruktur kod yang disediakan, menerangkan tujuan setiap bahagian untuk pengikut anda. Ini berfungsi sebagai contoh teguh tentang cara melaksanakan fungsi SSO dalam lapisan API.

Persediaan dan Ketergantungan

Pakej berikut digunakan dalam persediaan ini:

• ekspresi: Untuk mengendalikan permintaan HTTP dan penghalaan.
• jsonwebtoken: Untuk menjana dan mengesahkan JWT.
• kor: Untuk mengendalikan permintaan silang asal daripada aplikasi pelanggan yang berbeza.
• @faker-js/faker: Untuk menjana data pengguna olok-olok dan todo.
• penghuraikan kuki: Untuk menghuraikan kuki yang dihantar dalam permintaan.
• dotenv: Untuk memuatkan pembolehubah persekitaran dengan selamat.

Konfigurasi

• dotenv digunakan untuk mengurus kunci rahsia dengan selamat.
• Rahsia sandaran disediakan untuk persekitaran pembangunan.

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

Middleware

• CORS memastikan bahawa permintaan daripada asal bahagian hadapan tertentu (apl utama dan luaran) dibenarkan.
• cookieParser menghuraikan kuki yang dihantar oleh pelanggan.
• express.json membenarkan penghuraian badan permintaan JSON.

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

Pengesahan Pengguna dan Penjanaan Token

Data olok-olok mensimulasikan pengguna dan tugasan mereka yang berkaitan.

Pengguna mempunyai peranan (pentadbir atau pengguna) dan maklumat profil asas.
Todos dipautkan kepada ID pengguna untuk akses diperibadikan.

• /log masuk: Mengesahkan pengguna berdasarkan e-mel dan kata laluan.

Pengguna menerima kuki (sso_token) yang mengandungi JWT apabila berjaya log masuk.
Token ini selamat, HTTP sahaja dan terhad masa untuk mengelakkan gangguan.

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: Mengesahkan identiti pengguna dengan menyahkod token. Token tidak sah mengakibatkan respons yang tidak dibenarkan.

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: Kosongkan kuki yang mengandungi token JWT.

Memastikan pengguna boleh log keluar dengan selamat dengan mengosongkan token mereka.

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

• /todos: Mengambil todos yang dikaitkan dengan pengguna yang disahkan.

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

• /todos: Menambah todo baharu untuk pengguna yang disahkan.

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: Mengemas kini todo berdasarkan ID yang diberikan.

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: Memadamkan todo berdasarkan ID yang diberikan.

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

2. Aplikasi Utama (React)

Aplikasi utama bertindak sebagai Pembekal Perkhidmatan (SP) yang menggunakan API dan mengurus interaksi pengguna.

Di bawah ialah pecahan berstruktur kod yang disediakan, menerangkan tujuan setiap bahagian untuk pengikut anda. Ini berfungsi sebagai contoh teguh tentang cara melaksanakan fungsi SSO dalam lapisan aplikasi utama.

• Komponen Apl

Komponen Apl mengurus pengesahan pengguna dan mengubah hala berdasarkan status log masuk.

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

• Komponen Log Masuk

Komponen Log Masuk mengendalikan log masuk pengguna dan mengubah hala ke halaman Todos setelah pengesahan berjaya.

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

• Komponen Todos

Komponen Todos memaparkan todos khusus pengguna dan membenarkan menambah serta memadam 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. Aplikasi Luaran (React)

Aplikasi luaran bertindak sebagai Pembekal Perkhidmatan (SP) lain yang menggunakan API dan mengurus interaksi pengguna.

Di bawah ialah pecahan berstruktur kod yang disediakan, menerangkan tujuan setiap bahagian untuk pengikut anda. Ini berfungsi sebagai contoh teguh tentang cara melaksanakan fungsi SSO dalam lapisan aplikasi luaran.

• Komponen Apl

Komponen Apl mengurus pengesahan pengguna dan mengubah hala berdasarkan status log masuk.

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

• Komponen Todos

Komponen Todos memaparkan todos khusus pengguna.

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>} />
        <route path="/todos" element="{isLoggedIn"></route> : <navigate to='{"/"}'></navigate>}
        />
      </routes>
    </div>
  );
}

export default App;

Kesimpulan

Single Sign-On (SSO) memudahkan pengesahan pengguna dan pengurusan akses merentas berbilang aplikasi, meningkatkan pengalaman pengguna, keselamatan dan kecekapan operasi. Dengan memusatkan pengesahan dan memanfaatkan mekanisme berasaskan token yang selamat, organisasi boleh menyelaraskan akses pengguna, mengurangkan risiko berkaitan kata laluan dan meningkatkan keupayaan pematuhan dan pengauditan.

Walaupun SSO menawarkan banyak faedah, ia juga memberikan cabaran seperti titik kegagalan tunggal, keperluan pelaksanaan yang kompleks, risiko keselamatan dan kemungkinan penguncian vendor. Organisasi mesti merancang dan melaksanakan penyelesaian SSO dengan teliti untuk mengurangkan risiko ini dan memaksimumkan faedah pengesahan berpusat.

Dengan mengikuti amalan terbaik, memanfaatkan protokol yang telah ditetapkan dan memilih standard terbuka, organisasi boleh berjaya melaksanakan SSO untuk meningkatkan pengalaman pengguna, keselamatan dan kecekapan operasi merentas aplikasi dan sistem mereka.

Atas ialah kandungan terperinci Single Sign-On (SSO): Panduan Komprehensif dengan React dan ExpressJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!