如何在AWS Amplify UI React中为Authenticator配置Azure SAML身份提供商

对于自定义SAML身份提供商（比如你配置的Azure AD），federated参数的配置不需要依赖内置的谷歌、脸书等预定义标识，核心是匹配你在Cognito用户池中设置的身份提供商名称。

具体配置步骤 #

1. 确认Cognito中的SAML提供商名称
   登录AWS控制台，进入目标Cognito用户池 → 「身份提供商」页面，找到你配置的Azure AD SAML提供商，记录它的Provider name（比如你可能命名为AzureAD或AzureSAML）。

2. 构造federated配置对象
   直接将该提供商名称作为customProviders的键，值设为true，示例代码如下：

   const myFederatedConfig = {
     customProviders: {
       // 替换为你实际的SAML提供商名称
       AzureAD: true
     }
   };
   

3. 传入Authenticator组件
   将配置好的对象传入Authenticator或withAuthenticator的federated参数：

   // 使用Authenticator组件示例
   <Authenticator
     federated={myFederatedConfig}
     // 其他必要配置项
   >
     {/* 你的应用内容 */}
   </Authenticator>
   
   // 使用withAuthenticator高阶组件示例
   export default withAuthenticator(App, {
     federated: myFederatedConfig
     // 其他必要配置项
   });
   

关键注意事项 #

• 名称完全匹配：Cognito中设置的Provider name要和customProviders中的键完全一致，大小写敏感。
• 无需手动配置端点：因为你已经通过Cognito Hosted UI完成了SAML提供商的配置，Amplify会自动从Cognito的配置中获取对应的登录流程信息，不需要手动填写SAML元数据或登录URL。
• 界面显示：配置完成后，Authenticator登录界面会显示对应名称的SAML登录按钮，点击后将跳转至Azure AD的登录页面，验证通过后正常回调到你的应用。

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