如何在浏览器中获取Cognito ID Token？ReactJS无服务器应用场景

刚好做过类似的场景，给你分享两种在React应用里从Cognito获取ID Token并传给后端API的实用方案，都是生产环境里常用的：

Amplify是AWS官方的前端开发框架，专门用来对接Cognito、API Gateway这些服务，不用自己写太多底层认证逻辑。

• 第一步：安装依赖
  在项目根目录执行：

  npm install aws-amplify @aws-amplify/ui-react
  

• 第二步：配置Amplify
  在你的React入口文件（比如src/index.js）里添加Cognito的配置：

  import { Amplify } from 'aws-amplify';
  
  Amplify.configure({
    Auth: {
      region: '你的AWS区域（比如us-east-1）',
      userPoolId: '你的Cognito用户池ID',
      userPoolWebClientId: '你的用户池Web客户端ID',
    }
  });
  

• 第三步：实现登录并获取ID Token
  你可以直接用Amplify提供的Authenticator组件快速实现登录UI，也可以自定义登录逻辑。登录成功后，用Auth.currentSession()就能拿到包含ID Token的会话信息：

  import { Auth } from 'aws-amplify';
  
  // 封装一个获取ID Token的函数
  const getCognitoIdToken = async () => {
    try {
      const session = await Auth.currentSession();
      // 提取ID Token的JWT字符串
      const idToken = session.getIdToken().getJwtToken();
      console.log('获取到的ID Token:', idToken);
      return idToken;
    } catch (error) {
      console.error('获取ID Token失败:', error);
      return null;
    }
  };
  

• 第四步：把ID Token传给API
  调用你的CloudFront/API Gateway接口时，在请求头里带上Authorization: Bearer ${idToken}，比如用fetch的示例：

  const callProtectedAPI = async () => {
    const idToken = await getCognitoIdToken();
    if (!idToken) return;
  
    const response = await fetch('你的API端点URL', {
      method: 'GET', // 或者POST/PUT等
      headers: {
        'Authorization': `Bearer ${idToken}`,
        'Content-Type': 'application/json'
      }
    });
  
    const data = await response.json();
    console.log('API返回数据:', data);
  };
  

如果不想引入Amplify的全套依赖，也可以用AWS SDK for JavaScript v3直接调用Cognito的API：

• 第一步：安装依赖

  npm install @aws-sdk/client-cognito-identity-provider
  

• 第二步：实现登录并提取ID Token
  直接调用Cognito的InitiateAuth接口完成登录，然后从响应里拿到ID Token：

  import { CognitoIdentityProviderClient, InitiateAuthCommand } from "@aws-sdk/client-cognito-identity-provider";
  
  // 初始化Cognito客户端
  const cognitoClient = new CognitoIdentityProviderClient({
    region: '你的AWS区域'
  });
  
  // 登录并获取ID Token
  const loginAndGetIdToken = async (username, password) => {
    const params = {
      AuthFlow: "USER_PASSWORD_AUTH", // 这里用用户名密码登录流，根据你的配置调整
      ClientId: '你的用户池Web客户端ID',
      AuthParameters: {
        USERNAME: username,
        PASSWORD: password
      }
    };
  
    try {
      const command = new InitiateAuthCommand(params);
      const response = await cognitoClient.send(command);
      // 直接从响应里提取ID Token
      const idToken = response.AuthenticationResult.IdToken;
      console.log('ID Token:', idToken);
      return idToken;
    } catch (error) {
      console.error('登录失败:', error);
      return null;
    }
  };
  

• 第三步：传递ID Token给API
  和方案一的方式完全一样，在请求头里带上Authorization字段即可。

几个关键注意点 #

• Cognito客户端配置：确保你的用户池Web客户端开启了对应的认证流（比如USER_PASSWORD_AUTH），并且没有设置不必要的限制。
• 安全提示：ID Token是敏感信息，不要随意打印到生产环境的控制台，也建议用Amplify的会话管理自动处理令牌的存储和刷新，避免手动存储带来的安全风险。
• API端验证：你的Lambda/API必须验证ID Token的有效性（比如检查签名、过期时间、受众等），不能直接信任前端传过来的令牌。

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