如何配置AWS Amplify以UserPool为AppSync默认授权并适配前后端？

刚学习AWS Amplify并部署了首个应用，发现AppSync Query使用硬编码的API Key作为认证方式，而项目中已创建UserPool实例，希望改用UserPool认证，通过向AppSync发送访问令牌实现数据查询。

数据资源配置（./amplify/data/resource.ts） #

// ./amplify/data/resource.ts
export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "apiKey",
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

认证资源配置（./amplify/auth/resource.ts） #

// ./amplify/auth/resource.ts
export const auth = defineAuth({
  loginWith: {
    email: true,
  }
});

1. 定义UserPool与AppSync的依赖关系 #

Amplify后端框架会自动管理同一项目内的资源依赖，无需手动显式声明。只要auth和data资源在同一个Amplify项目中配置，部署时Amplify会优先创建UserPool，再自动将其关联为AppSync的认证源。

2. 配置defineData参数 #

修改data/resource.ts，将默认认证模式切换为userPool，配置示例如下：

// ./amplify/data/resource.ts
import { auth } from '../auth/resource'; // 导入auth资源明确关联（可选，Amplify也可自动识别）

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "userPool", // 设置默认认证为UserPool
    userPoolAuthorizationMode: {
      // 若项目存在多个UserPool，可通过此参数指定目标实例；单实例场景无需配置
      // userPoolId: auth.resources.userPool.id
    },
    // 可选：保留API Key作为备用认证方式，按需决定是否移除
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

3. 前端令牌管理与React适配 #

Amplify前端库完全支持自动令牌管理，无需手动处理存储、刷新逻辑：

• 令牌管理：Amplify Auth模块会自动存储用户登录后的访问令牌与刷新令牌，令牌过期时自动发起刷新请求，全程无需介入。
• React前端适配：
  1. 项目入口处配置Amplify：

     // src/main.tsx 或 src/index.tsx
     import { Amplify } from 'aws-amplify';
     import outputs from '../amplify_outputs.json';
     
     Amplify.configure(outputs);
     

  2. 使用生成的Data客户端发起查询，客户端会自动从Auth模块获取当前用户的访问令牌并附加到AppSync请求：

     import { generateClient } from 'aws-amplify/data';
     import type { Schema } from '../amplify/data/resource';
     
     const client = generateClient<Schema>();
     
     // 确保用户已登录后再发起查询，可通过Auth.currentAuthenticatedUser()校验状态
     const fetchData = async () => {
       try {
         const result = await client.models.ModelName.list();
         console.log(result);
       } catch (err) {
         console.error(err);
       }
     };
     

  3. 可结合Amplify UI组件快速实现登录逻辑，确保用户认证后才能访问资源：

     import { withAuthenticator } from '@aws-amplify/ui-react';
     import '@aws-amplify/ui-react/styles.css';
     
     function App() {
       return (
         <div>
           {/* 你的应用内容 */}
         </div>
       );
     }
     
     export default withAuthenticator(App);
     

如果需要更灵活的资源配置控制权，可考虑：

• AWS CDK：手动定义AppSync API与Cognito UserPool的关联关系，完全掌控资源部署逻辑。
• AppSync CLI：单独管理AppSync API，自行配置Cognito UserPool作为认证源。

内容的提问来源于stack exchange，提问作者Qiao Li