如何自定义AWS托管登录页面的按钮与文本内容？

• 修改身份提供商按钮文本
  直接在Cognito用户池的「Identity providers」页面，找到对应的身份提供商（如SAML/OIDC类型），修改其显示名称（Display name），修改后的名称会直接替换按钮上原有的提供商名称。

• 替换“corporate ID”这类提示文本
  利用Cognito的自定义UI资源包功能：

  1. 进入用户池的「App integration」→「Domain name」页面，点击「Customize UI」下载默认的UI资源包。
  2. 打开资源包中对应语言的JSON文件（比如en.json），找到对应提示文本的键值对，替换为自定义内容。
  3. 将修改后的资源包重新上传，托管UI会自动加载新的文本内容。

• 备选方案：JavaScript动态修改
  如果你已经在使用自定义CSS，可配合JS注入修改页面文本，示例代码如下：

  // 替换身份提供商按钮文本
  document.querySelector('.cognito-idp-btn').textContent = '自定义登录按钮文本';
  // 替换上方提示文本（需根据实际页面元素调整选择器）
  document.querySelector('.auth-header-text').textContent = '自定义提示内容';
  

  把这段代码放在自定义HTML模板的<script>标签中即可生效，注意要根据实际页面的DOM结构调整元素选择器。

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