一. 為什么 API 請求身份驗證至關重要？

API 身份驗證對于開發安全的后端系統非常關鍵，其主要價值體現在：

1. 提升安全性
   確保只有授權用戶或客戶端能夠訪問 API，防止數據被竊取或非法修改。

2. 保護數據完整性
   驗證請求來源，有效阻止惡意操作對系統造成破壞。

雖然某些路由（如登錄或注冊）需要保持開放狀態，但默認情況下建議對所有 API 路由啟用身份驗證。使用專業工具（如 Clerk）可顯著簡化開發流程并提高安全性。

二. Clerk 提供的兩種身份驗證中間件

Clerk 為 Express 提供了兩種中間件：

1. ClerkExpressWithAuth()
   寬松身份驗證中間件，未認證請求會返回一個空的 auth 對象。

2. ClerkExpressRequireAuth()
   嚴格身份驗證中間件，未認證請求會直接返回錯誤（HTTP 401）。

主要區別在于對未認證請求的處理方式。

三. Express 核心概念：回調函數與中間件

1. 回調函數

回調函數是作為參數傳遞給其他函數，并在稍后被調用的函數。Node.js 廣泛使用回調函數處理異步操作，如 HTTP 請求。

2. 中間件

中間件是一個函數，可以訪問請求對象 (req)、響應對象 (res) 以及下一個中間件 (next)。中間件可以：

• 修改請求或響應對象
• 終止請求-響應循環
• 調用下一個中間件

在 Express 中，路由處理函數本質上也是中間件，因為它們可以訪問 req、res 和 next 對象。

四. 使用 ClerkExpressWithAuth() 實現寬松身份驗證

1. 設置后端環境

mkdir backend
cd backend
npm init -y
npm install express dotenv @clerk/clerk-sdk-node

在 .env 文件中添加 Clerk API 密鑰：

CLERK_API_KEY=your-clerk-api-key

2. 創建 Express 服務器

import express from "express";
import "dotenv/config";
import { ClerkExpressWithAuth } from "@clerk/clerk-sdk-node";

const app = express();

app.use(ClerkExpressWithAuth());

app.get("/protected-endpoint", (req, res) => {
    res.json({ auth: req.auth });
});

app.listen(3000, () => {
    console.log("Server running on http://localhost:3000");
});

啟動服務器：

node app.js

此時，未認證請求將返回空 auth 對象。

五. 創建 React 前端客戶端

1. 設置前端環境

npx create-react-app auth-frontend
cd auth-frontend
npm install @clerk/clerk-react isomorphic-fetch es6-promise

在 .env 文件中添加公開 Clerk API 密鑰：

REACT_APP_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key

2. 配置 ClerkProvider

修改 src/App.js：

import React from "react";
import { ClerkProvider, SignedIn, SignedOut, SignIn } from "@clerk/clerk-react";
import Auth from "./auth";

const clerkFrontendApi = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;

function App() {
    return (
        <ClerkProvider publishableKey={clerkFrontendApi}>
            <SignedIn>
                <Auth />
            </SignedIn>
            <SignedOut>
                <SignIn />
            </SignedOut>
        </ClerkProvider>
    );
}

export default App;

3. 創建 Auth 組件

src/auth.js：

import React, { useEffect } from "react";
import fetch from "isomorphic-fetch";

function Auth() {
    useEffect(() => {
        const fetchProtectedData = async () => {
            const token = await window.Clerk.session.getToken();
            const response = await fetch("http://localhost:3000/protected-endpoint", {
                headers: { Authorization: Bearer ${token} },
            });
            const data = await response.json();
            console.log(data);
        };
        fetchProtectedData();
    }, []);

    return <div>Authenticated!</div>;
}

export default Auth;

此時，React 客戶端登錄后會向后端發送帶身份驗證令牌的請求，后端通過 ClerkExpressWithAuth() 驗證并返回用戶信息。

六. 使用 ClerkExpressRequireAuth() 實現嚴格身份驗證

將中間件替換為：

import { ClerkExpressRequireAuth } from "@clerk/clerk-sdk-node";

app.use(ClerkExpressRequireAuth());

此時，未認證請求將直接返回 401 錯誤，不會暴露任何 auth 對象信息。

七. 總結

通過本教程，你已經掌握了如何使用 Clerk 與 Express 為 API 添加身份驗證：

• ClerkExpressWithAuth()：寬松身份驗證，返回空 auth 對象
• ClerkExpressRequireAuth()：嚴格身份驗證，未認證請求直接報錯

下一步，可以探索 Clerk 的其他功能，如 用戶管理、會話管理 等，進一步提升應用安全性和用戶體驗。

原文鏈接: https://clerk.com/blog/how-to-authenticate-api-requests-with-clerk-express