通过cognitoConfig.yaml文件定制AWS cognito登录页面CSS

通过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

我正在AWS Cognito中自动化创建用户池的过程。我正在使用yaml文件来设置整个内容(即用户属性、IDP等)。我需要自定义登录页面,我知道我需要将CSS添加到特定的类列表中。我不知道在哪里或格式。

您可以修改提供的css类,并使用AWS CLI推送更新

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。