在SST项目中实现基于Auth0的JWT授权API开发指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00110/article/details/148553174

在SST项目中实现基于Auth0的JWT授权API开发指南

sst.dev Repo for sst.dev 项目地址: https://gitcode.com/gh_mirrors/ss/sst.dev

前言

在现代Web应用开发中，身份验证和授权是至关重要的安全机制。本文将详细介绍如何在SST（Serverless Stack）项目中，通过Auth0实现JWT（JSON Web Token）授权机制来保护无服务器API。

技术背景

什么是JWT授权？

JWT是一种开放标准（RFC 7519），用于在各方之间安全地传输信息作为JSON对象。它由三部分组成：头部（Header）、载荷（Payload）和签名（Signature）。JWT常用于身份验证和信息交换，特别适合无服务器架构。

为什么选择Auth0？

Auth0是一个身份验证和授权平台，提供：

多种身份验证方式（社交登录、企业登录等）
完善的用户管理功能
高度可定制的安全策略
易于集成的SDK

环境准备

开始前确保具备以下条件：

Node.js 16或更高版本
TypeScript开发环境
配置好的AWS账户和CLI
有效的Auth0账户

项目初始化

首先创建SST基础项目：

npx create-sst@latest --template=base/example api-auth-jwt-auth0
cd api-auth-jwt-auth0
npm install

项目结构说明：

stacks/：存放基础设施代码（使用AWS CDK）
packages/functions/：存放API业务逻辑代码

Auth0配置步骤

在Auth0控制台创建新应用
选择"单页应用"类型
获取Domain和Client ID并添加到.env文件
配置回调URL为http://localhost:3000

.env文件示例：

AUTH0_DOMAIN=your-domain.auth0.com
AUTH0_CLIENT_ID=your-client-id

API基础设施搭建

在stacks/ExampleStack.ts中定义API资源：

const api = new Api(stack, "Api", {
  authorizers: {
    auth0: {
      type: "jwt",
      jwt: {
        issuer: `https://${process.env.AUTH0_DOMAIN}/`,
        audience: [
          `${process.env.AUTH0_CLIENT_ID}`,
          `https://${process.env.AUTH0_DOMAIN}/api/v2/`,
        ],
      },
    },
  },
  defaults: {
    authorizer: "auth0",
  },
  routes: {
    "GET /private": "functions/private.main",
    "GET /public": {
      function: "functions/public.main",
      authorizer: "none",
    },
  },
});

关键配置说明：

issuer：Auth0颁发者URL（注意结尾斜杠）
audience：API的预期接收方
定义了两个端点：受保护的/private和公开的/public

业务逻辑实现

公开端点实现

packages/functions/src/public.ts:

export async function main() {
  return {
    statusCode: 200,
    body: "Hello stranger!",
  };
}

受保护端点实现

packages/functions/src/private.ts:

export const main: APIGatewayProxyHandlerV2WithJWTAuthorizer = async (event) => {
  return {
    statusCode: 200,
    body: `Hello ${event.requestContext.authorizer.jwt.claims.sub}!`,
  };
};

前端集成

创建React应用

npx create-vite@latest frontend --template react
cd frontend
npm install

配置Amplify

安装依赖：

npm install aws-amplify @auth0/auth0-react

配置入口文件main.jsx：

Amplify.configure({
  API: {
    endpoints: [
      {
        name: "api",
        endpoint: import.meta.env.VITE_APP_API_URL,
        region: import.meta.env.VITE_APP_REGION,
      },
    ],
  },
});

实现登录UI

核心功能组件App.jsx：

const App = () => {
  const { loginWithRedirect, logout, user, isAuthenticated } = useAuth0();

  const privateRequest = async () => {
    const accessToken = await getAccessTokenSilently({
      audience: `https://${import.meta.env.VITE_APP_AUTH0_DOMAIN}/api/v2/`,
    });
    const response = await API.get("api", "/private", {
      headers: { Authorization: `Bearer ${accessToken}` },
    });
    alert(JSON.stringify(response));
  };

  return (
    <div className="container">
      {isAuthenticated ? (
        <div>
          <p>Welcome {user.email}</p>
          <button onClick={logout}>Logout</button>
          <button onClick={privateRequest}>Call Private API</button>
        </div>
      ) : (
        <button onClick={loginWithRedirect}>Login</button>
      )}
    </div>
  );
};