如何跳过Cognito Hosted UI，使用自定义UI实现社交登录？

完全可以跳过Cognito Hosted UI，通过自定义UI配合Amplify或Cognito原生API完成社交登录，并在用户池中自动创建关联用户。以下是具体实现步骤：

前提准备 #

确保你的Cognito用户池已经配置好Google作为身份提供商（IdP）：

• 在AWS控制台的Cognito用户池设置中，添加Google作为IdP，填入Google OAuth应用的客户端ID、密钥
• 配置一致的回调URL（和你自定义UI中使用的Google授权回调地址匹配）
• 确保Cognito应用客户端的OAuth设置中，启用了authorization_code授权流

处理Google授权码并创建用户 #

当你从Google拿到授权码后，有两种方式完成后续流程：

方式1：使用Amplify Auth模块 #

Amplify已封装处理第三方授权码的逻辑，直接调用相关方法即可，首次登录时Cognito会自动在用户池中创建用户：

import { Auth } from 'aws-amplify';

async function signInWithGoogleAuthCode(authCode) {
  try {
    // 传入Google授权码，Amplify自动与Cognito交互完成验证与用户创建
    const user = await Auth.federatedSignIn({
      provider: 'Google',
      token: authCode,
      // 可选：授权码的过期时间戳，未提供时Amplify会自行处理
      expires_at: Date.now() + 3600000
    });
    
    // 成功后，user对象包含Cognito用户信息，用户池已自动创建对应条目
    console.log('用户登录/创建成功:', user);
  } catch (error) {
    console.error('登录失败:', error);
  }
}

方式2：直接调用Cognito原生API #

如果不想依赖Amplify，可使用AWS SDK直接调用Cognito的InitiateAuth接口，传入授权码触发用户创建：

import { CognitoIdentityProviderClient, InitiateAuthCommand } from "@aws-sdk/client-cognito-identity-provider";

const cognitoClient = new CognitoIdentityProviderClient({ region: '你的AWS区域' });

async function authenticateWithGoogleCode(authCode) {
  const params = {
    AuthFlow: "AUTHORIZATION_CODE_AUTH",
    ClientId: "你的Cognito应用客户端ID",
    AuthParameters: {
      "CODE": authCode,
      "REDIRECT_URI": "你配置的回调URL",
      // 若应用客户端设置了密钥，需添加SECRET_HASH：用HMAC-SHA256哈希 username+clientId，密钥为clientSecret，转Base64
      // "SECRET_HASH": "计算后的哈希值"
    }
  };

  try {
    const response = await cognitoClient.send(new InitiateAuthCommand(params));
    // 成功返回的response包含ID Token、Access Token等，用户池已自动创建用户
    console.log('认证成功:', response);
  } catch (error) {
    console.error('认证失败:', error);
  }
}

关键说明 #

• 首次使用Google账号登录时，Cognito会自动在用户池中创建新用户，将Google的身份信息（如用户ID、邮箱等）关联到Cognito用户条目
• 后续登录时，Cognito会直接匹配已存在的用户，无需重复创建
• 确保Google OAuth应用的回调URL与Cognito配置的redirectSignIn完全一致，否则会验证失败

内容的提问来源于stack exchange，提问作者Mohamed Anser Ali