如何在Amplify项目中结合自定义身份提供商使用Amazon Cognito？

一、在Cognito用户池配置自定义身份提供商 #

• 登录AWS控制台，打开Cognito服务，选择目标用户池（无则新建）
• 进入「身份提供商」标签页，选择要添加的提供商类型（OIDC/SAML，对应你图中的流程）：
  • OIDC类型：填写提供商名称、授权端点、令牌端点、用户信息端点，录入客户端ID/密钥，配置所需权限范围（如openid、email）
  • SAML类型：上传SAML元数据文件或输入元数据URL，设置提供商名称，完成用户属性映射配置
• 进入「应用客户端」，选中Amplify关联的应用客户端，在「身份提供商」列表中启用刚才添加的自定义提供商
• 配置Cognito域名：在用户池设置里配置官方域名或自定义域名，作为登录跳转的基础地址

二、配置Amplify Auth模块 #

• 若项目未初始化Amplify，先运行：amplify init
• 添加或更新Auth模块：
  • 运行amplify add auth（已添加则用amplify update auth）
  • 配置向导中选择「手动配置」，勾选「用户池」并启用「第三方身份提供商登录」
  • 选择对应提供商类型，填入Cognito中已配置的信息，关联目标用户池
• 推送配置到AWS：运行amplify push，等待配置同步完成

三、前端实现自定义提供商登录逻辑 #

• 导入Amplify Auth模块：

  import { Auth } from 'aws-amplify';
  

• 编写登录触发函数：

  const loginWithCustomIdp = async () => {
    try {
      // 替换为你在Cognito中设置的自定义提供商名称
      await Auth.federatedSignIn({ provider: 'CustomIdpName' });
    } catch (error) {
      console.error('登录失败:', error);
    }
  };
  

• 可选：监听登录状态，获取用户信息：

  Auth.currentAuthenticatedUser()
    .then(user => console.log('当前登录用户:', user))
    .catch(err => console.log('用户未登录:', err));
  

四、流程验证 #

• 启动前端项目，点击自定义登录按钮，会跳转至自定义身份提供商的登录页面
• 登录成功后自动跳转回Cognito域名，再重定向到你的应用，此时用户已完成Cognito认证
• 可通过Amplify Auth的方法获取身份令牌、用户信息，用于后续API请求的授权校验

顺颂商祺

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