如何为Amazon Cognito登录界面预填充用户名（邮箱）字段？

方案一：使用自定义登录UI（推荐） #

Cognito支持自定义登录界面，这是最可靠且灵活的方式，完全由你控制表单渲染逻辑：

• 在自定义登录页面中，从URL的自定义查询参数（比如pre_email）获取要预填充的邮箱地址
• 直接将值赋值给用户名输入框，示例代码：

// 页面加载时执行
window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const prefilledEmail = urlParams.get('pre_email');
  if (prefilledEmail) {
    // 找到用户名输入框，根据你的表单结构调整选择器
    const usernameInput = document.querySelector('input[name="username"]');
    if (usernameInput) {
      usernameInput.value = prefilledEmail;
    }
  }
});

• 配置Cognito用户池使用该自定义登录页面，用户跳转时携带pre_email参数即可实现预填充。

方案二：通过脚本注入修改Hosted UI #

如果不想自定义UI，可通过在Cognito Hosted UI页面加载时注入脚本实现填充：

1. 使用CloudFront或Lambda@Edge拦截Hosted UI的请求，在页面HTML中插入自定义脚本
2. 脚本逻辑：从URL自定义参数中提取邮箱，找到用户名输入框并赋值，示例脚本：

(function() {
  function fillUsername() {
    const input = document.querySelector('input[name="username"]') || document.querySelector('#signInFormUsername');
    if (input && !input.value) {
      const params = new URLSearchParams(window.location.search);
      const email = params.get('pre_fill_email');
      if (email) input.value = email;
    }
  }
  // 监听页面元素加载，避免DOM未就绪时执行
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fillUsername);
  } else {
    fillUsername();
  }
})();

• 注意：Hosted UI的DOM结构可能会随AWS更新变化，需要定期验证选择器是否有效。

方案三：结合Amplify Auth的自定义跳转逻辑 #

如果你使用AWS Amplify：

• 在调用Auth.federatedSignIn()或Auth.signIn()跳转前，构造包含自定义参数的Hosted UI URL
• 配合方案二的脚本注入实现预填充；或者直接使用自定义UI结合Amplify的Auth流程处理。

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