Como personalizar as páginas da Web integradas de cadastro e acesso - Amazon Cognito
Como especificar um logo personalizado para a aplicaçãoComo especificar personalizações de CSS para a aplicaçãoComo especificar as configurações de personalização de interface do usuário da aplicação para um grupo de usuários (AWS Management Console)Como especificar as configurações de personalização de interface do usuário da aplicação para um grupo de usuários (AWS CLI e API da AWS)

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Como personalizar as páginas da Web integradas de cadastro e acesso

Você pode usar o AWS Management Console a AWS CLI ou a API para especificar as configurações de personalização para a experiência de interface do usuário incorporada do aplicativo. É possível fazer upload de uma imagem de logo personalizada para exibição no aplicativo. Também é possível usar Cascading Style Sheets (CSS – Folhas de estilos em cascata) para personalizar a aparência da interface do usuário.

É possível especificar configurações de personalização da interface do usuário da aplicação para um único cliente (com um clientId específico) ou para todos os clientes (definindo o clientId para ALL). Se você especificar ALL, a configuração padrão será usada para todos os clientes que nunca tiveram personalizações da interface do usuário definidas anteriormente. Se você especificar configurações de personalização da interface do usuário para um cliente específico, ele deixará de se enquadrar na configuração ALL.

A solicitação que define a personalização da interface do usuário não deve exceder 135 KB de tamanho. Em casos raros, a soma dos cabeçalhos da solicitação, do arquivo CSS e do logotipo pode exceder 135 KB. O Amazon Cognito codifica o arquivo de imagem em Base64. Isso aumenta o tamanho de uma imagem de 100 KB para 130 KB, mantendo 5 KB para cabeçalhos de solicitação e o CSS. Se a solicitação for muito grande, o SetUICustomization ou a solicitação da API request parameters too large retornará um erro AWS Management Console. Ajuste a imagem do logotipo para não ultrapassar 100 KB e o arquivo CSS para não passar de 3 KB. Você não pode definir o CSS e a personalização do logotipo separadamente.

nota

Para personalizar a interface de usuário, é necessário configurar um domínio para o grupo de usuários.

O Amazon Cognito centraliza o logotipo personalizado acima dos campos de entrada no Endpoint de login.

Escolha um arquivo PNG, JPG ou JPEG que possa ser dimensionado para 350 por 178 pixels para o logotipo personalizado de interface de usuário hospedado. O arquivo de logotipo não pode ter mais de 100 KB de tamanho, ou 130 KB após a codificação do Amazon Cognito em Base64. Para definir um ImageFile em SetUICustomization na API, você pode converter o arquivo em uma string de texto codificada em Base64 ou, na AWS CLI, fornecer um caminho de arquivo e deixar que o Amazon Cognito o codifique para você.

Como especificar personalizações de CSS para a aplicação

Você pode personalizar o CSS para as páginas hospedadas do aplicativo, considerando as seguintes restrições:

  • Você pode usar qualquer um dos nomes de classe CSS a seguir:

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • idpDescription-customizable

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-customizable

    • passwordCheck-valid-customizable

    • passwordCheck-notValid-customizable

    • redirect-customizable

    • socialButton-customizable

    • submitButton-customizable

    • submitButton-customizable:hover

    • textDescription-customizable

  • Os valores de propriedade podem conter HTML, exceto pelos seguintes valores: instruções @import, @supports, @page ou @media ou Javascript.

Você pode personalizar as seguintes propriedades do CSS.

Rótulos

  • font-weight é um múltiplo de 100, entre 100 e 900.

Campos de entrada

  • width é a largura do bloco de contenção em percentual.

  • height é a altura do campo de entrada em pixels (px).

  • color é a cor do texto. Ele pode ser qualquer valor de cor padrão do CSS.

  • background-color é a cor do plano de fundo do campo de entrada. Ele pode ser qualquer valor de cor padrão do CSS.

  • border é um valor padrão de borda do CSS que especifica a largura, a transparência e a cor da borda da janela do seu aplicativo. A largura pode apresentar qualquer valor entre 1 e 100 px. A transparência pode ser sólida ou nenhuma. A cor pode assumir qualquer valor de cor padrão.

