使用 Clerk 和 React 保护 Node.js Express API 的安全

在现代 Web 应用程序中，确保 API 的安全性是开发过程中的关键环节。通过使用 Clerk 提供的身份验证中间件，您可以轻松保护 Node.js Express 应用程序中的 API 端点，确保只有经过身份验证的用户才能访问这些资源。本文将详细介绍如何使用 Clerk 的 ClerkExpressWithAuth 和 ClerkExpressRequireAuth 中间件来保护 API，并结合 React 前端实现完整的身份验证流程。

Clerk 身份验证中间件简介

Clerk 提供了两种主要的中间件，用于在 Express 应用程序中实现身份验证：

• ClerkExpressWithAuth：将经过身份验证的用户会话附加到请求对象中，方便在路由处理程序中访问用户信息。
• ClerkExpressRequireAuth：确保只有经过身份验证的请求才能访问受保护的路由，未验证的请求将返回错误。

通过这两种中间件，您可以灵活地保护不同的 API 端点，满足各种安全需求。

初始化 Node.js 项目并安装依赖

首先，在本地创建一个空目录，并初始化一个新的 Node.js 项目：

mkdir my-express-app
cd my-express-app
npm init -y

然后，打开 package.json 文件，添加以下配置以启用 ES 模块支持：

"type": "module"

接下来，安装以下必要的依赖包：

• express：轻量级的 Node.js Web 框架。
• cors：允许跨域请求。
• dotenv：用于加载环境变量。
• @clerk/clerk-sdk-node：Clerk 提供的 Node.js SDK，用于用户管理和身份验证。

运行以下命令安装这些依赖：

npm install express cors dotenv @clerk/clerk-sdk-node

配置 Clerk 密钥

在 Clerk 仪表盘中，获取以下密钥：

• CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY

将这些密钥存储在项目根目录的 .env 文件中：

CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key

确保 CLERK_SECRET_KEY 仅在后端使用，以保证安全性。

创建 Express 服务器并集成 Clerk 中间件

在项目根目录下创建一个名为 server.js 的文件，并添加以下代码：

// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
console.log(Server is running on http://localhost:${PORT});
});

const app = express();

app.use(cors());

app.use(express.json());



// 使用 ClerkExpressWithAuth 中间件

app.get('/protected-auth-optional', ClerkExpressWithAuth(), (req, res) => {

  res.json({ message: 'This route is accessible with or without authentication', user: req.auth?.user });

});



// 使用 ClerkExpressRequireAuth 中间件

app.get('/protected-auth-required', ClerkExpressRequireAuth(), (req, res) => {

  res.json({ message: 'This route requires authentication', user: req.auth.user });

});



// 错误处理中间件

app.use((err, req, res, next) => {

  console.error(err);



  res.status(err.status || 500).json({ error: err.message });



});



// 启动服务器

const PORT = 3000;

app.listen(PORT, () => {

  console.log(Server is running on http://localhost:${PORT});
});

运行以下命令启动服务器：

node server.js

使用 Postman 测试 API

使用 Postman 测试上述 API 端点：

1. 打开 Postman，创建一个新的 HTTP 请求。
2. 测试 /protected-auth-required 路由：
   • 未提供身份验证时，返回 401 错误。
   • 提供有效的身份验证令牌时，返回用户信息。
3. 测试 /protected-auth-optional 路由：
   • 无需身份验证即可访问，但会返回空的用户信息。

创建 React 应用并集成 Clerk

在前端，我们将创建一个 React 应用程序，并通过 Clerk 提供的 React SDK 实现身份验证。

初始化 React 项目

在终端中运行以下命令：

npx create-react-app my-react-app
cd my-react-app
npm install @clerk/clerk-react

配置 Clerk React SDK

按照 Clerk 的快速启动指南，将 Clerk 集成到 React 应用中。在 src/index.js 中添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { ClerkProvider } from '@clerk/clerk-react';
import App from './App';

const clerkFrontendApi = 'your_clerk_frontend_api';ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

添加登录和用户按钮

在 src/App.jsx 中，添加以下代码：

import React from 'react';
import { SignInButton, UserButton, useAuth } from '@clerk/clerk-react';

const App = () => {
  const { getToken } = useAuth();  const fetchProtectedData = async (url) => {
    const token = await getToken();
    const response = await fetch(url, {
      headers: {
        Authorization: Bearer ${token},
      },
    });
    const data = await response.json();
    console.log(data);
  };  return (
    

      
Clerk + React + Express
      
      
       fetchProtectedData('http://localhost:3000/protected-auth-required')}>
        Fetch Protected Data
      
    
  );
};export default App;

总结

通过结合 Clerk 和 React，您可以快速实现高效的身份验证流程，保护 Node.js Express API 的安全性。使用 Clerk 提供的中间件和 React SDK，您无需从零构建复杂的身份验证系统，从而节省开发时间并提升安全性。

原文链接: https://clerk.com/blog/securing-node-express-apis-clerk-react