如何在React应用中使用AWS Amplify Auth实现SAML登录流程

核心实现思路 #

Amplify UI的Authenticator组件默认不直接展示SAML登录选项，需通过调用Amplify Auth的底层方法，结合自定义UI触发SAML登录流程。

步骤1：确认Amplify Auth配置 #

确保amplifyconfiguration.json已包含SAML身份提供商配置，或通过代码初始化时补充：

import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure({
  ...awsconfig,
  Auth: {
    identityProviders: {
      'your-saml-provider-id': {
        name: '你的SAML提供商名称',
        type: 'SAML'
      }
    }
  }
});

步骤2：自定义SAML登录触发组件 #

跳过默认Authenticator表单，直接实现触发SAML登录的按钮：

import { Auth } from 'aws-amplify';
import { Button } from '@aws-amplify/ui-react';

function SamlLoginButton() {
  const handleSamlLogin = async () => {
    try {
      // 触发SAML登录流程
      await Auth.federatedSignIn({
        provider: 'your-saml-provider-id' // 替换为用户池中配置的SAML提供商ID
      });
      // 登录成功后获取用户信息
      const user = await Auth.currentAuthenticatedUser();
      console.log('SAML登录成功:', user);
    } catch (error) {
      console.error('SAML登录失败:', error);
    }
  };

  return (
    <Button onClick={handleSamlLogin} variation="primary">
      通过你的SAML提供商登录
    </Button>
  );
}

export default SamlLoginButton;

步骤3：处理登录回调与状态校验 #

Cognito登录成功后会重定向回应用（需提前在用户池客户端配置正确的回调URL），Amplify会自动维护会话。可在应用入口校验用户状态：

import { useEffect, useState } from 'react';
import { Auth } from 'aws-amplify';
import SamlLoginButton from './SamlLoginButton';

function App() {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    checkAuthStatus();
  }, []);

  const checkAuthStatus = async () => {
    try {
      const user = await Auth.currentAuthenticatedUser();
      setCurrentUser(user);
    } catch {
      setCurrentUser(null);
    }
  };

  return (
    <div className="app-container">
      {currentUser ? (
        <div>欢迎，{currentUser.username}</div>
      ) : (
        <SamlLoginButton />
      )}
    </div>
  );
}

export default App;

关键注意事项 #

• 确保用户池客户端已启用目标SAML提供商，且回调URL、退出URL与应用实际地址一致。
• your-saml-provider-id需与Cognito用户池中配置的SAML提供商名称完全匹配。
• 如需自定义登录后的重定向路径，可在federatedSignIn中添加redirectUri参数：

  await Auth.federatedSignIn({
    provider: 'your-saml-provider-id',
    redirectUri: window.location.origin + '/dashboard'
  });
  

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