Descrições do texto

  • padding-top é a quantidade de preenchimento acima da descrição do texto.

  • padding-bottom é a quantidade de preenchimento abaixo da descrição do texto.

  • display pode ser block ou inline.

  • font-size é o tamanho da fonte para as descrições do texto.

Botão de envio

  • font-size é o tamanho da fonte para o texto do botão.

  • font-weight é a densidade da fonte para o texto do botão: bold, italic ou normal.

  • margin é uma string de quatro valores que indica o tamanho das margens superior, inferior, direita e esquerda para o botão.

  • font-size é o tamanho da fonte para as descrições do texto.

  • width é a largura do texto do botão em porcentagem do bloco.

  • height é a altura do botão em pixels (px).

  • color é a cor do texto do botão. Ele pode ser qualquer valor de cor padrão do CSS.

  • background-color é a cor do plano de fundo do botão. Ele pode ser qualquer valor de cor padrão.

Banner

  • padding é uma string de quatro valores que indica o tamanho dos preenchimentos superior, inferior, direito e esquerdo para o banner.

  • background-color é a cor do plano de fundo do banner. Ele pode ser qualquer valor de cor padrão do CSS.

Sobreposição do botão de envio

  • color é a cor de primeiro plano do botão ao passar por cima dele. Ele pode ser qualquer valor de cor padrão do CSS.

  • background-color é a cor do plano de fundo do botão ao passar por cima dele. Ele pode ser qualquer valor de cor padrão do CSS.

Sobreposição do botão do provedor de identidade

  • color é a cor de primeiro plano do botão ao passar por cima dele. Ele pode ser qualquer valor de cor padrão do CSS.

  • background-color é a cor do plano de fundo do botão ao passar por cima dele. Ele pode ser qualquer valor de cor padrão do CSS.

Verificação de senha não válida

  • color é a cor do texto da mensagem "Password check not valid". Ele pode ser qualquer valor de cor padrão do CSS.

Contexto

  • background-color é a cor do plano de fundo da janela do aplicativo. Ele pode ser qualquer valor de cor padrão do CSS.

Mensagens de erro

  • margin é uma string de quatro valores que indica o tamanho das margens superior, inferior, direita e esquerda.

  • padding é o tamanho do preenchimento.

  • font-size é o tamanho da fonte.

  • width é a largura da mensagem de erro como uma porcentagem do bloco.

  • background é a cor do plano de fundo da mensagem de erro. Ele pode ser qualquer valor de cor padrão do CSS.

  • border é uma string de três valores que especifica a largura, a transparência e a cor da borda.

  • color é a cor do texto da mensagem de erro. Ele pode ser qualquer valor de cor padrão do CSS.

  • box-sizing é usado para indicar ao navegador o que as propriedades de dimensionamento (largura e altura) devem incluir.

Botões do provedor de identidade

  • height é a altura do botão em pixels (px).

  • width é a largura do texto do botão como porcentagem do bloco.

  • text-align é a configuração de alinhamento do texto. Ela pode ser: left, right ou center.

  • margin-bottom é a configuração da margem inferior.

  • color é a cor do texto do botão. Ele pode ser qualquer valor de cor padrão do CSS.

  • background-color é a cor do plano de fundo do botão. Ele pode ser qualquer valor de cor padrão do CSS.

  • border-color é a cor da borda do botão. Ele pode ser qualquer valor de cor padrão do CSS.

Descrições do provedor de identidade

  • padding-top é a quantidade de preenchimento acima da descrição.

  • padding-bottom é a quantidade de preenchimento abaixo da descrição.

  • display pode ser block ou inline.

  • font-size é o tamanho da fonte para as descrições.

Texto legal

  • color é a cor do texto. Ele pode ser qualquer valor de cor padrão do CSS.

  • font-size é o tamanho da fonte.

nota

