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á. # Personalizar identidade visual de IU hospedada (clássica) Você pode usar a Console de gerenciamento da AWS, ou a API AWS CLI ou, para especificar as configurações clássicas de personalização para a interface do usuário hospedada. É possível fazer upload de uma imagem de logo personalizada para exibição no aplicativo. Também é possível aplicar algumas opções de Cascading Style Sheets (CSS) à aparência da IU. Você pode personalizar os padrões da IU e substituir [clientes da aplicação](cognito-terms.md#term-appclient) individuais por configurações específicas. O Amazon Cognito aplica a configuração padrão a cada cliente de aplicação que não tem configurações no nível do cliente. No console do Amazon Cognito e nas solicitações de API, a solicitação que define a personalização da IU não deve exceder 135 KB. 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, a solicitação de `SetUICustomization` API Console de gerenciamento da AWS ou sua solicitação retornará um `request parameters too large` erro. 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. ## Especificar um logotipo personalizado em uma identidade visual clássica O Amazon Cognito centraliza o logotipo personalizado acima dos campos de entrada no [Endpoint de login](login-endpoint.md). 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` [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)in na API, converta seu arquivo em uma string de texto codificada em Base64 ou, no AWS CLI, forneça um caminho de arquivo e deixe o Amazon Cognito codificá-lo para você. ## Especificar personalizações de CSS em uma identidade visual clássica 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. + **color** é a cor do texto. Deve ser um [valor de cor CSS válido](https://www.w3schools.com/cssref/css_colors_legal.php). **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. + **color** é a cor do texto. Deve ser um [valor de cor CSS válido](https://www.w3schools.com/cssref/css_colors_legal.php). **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. + **color** é a cor do texto para os cabeçalhos das seções do IdP, por exemplo, **Fazer login com seu ID corporativo**. Deve ser um [valor de cor CSS válido](https://www.w3schools.com/cssref/css_colors_legal.php). **Texto legal** + **color** é a cor do texto. Ele pode ser qualquer valor de cor padrão do CSS. + **font-size** é o tamanho da fonte. 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. + **background-color** é a cor do plano de fundo para logs com seções transparentes. Deve ser um [valor de cor CSS válido](https://www.w3schools.com/cssref/css_colors_legal.php). **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. ## Personalizando a interface de usuário hospedada com a marca clássica no Console de gerenciamento da AWS Você pode usar o Console de gerenciamento da AWS para especificar as configurações de personalização da interface do usuário para 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:///login?response_type=code&client_id=&redirect_uri=` É 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](https://console.aws.amazon.com/cognito/home). 1. No painel de navegação, escolha **User Pools** (Grupos de usuários) e escolha o grupo de usuários que deseja editar. 1. [Crie um domínio](cognito-user-pools-assign-domain.md) na guia **Domínio** ou atualize seu domínio existente. Na **Versão de marca**, defina seu domínio para usar a **IU hospedada (clássica)**. 1. Clique no menu **Login gerenciado**. 1. Para personalizar as configurações da IU para todos os clientes da aplicação, localize **Estilo** em **Configurações da interface de usuário hospedada** e selecione **Editar**. 1. Para personalizar as configurações da IU para um único cliente de aplicação, acesse o menu **Clientes da aplicação** e selecione o cliente de aplicação que deseja modificar. Depois, localize **Estilo de interface de usuário hospedada (clássico)** e selecione **Substituir**. Selecione **Editar**. 1. Para carregar seu próprio arquivo de imagem de logo, escolha **Choose file** (Escolher arquivo) ou **Replace current file** (Substituir arquivo atual). 1. 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. ## Personalizando a interface de usuário hospedada com a marca clássica na API de grupos de usuários e com o AWS CLI 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.** + AWS CLI: `aws cognito-idp get-ui-customization` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html) **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 --client-id --image-file fileb://"" --css ".label-customizable{ color: ;}"` + AWS CLI com imagem codificada como texto binário Base64: `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file --css ".label-customizable{ color: ;}"` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)