如何更改 aws amplify/cognito login/signup 屏幕的背景

Question

我想为我正在制作的应用程序使用 aws amplify，但我不知道如何使用 withAuthenticator 更改 login/sign up 屏幕的背景。有人可以让我知道该怎么做吗？我现在只想要一个图像背景。谢谢！

Answer 1

在您的 css 主文件中：

:root{
  --form-color: cyan
}

如果您查看 amplify 应用程序演示，您会发现背景采用了 --form-color 变量的颜色。放大文档没有告诉您可以更改此值，但它应该有效。如果不是，请将其更改为 --form-color: cyan !important.

来源：

https://aws-amplify.github.io/docs/js/ui-components#theming（扩大关于主题的文档）
https://master.d2ka7y7551sk8n.amplifyapp.com/（我发现并摆弄过的演示应用程序）

Answer 2

要在 Amazon Cognito 托管登录版本上将主背景（不是登录框背景）从默认灰色更改，您不能在池管理区域中执行此操作，您必须使用 AWS CLI 来执行此操作。

我使用了 AWS 中可用的基于 Web 浏览器的浏览器，称为“Cloud Shell”。

下面是一个例子。确保指定区域、用户池和客户端 ID。您可以从 URL 获取客户端 ID，从池页面获取池 ID。

您还需要添加 Base64 格式的徽标，因此请选择您的徽标并使用在线工具将您的徽标转换为长的 base 64 字符串。如果您的字符串转换以“data:image/png;base64”开头，请忽略它并在逗号后包含所有内容，方法是将其添加到命令中..

--image-file "long-base64-image-string-here".

`aws cognito-idp set-ui-customization --region eu-west-2 --user-pool-id "eu-west-2XXXX" --client-id "XXXXXXXXXXXX" --css "
body { background: red;} 
.submitButton-customizable{background-color:#c91265; border-color:#c91265;} 
.banner-customizable{background-color: white} 
.socialButton-customizable.google-button{background: #fafafa;color: #0d0707;}
.socialButton-customizable{border-radius: 10px;border: 1px #cacaca solid;}
socialButton-customizable.google-button .social-logo {border-radius:10px;}"`

Answer 3

enter image description here

您也可以像这样添加背景图片

如何更改 aws amplify/cognito login/signup 屏幕的背景

How to change background of aws amplify/cognito login/signup screen

javascript

reactjs

amazon-cognito

aws-amplify