Quando você personaliza Legal text (Texto legal), você está personalizando a mensagem We won't post to any of your accounts without asking first (Não publicaremos em nenhuma de suas contas sem pedir permissão antes) que é exibida na página de acesso em provedores de identidade sociais.

Logo

  • max-width é a largura máxima como porcentagem do bloco.

  • max-height é a altura máxima como porcentagem do bloco.

Foco do campo de entrada

  • border-color é a cor do campo de entrada. Ele pode ser qualquer valor de cor padrão do CSS.

  • outline é a largura da borda do campo de entrada, em pixels.

Botão social

  • height é a altura do botão em pixels (px).

  • text-align é a configuração de alinhamento do texto. Ela pode ser: left, right ou center.

  • width é a largura do texto do botão como porcentagem do bloco.

  • margin-bottom é a configuração da margem inferior.

Verificação de senha válida

  • color é a cor do texto da mensagem "Password check valid". Ele pode ser qualquer valor de cor padrão do CSS.

Como especificar as configurações de personalização de interface do usuário da aplicação para um grupo de usuários (AWS Management Console)

Você pode usar o AWS Management Console para especificar as configurações de personalização da interface do usuário para o seu aplicativo.

nota

Você pode visualizar a interface do usuário hospedada com as personalizações construindo o URL a seguir, com as especificações para o seu grupo de usuários, e digitando-o em um navegador: https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> É provável que seja necessário esperar em torno de um minuto para atualizar o navegador antes que as alterações feitas no console apareçam.

Seu domínio é exibido na guia App integration (Integração da aplicação) em Domain (Domínio). O ID de cliente da aplicação e o URL de retorno de chamada são exibidos em App client (Cliente da aplicação).

Para especificar as configurações de personalização de interface do usuário do aplicativo

  1. Faça login no console do Amazon Cognito.

  2. No painel de navegação, escolha User Pools (Grupos de usuários) e escolha o grupo de usuários que deseja editar.

  3. Escolha a guia App integration (Integração da aplicação).

  4. Para personalizar as configurações da interface do usuário para todos os clientes da aplicação, localize Hosted UI customization (Personalização da interface do usuário hospedada) e selecione Edit (Editar).

  5. Para personalizar as configurações da interface do usuário para um único cliente da aplicação, localize Clientes da aplicação e selecione o cliente da aplicação que deseja modificar. Depois, localize Personalização da interface do usuário hospedada e selecione Editar. Para trocar um cliente da aplicação da personalização padrão do grupo de usuários para uma personalização específica do cliente, selecione Use client-level settings (Usar configurações por cliente).

  6. Para carregar seu próprio arquivo de imagem de logo, escolha Choose file (Escolher arquivo) ou Replace current file (Substituir arquivo atual).

  7. Para personalizar o CSS da interface do usuário hospedada, baixe CSS template.css e modifique o modelo com os valores que deseja personalizar. Somente as chaves incluídas no modelo podem ser usadas com a interface do usuário hospedada. As chaves CSS adicionadas não serão refletidas na interface do usuário. Após personalizar o arquivo CSS, escolha Choose file (Escolher arquivo) ou Replace current file (Substituir arquivo atual) para carregar seu arquivo CSS personalizado.

Como especificar as configurações de personalização de interface do usuário da aplicação para um grupo de usuários (AWS CLI e API da AWS)

Use os comandos a seguir para especificar as configurações de personalização da interface do usuário para o seu grupo de usuários.

Para obter as configurações de personalização da interface do usuário para uma interface do usuário de aplicação integrada do grupo de usuários, use as operações de API a seguir.
Para definir as configurações de personalização da interface do usuário para uma interface do usuário de aplicação integrada do grupo de usuários, use as operações de API a seguir.

  • AWS CLI do arquivo de imagem: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file fileb://"<path-to-logo-image-file>" --css ".label-customizable{ color: <color>;}"

  • AWS CLI com imagem codificada como texto binário em Base64: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <base64-encoded-image-file> --css ".label-customizable{ color: <color>;}"

  • API da AWS: SetUICustomization