在AWS Amplify中使用现有AppSync GraphQL API遇AuthError求助

以下是针对你遇到的问题的具体解决步骤：

• 完善Amplify配置中的Auth模块参数
  即使你使用的是OPENID_CONNECT而非Cognito用户池，Amplify的API模块依然依赖Auth模块的基础配置。你需要在awsexport.js中补充完整的OIDC相关Auth配置，示例如下：

  const awsmobile = {
    "aws_project_region": "你的AWS区域",
    "aws_appsync_graphqlEndpoint": "你的AppSync API端点",
    "aws_appsync_region": "你的AWS区域",
    "aws_appsync_authenticationType": "OPENID_CONNECT",
    "Auth": {
      "region": "你的AWS区域",
      "oauth": {
        "domain": "你的OIDC提供商域名（如xxx.auth0.com）",
        "scope": ["openid", "email", "profile"],
        "redirectSignIn": "http://localhost:3000/callback", // 你的前端回调地址
        "redirectSignOut": "http://localhost:3000/signout",
        "responseType": "code" // 按OIDC提供商要求选择code或token
      },
      "clientId": "你的OIDC客户端ID"
    }
  };
  

  完成配置后重新执行Amplify.configure(awsmobile)。

• 使用Amplify Auth的OIDC登录流程
  放弃Auth.federatedSignIn()，改用Amplify支持的OIDC原生登录方法：

  1. 在登录触发点调用Auth.signInWithRedirect()，会跳转到你的OIDC提供商登录页面；
  2. 登录成功后，在配置的回调页面调用Auth.handleAuthResponse()，Amplify会自动处理授权码并获取ID Token；
  3. 后续调用API.graphql(...)时，Amplify会自动将ID Token附加到请求头的Authorization字段，符合AppSync的认证要求。

• 手动附加ID Token（自定义登录场景）
  如果你已经通过其他渠道获取了OIDC的ID Token，可以直接在API请求中手动设置请求头，绕开Amplify Auth的自动处理：

  import { API, graphqlOperation } from 'aws-amplify';
  
  const getItemQuery = /* GraphQL */`
    query GetItem($id: ID!) {
      getItem(id: $id) {
        id
        name
      }
    }
  `;
  
  const oidcIdToken = "你获取到的OIDC ID Token";
  const requestOptions = {
    headers: {
      Authorization: oidcIdToken
    }
  };
  
  API.graphql({
    query: getItemQuery,
    variables: { id: "123" },
    ...requestOptions
  });
  

• 验证AppSync与OIDC提供商的配置一致性
  确认AppSync控制台中OPENID_CONNECT的配置：

  • 提供商URL为OIDC的发现端点（如https://xxx.auth0.com/.well-known/openid-configuration）；
  • 客户端ID与Amplify配置中的clientId一致；
  • 允许的回调地址包含Amplify配置的redirectSignIn地址。

• 更新Amplify版本
  旧版本的aws-amplify可能存在OIDC支持的bug，执行以下命令更新到最新版本：

  npm update aws-amplify
  

内容的提问来源于stack exchange，提问作者Abdulbasit Khaleeq