如何将IBM Cloud上的SAML AppID与ReactJS应用集成？

1. 先在IBM Cloud上配置AppID的SAML身份提供者 #

• 登录IBM Cloud控制台，找到你的AppID服务实例
• 进入「身份提供者」页面，选择「SAML 2.0」，配置你的SAML IDP（比如ADFS、Okta这类）：可以直接导入IDP的元数据文件，或者手动填写实体ID、SSO登录URL、IDP证书等信息
• 保存配置后，记得获取AppID的SAML元数据（后续React应用可能需要用到）

2. 给React应用集成AppID认证逻辑 #

• 先安装官方提供的React SDK：

  npm install @ibm-cloud/appid-react
  

• 在应用根组件中配置AppID Provider：

  import { AppIdProvider } from '@ibm-cloud/appid-react';
  
  function App() {
    return (
      <AppIdProvider
        clientId="替换成你的AppID客户端ID"
        discoveryEndpoint="替换成你的AppID发现端点（从AppID控制台可查）"
        redirectUri="http://localhost:3000/callback" // 这个地址要和后续控制台配置的一致
      >
        {/* 这里放你的应用其他组件 */}
      </AppIdProvider>
    );
  }
  
  export default App;
  

• 实现登录/登出按钮组件：

  import { useAppId } from '@ibm-cloud/appid-react';
  
  function AuthControls() {
    const { isAuthenticated, login, logout } = useAppId();
  
    return (
      <div>
        {!isAuthenticated && <button onClick={() => login({ flow: 'saml' })}>通过SAML登录</button>}
        {isAuthenticated && <button onClick={logout}>登出</button>}
      </div>
    );
  }
  
  export default AuthControls;
  

• 处理认证回调的路由页面（以React Router为例）：

  import { useAppId } from '@ibm-cloud/appid-react';
  import { useEffect } from 'react';
  import { useNavigate } from 'react-router-dom';
  
  function CallbackPage() {
    const { handleAuthentication } = useAppId();
    const navigate = useNavigate();
  
    useEffect(() => {
      handleAuthentication()
        .then(() => navigate('/')) // 认证成功后跳转到主页
        .catch(err => console.error('认证失败:', err));
    }, [handleAuthentication, navigate]);
  
    return <div>正在处理认证，请稍候...</div>;
  }
  
  export default CallbackPage;
  

3. 在AppID控制台配置允许的回调地址 #

• 回到IBM Cloud的AppID控制台，进入「应用程序」页面找到你的应用
• 打开「认证设置」，添加React应用的回调地址（比如上面用的http://localhost:3000/callback），保存配置

4. 测试整个流程 #

• 启动React应用，点击「通过SAML登录」按钮，会跳转到你的SAML IDP登录页面
• 完成IDP端的登录后，会自动回调到React的Callback页面，处理完成后跳转到主页
• 可以通过useAppId提供的user对象获取当前登录用户的信息

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