通过cognitoConfig.yaml文件定制AWS cognito登录页面CSS
我正在AWS Cognito中自动化创建用户池的过程。我正在使用yaml文件来设置整个内容(即用户属性、IDP等)。我需要自定义登录页面,我知道我需要将CSS添加到特定的类列表中。我不知道在哪里或格式。您可以修改提供的css类,并使用AWS CLI推送更新通过cognitoConfig.yaml文件定制AWS cognito登录页面CSS,css,yaml,amazon-cognito,Css,Yaml,Amazon Cognito,我正在AWS Cognito中自动化创建用户池的过程。我正在使用yaml文件来设置整个内容(即用户属性、IDP等)。我需要自定义登录页面,我知道我需要将CSS添加到特定的类列表中。我不知道在哪里或格式。您可以修改提供的css类,并使用AWS CLI推送更新 background-customizable banner-customizable errorMessage-customizable idpButton-customizable idpButton-customizable:hover
background-customizable
banner-customizable
errorMessage-customizable
idpButton-customizable
idpButton-customizable:hover
inputField-customizable
inputField-customizable:focus + few more.
AWS提供了cognito用户池UI上使用的类列表,您可以修改这些类
使用--css.classname{field:value}“
和aws-cognito-idp-set-ui-customization
命令进行更新
例如:
aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id
<your-app-client-id> --image-file <path-to-logo-image-file> --css ".label-
customizable{ color: <color>;}"
aws cognito idp集ui自定义--用户池id--客户端id
--图像文件--css“.label-
可自定义的{color:;}”
我就是这样做的。现在可以使用AWS::Cognito::UserPoolIdentityProvider资源
UserPoolUICustomization:
Type: AWS::Cognito::UserPoolUICustomizationAttachment
Properties:
UserPoolId: !Ref CognitoUserPool
ClientId: !Ref CognitoUserPoolClient2
CSS: ".logo-customizable {
max-width: 100%;
max-height: 100%;
}
.banner-customizable {
padding: 0px 0px 5px 0px;
background-color: #fff;
}
.label-customizable {
font-weight: 400;
}
.textDescription-customizable {
padding-top: 10px;
padding-bottom: 10px;
display: block;
font-size: 16px;
}
.idpDescription-customizable {
padding-top: 10px;
padding-bottom: 10px;
display: block;
font-size: 16px;
}
.legalText-customizable {
color: #747474;
font-size: 11px;
}
.submitButton-customizable {
font-size: 14px;
font-weight: bold;
margin: 20px 0px 10px 0px;
height: 40px;
width: 100%;
color: #fff;
background-color: #337ab7;
}"
我想将其添加为yaml文件的一部分,这样就可以一次性构建和完成,而无需使用cli或sdk。