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á.
# Aplicar a identidade visual às páginas de login gerenciado
É recomendável proporcionar uma experiência de usuário consistente entre o serviço de autenticação e a aplicação. Você pode atingir essa meta com formulários personalizados e operações de API de back-end em um AWS SDK ou com login gerenciado. O login gerenciado e a IU hospedada clássica são frontends da web para o componente da sua aplicação que fornece autenticação com grupos de usuários. Para sincronizar os serviços de autenticação gerenciada com a UX da aplicação, existem duas opções de personalização: o editor de identidade visual e a identidade visual de IU hospedada. Escolha a experiência mais indicada para você no console do Amazon Cognito e com as operações de API do grupo de usuários.
**O editor de identidade visual**
O [editor de identidade visual](managed-login-brandingeditor.md) é a mais nova opção de personalização para a mais nova experiência de IU de grupos de usuários, o [login gerenciado](cognito-user-pools-managed-login.md). O editor de identidade visual é um editor visual no-code para estilos e ativos de login gerenciado e um conjunto de operações de API para configuração programática de inúmeras opções de configuração. Os grupos de usuários configurados com um [domínio](cognito-user-pools-assign-domain.md) e um login gerenciado exibem automaticamente a versão de designer de marcas de suas páginas de login.
**Identidade visual de IU hospedada (clássica)**
A [experiência de marca da IU (clássica)](hosted-ui-classic-branding.md) tem duas opções: modificar um arquivo Cascading Style Sheets (CSS) com um conjunto fixo de opções de estilo e adicionar uma imagem de logotipo personalizada. Você pode definir essas opções no console do Amazon Cognito ou com a operação [Set UICustomization](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html) API. Quando o serviço foi lançado, o Amazon Cognito tinha somente essa opção. Os grupos de usuários configurados com um [domínio](cognito-user-pools-assign-domain.md) e a versão de marca da IU hospedada exibem automaticamente a versão clássica de suas páginas de login. Seu [plano de recursos](cognito-sign-in-feature-plans.md) também pode ser compatível somente com a interface hospedada.
**nota**
O editor de identidade visual e a experiência de identidade visual clássica modificam as propriedades visuais do seu serviço de autenticação hospedado. Atualmente, não é possível modificar o texto exibido em suas páginas de login gerenciado, exceto para aplicar a localização em um dos vários idiomas. Para obter mais informações sobre localização, consulte [Managed login localization](cognito-user-pools-managed-login.md#managed-login-localization).
## Escolher uma experiência de identidade visual e atribuir estilos
No console do Amazon Cognito, novos grupos de usuários usam como padrão a experiência de identidade visual de **login gerenciado**. Os grupos de usuários configurados antes da disponibilização do login gerenciado terão a identidade visual de **IU hospedada (clássica)**. Você pode alternar entre a identidade visual de login gerenciado e de IU hospedada. Quando você altera sua **versão de marca**, o Amazon Cognito aplica imediatamente a alteração às páginas interativas do domínio do seu grupo de usuários. Com o login gerenciado e a IU hospedada, seu grupo de usuários pode ter um estilo para cada cliente de aplicação.
Cada cliente de aplicação pode ter um *estilo* de identidade visual distinto, mas um domínio do grupo de usuários serve tanto para o login gerenciado quanto para a IU hospedada. Um estilo é o conjunto de configurações de personalização aplicadas a um cliente de aplicação. Você pode configurar um [domínio personalizado](cognito-user-pools-add-custom-domain.md) e um [domínio de prefixo](cognito-user-pools-assign-domain-prefix.md) por grupo de usuários. Você pode atribuir diferentes versões de marca aos seus domínios personalizados e de prefixo. No entanto, um domínio de prefixo não é totalmente funcional quando você também tem um domínio personalizado; os endpoints de descoberta `.well-known` do OIDC apresentam *somente* caminhos de domínio personalizados. Você só pode usar o domínio de prefixo para operações que não exijam descoberta de endpoint (`openid-configuration`) em um grupo de usuários com essa configuração. Devido a essas propriedades dos grupos de usuários, é possível escolher efetivamente uma versão de marca por grupo de usuários.
Você pode atribuir estilos aos clientes da aplicação em um grupo de usuários em que um domínio é definido para a versão da marca de login gerenciado. Estilos são um conjunto de configurações visuais composto por arquivos de imagem, opções de exibição e valores CSS. Quando você atribui um estilo a um cliente de aplicação, o Amazon Cognito envia imediatamente suas atualizações para suas páginas de login interativas. O Amazon Cognito exibe suas páginas interativas com a versão de identidade visual escolhida e a personalização que você aplicou a ela.
### Atualizar e excluir estilos
Ao criar um estilo, você o vincula a um cliente de aplicação. Para alterar uma atribuição de estilo para um cliente de aplicação, primeiro exclua o estilo original. No momento, não é possível copiar configurações entre estilos. Isso deve ser feito de maneira programática. Para replicar as configurações entre estilos e clientes de aplicativos, obtenha as configurações de um estilo com a operação da [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html)API e aplique-as com [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)ou [UpdateManagedLoginBranding](https://docs.aws.amazon.com/). Você não pode alterar os estilos atribuídos de um cliente de aplicação. Você pode somente excluir o original e definir um novo. Para obter mais informações sobre como gerenciar estilos com operações de API e SDK, consulte [Operações de API e SDK para identidade visual de login gerenciado](managed-login-brandingeditor.md#branding-designer-api).
**nota**
As solicitações programáticas que criam ou atualizam o estilo de identidade visual devem ter um tamanho de solicitação não superior a 2 MB. Se a solicitação for maior que esse limite, divida-a em várias solicitações `UpdateManagedLoginBranding` para grupos de parâmetros que não excedam o tamanho máximo da solicitação. Essas solicitações não resultam na definição de parâmetros não especificados como padrão, portanto, você pode enviar solicitações parciais sem afetar as configurações existentes.
Para excluir um estilo no console do Amazon Cognito, acesse o menu **Login gerenciado**. Em **Estilos**, escolha o estilo que deseja excluir e clique em **Excluir estilo**.
Em linhas gerais, o processo de atribuição de identidade visual a um domínio consiste nas etapas a seguir.
1. [Crie um domínio e defina a versão da marca](cognito-user-pools-assign-domain.md).
1. Crie um estilo de identidade visual e atribua-o a um cliente de aplicação.
**Como atribuir um estilo a um cliente de aplicação**
1. No menu **Domínio** do grupo de usuários, crie um domínio e defina a **Versão de marca** como **Login gerenciado**.
1. Acesse o menu **Login gerenciado**. Em **Estilos**, selecione **Criar um estilo**.
1. Escolha o cliente de aplicação ao qual deseja atribuir seu estilo ou crie um novo [cliente de aplicação](user-pool-settings-client-apps.md).
1. Para começar a definir suas configurações de marca, selecione **Iniciar editor de identidade visual**.
**Topics**
+ [Escolher uma experiência de identidade visual e atribuir estilos](#managed-login-branding-choose)
+ [O editor de identidade visual e a identidade visual de login gerenciado](managed-login-brandingeditor.md)
+ [Personalizar identidade visual de IU hospedada (clássica)](hosted-ui-classic-branding.md)
# O editor de identidade visual e a identidade visual de login gerenciado
O editor de identidade visual é uma ferramenta visual de design e edição para suas páginas da web de login gerenciado. Ele está integrado ao console do Amazon Cognito. No editor de identidade visual, você começa com uma prévia de suas páginas de login e pode prosseguir para uma opção de configuração rápida ou uma visualização detalhada com opções avançadas. É possível modificar e visualizar parâmetros de estilo ou adicionar uma imagem de fundo e um logotipo personalizados. Também é possível configurar o modo claro e o modo escuro.
![\[Uma prévia do editor de identidade visual para grupos de usuários do Amazon Cognito.\]](http://docs.aws.amazon.com/pt_br/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png)
Para começar, crie um estilo que você possa aplicar ao seu grupo de usuários ou a um cliente de aplicação.
**Como começar a usar o editor de identidade visual**
1. [Crie um domínio](cognito-user-pools-assign-domain.md) na guia **Domínio** ou atualize seu domínio existente. Em **Versão de marca**, defina seu domínio para usar o **Login gerenciado**.
1. Exclua o estilo de cliente de aplicação existente, se houver.
1. No menu **Clientes da aplicação**, selecione seu cliente de aplicação.
1. Em **Estilo de login gerenciado**, selecione o estilo atribuído ao seu cliente de aplicação.
1. Selecione **Excluir estilo**. Confirme a seleção.
1. Acesse o menu **Login gerenciado** no grupo de usuários. Siga as instruções para selecionar um [plano de recursos](cognito-sign-in-feature-plans.md) que inclua login gerenciado, caso ainda não o tenha feito. Você também pode selecionar **Visualizar este recurso** se quiser conferir o editor de identidade visual sem fazer alterações.
1. Em **Estilos**, selecione **Criar um estilo**.
1. Escolha o cliente de aplicação ao qual deseja atribuir seu estilo e selecione **Criar**. Você também pode criar um novo cliente de aplicação.
1. O console do Amazon Cognito inicia o editor de identidade visual.
1. Escolha uma guia na qual deseja começar a editar ou selecione **Iniciar editor** e acesse a [configuração rápida](#branding-designer-quick-setup). As seguintes guias estão disponíveis:
**Demonstração**
Veja como suas seleções atuais aparecem em suas páginas de login gerenciado.
**Fundamentos**
Defina um tema geral, configure links para provedores de identidades externos e estilize os campos do formulário.
**Componentes**
Configure estilos para cabeçalhos, rodapés e elementos individuais da IU.
1. Para definir as configurações iniciais, acesse a configuração rápida. Selecione **Alterar categoria de configurações** e clique em **Configuração rápida**. Ao selecionar **Prosseguir**, o editor de identidade visual será iniciado com um conjunto de opções básicas para você configurar.
## Texto e localização
Não é possível modificar nem localizar texto no editor de identidade visual. Em vez disso, adicione um parâmetro de consulta `lang` ao URL que você distribui aos usuários. Esse parâmetro fará com que suas páginas de login gerenciado sejam localizadas em um dos vários idiomas disponíveis. Para obter mais informações, consulte [Managed login localization](cognito-user-pools-managed-login.md#managed-login-localization).
## Configuração rápida
O botão **Iniciar editor de identidade visual** carrega um editor visual para a configuração do login gerenciado, onde você pode selecionar entre diversas opções básicas de personalização. Conforme você faz as seleções, o Amazon Cognito exibe as alterações do login gerenciado em uma janela de pré-visualização. Para retornar ao menu de configurações detalhadas, clique no botão **Alterar categoria de configurações**.
**Qual deve ser a aparência geral?**
Defina as configurações básicas do tema para o login gerenciado.
**Modo de exibição**
Escolha um modo claro, escuro ou uma experiência adaptável para seu login gerenciado. As configurações adaptáveis se referem à preferência do navegador do usuário quando o Amazon Cognito exibe o login gerenciado. Ao escolher um modo adaptável ao navegador, você pode escolher cores e imagens de logotipo diferentes para os modos claro e escuro.
**Espaçamento**
Defina o espaçamento padrão entre os elementos na página.
**Raio da borda**
Defina a profundidade de arredondamento da borda externa dos elementos.
**Qual deve ser a aparência do plano de fundo da página?**
**Tipo de plano de fundo**
A caixa de seleção **Mostrar imagem** indica se você deseja uma imagem de fundo ou definir uma cor de fundo sólida.
1. Para usar uma imagem, selecione **Mostrar imagem** e escolha uma imagem de fundo para os modos claro e escuro. Você também pode definir uma **Cor do plano de fundo da página** no modo escuro e no modo claro para áreas do plano de fundo que não estão cobertas pela imagem.
1. Para usar somente uma cor para o plano de fundo, desmarque **Mostrar imagem** e escolha a **Cor do plano de fundo da página** no modo claro e no modo escuro.
**Qual deve ser a aparência dos formulários?**
Defina as configurações dos elementos do formulário do login gerenciado. Exemplos de elementos do formulário incluem solicitações de login e código.
**Alinhamento horizontal**
Defina o alinhamento horizontal dos campos do formulário.
**Logotipo do formulário**
Defina o posicionamento da imagem do logotipo.
**Imagem do logotipo**
Escolha um arquivo de imagem de logotipo para incluir no elemento do formulário nos modos claro e escuro. Para carregar uma imagem, selecione o menu suspenso **Imagem do logotipo**, clique em **Adicionar novo ativo** e adicione um arquivo de logotipo.
**Cor primária da identidade visual**
Defina uma cor de tema para os modos claro e escuro. Essa cor será aplicada como cor de fundo a todos os elementos classificados como primários.
**Qual deve ser a aparência dos cabeçalhos?**
Escolha se você deseja incluir um cabeçalho em suas páginas de login gerenciado. O cabeçalho pode conter uma imagem de logotipo.
**Logotipo do cabeçalho**
Defina a posição da imagem do logotipo no cabeçalho.
**Imagem do logotipo**
Escolha a posição do logotipo e um arquivo de imagem do logotipo para incluir no cabeçalho. Para carregar uma imagem, selecione o menu suspenso **Imagem do logotipo**, clique em **Adicionar novo ativo** e adicione um arquivo de logotipo.
**Cor do plano de fundo do cabeçalho**
Defina as cores dos modos claro e escuro para o plano de fundo do cabeçalho.
## Configurações detalhadas
Na visualização de configurações detalhadas, você pode modificar componentes individuais na **Fundação** e nos **Componentes**. A guia **Pré-visualização** exibe uma prévia do login gerenciado no contexto atual com suas personalizações.
![\[Uma Console de gerenciamento da AWS captura de tela da configuração detalhada dos componentes de login gerenciado.\]](http://docs.aws.amazon.com/pt_br/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png)
Para acessar o editor visual de um componente, selecione o ícone de edição no bloco do componente. No editor do estúdio de temas, é possível alternar entre os componentes com o botão **Alterar categoria de configuração**.
### Fundamentos
**Estilo da aplicação**
Configure os aspectos básicos da configuração de login gerenciado. Esta categoria tem configurações para o tema geral, espaçamento de texto e cabeçalho e rodapé da página.
**Modo de exibição**
Escolha um modo claro, escuro ou uma experiência adaptável para suas páginas de login gerenciado. Ao escolher um modo adaptável ao navegador, você pode escolher cores e imagens de logotipo diferentes para os modos claro e escuro.
**Espaçamento**
Defina o espaçamento padrão entre os elementos na página.
**Comportamento de autenticação**
Configure estilos para os botões que conectam seus usuários a provedores de identidade externos (IdPs). Esta seção inclui a opção **Entrada de pesquisa de domínio** para que o login gerenciado solicite aos usuários um endereço de e-mail e os associe ao [identificador do provedor de identidades SAML](cognito-user-pools-managing-saml-idp-naming.md) correspondente.
**Comportamento do formulário**
Configure estilos para formulários de entrada: posicionamento de entradas, cores e alinhamento de elementos.
### Componentes
**Botões**
Estilos para botões que o Amazon Cognito exibe em páginas de login gerenciado.
**Divisor**
Estilos para linhas divisórias e limites entre elementos de login gerenciado, como o formulário de entrada e o seletor de login de provedor externo.
**Suspenso**
Estilos para menus suspensos.
**Favicon**
Estilos para a imagem que o Amazon Cognito fornece para o ícone de guia e marcador.
**Anéis de foco**
Estilos para os destaques que indicam uma entrada atualmente selecionada.
**Contêiner de formulário**
Estilos para os elementos que delimitam um formulário.
**Rodapé global**
Estilos para o rodapé que o Amazon Cognito exibe na parte inferior das páginas de login gerenciado.
**Cabeçalho global**
Estilos para o cabeçalho que o Amazon Cognito exibe na parte superior das páginas de login gerenciado.
**Indicações**
Estilos para mensagens de erro e sucesso.
**Controles de opções**
Estilos para caixas de seleção, seleções múltiplas e outros prompts de entrada.
**Plano de fundo da página**
Estilos para o plano de fundo geral do login gerenciado.
**Entradas**
Estilos para prompts de entrada de campo de formulário.
**Link**
Estilos para hiperlinks em páginas de login gerenciado.
**Texto para página**
Estilos para texto na página.
**Texto para campo**
Estilos para o texto ao redor dos campos de formulário.
## Operações de API e SDK para identidade visual de login gerenciado
Você também pode aplicar a marca a um estilo de login gerenciado com as operações de API [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)e. [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html) Essas operações são ideais para criar versões idênticas ou ligeiramente modificadas de um estilo de identidade visual para outra aplicação, cliente ou grupo de usuários. Consulte a marca de login gerenciado de um estilo existente com a operação da API [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html), modifique a saída conforme necessário e aplique-a a outro recurso.
A operação `UpdateManagedLoginBranding` não altera o cliente de aplicação ao qual seu estilo é aplicado. Ela somente atualiza o estilo existente atribuído a um cliente de aplicação. Para substituir completamente o estilo de um cliente de aplicativo, exclua o estilo existente com [DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html)e atribua um novo estilo com`CreateManagedLoginBranding`. No console do Amazon Cognito, o mesmo se aplica: você deve excluir o estilo existente e criar um novo.
Configurar a identidade visual de login gerenciado em uma solicitação de API ou SDK exige que suas configurações sejam incorporadas em um arquivo JSON convertido em um tipo de dados `Document`. Veja a seguir uma orientação sobre imagens que você pode adicionar e como gerar solicitações programáticas para configurar um estilo de identidade visual.
### Ativos de imagem
[CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)e [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html)inclua um `Assets` parâmetro. Esse parâmetro é uma matriz de arquivos de imagem em formato binário codificado em base64.
**nota**
As solicitações programáticas que criam ou atualizam o estilo de identidade visual devem ter um tamanho de solicitação não superior a 2 MB. Os ativos em sua solicitação podem fazer com que ela exceda esse limite. Se for o caso, divida sua solicitação em várias solicitações `UpdateManagedLoginBranding` para grupos de parâmetros que não excedam o tamanho máximo da solicitação. Essas solicitações não resultam na definição de parâmetros não especificados como padrão, portanto, você pode enviar solicitações parciais sem afetar as configurações existentes.
Alguns ativos têm limitações quanto aos tipos de arquivo que você pode enviar.
****
| Ativo | Extensões de arquivo aceitas |
| --- | --- |
| FAVICON\$1ICO | ico |
| FAVICON\$1SVG | svg |
| EMAIL\$1GRAPHIC | png, svg, jpeg |
| SMS\$1GRAPHIC | png, svg, jpeg |
| AUTH\$1APP\$1GRAPHIC | png, svg, jpeg |
| PASSWORD\$1GRAPHIC | png, svg, jpeg |
| PASSKEY\$1GRAPHIC | png, svg, jpeg |
| PAGE\$1HEADER\$1LOGO | png, svg, jpeg |
| PAGE\$1HEADER\$1BACKGROUND | png, svg, jpeg |
| PAGE\$1FOOTER\$1LOGO | png, svg, jpeg |
| PAGE\$1FOOTER\$1BACKGROUND | png, svg, jpeg |
| PAGE\$1BACKGROUND | png, svg, jpeg |
| FORM\$1BACKGROUND | png, svg, jpeg |
| FORM\$1LOGO | png, svg, jpeg |
| IDP\$1BUTTON\$1ICON | ico, svg |
Os arquivos do tipo SVG são compatíveis com os atributos e elementos a seguir.
------
#### [ Attributes ]
```
accent-height, accumulate, additivive, alignment-baseline, ascent, attributename, attributetype, azimuth, basefrequency, baseline-shift, begin, bias, by, class, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cx, cy, d, dx, dy, diffuseconstant, direction, display, divisor, dur, edgemode, elevation, end, fill, fill-opacity, fill-rule, filter, filterunits, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, fx, fy, g1, g2, glyph-name, glyphref, gradientunits, gradienttransform, height, href, id, image-rendering, in, in2, k, k1, k2, k3, k4, kerning, keypoints, keysplines, keytimes, lang, lengthadjust, letter-spacing, kernelmatrix, kernelunitlength, lighting-color, local, marker-end, marker-mid, marker-start, markerheight, markerunits, markerwidth, maskcontentunits, maskunits, max, mask, media, method, mode, min, name, numoctaves, offset, operator, opacity, order, orient, orientation, origin, overflow, paint-order, path, pathlength, patterncontentunits, patterntransform, patternunits, points, preservealpha, preserveaspectratio, r, rx, ry, radius, refx, refy, repeatcount, repeatdur, restart, result, rotate, scale, seed, shape-rendering, specularconstant, specularexponent, spreadmethod, stddeviation, stitchtiles, stop-color, stop-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke, stroke-width, style, surfacescale, tabindex, targetx, targety, transform, text-anchor, text-decoration, text-rendering, textlength, type, u1, u2, unicode, values, viewbox, visibility, vert-adv-y, vert-origin-x, vert-origin-y, width, word-spacing, wrap, writing-mode, xchannelselector, ychannelselector, x, x1, x2, xmlns, y, y1, y2, z, zoomandpan
```
------
#### [ Elements ]
```
svg, a, altglyph, altglyphdef, altglyphitem, animatecolor, animatemotion, animatetransform, audio, canvas, circle, clippath, defs, desc, ellipse, filter, font, g, glyph, glyphref, hkern, image, line, lineargradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialgradient, rect, stop, style, switch, symbol, text, textpath, title, tref, tspan, video, view, vkern, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence
```
------
### Ferramentas para operações de identidade visual de login gerenciado
O Amazon Cognito gerencia um arquivo no [formato de esquema JSON](https://json-schema.org/docs) para o objeto de configurações de identidade visual de login gerenciado. Veja a seguir como atualizar programaticamente seu estilo de identidade visual.
**Como atualizar a identidade visual na API de grupos de usuários**
1. No console do Amazon Cognito, crie um estilo padrão de identidade visual de login gerenciado no menu **Login gerenciado** do grupo de usuários. Atribua-o a um cliente de aplicação.
1. Registre o ID do cliente de aplicação para o qual você criou o estilo, por exemplo, `1example23456789`.
1. Recupere as configurações do estilo de marca com uma solicitação de [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html)API `ReturnMergedResources` definida como. `true` Veja a seguir um exemplo de corpo da solicitação .
```
{
"ClientId": "1example23456789",
"ReturnMergedResources": true,
"UserPoolId": "us-east-1_EXAMPLE"
}
```
1. Modifique a saída `DescribeManagedLoginBrandingByClient` com suas personalizações.
1. O corpo da resposta está envolvido em um elemento `ManagedLoginBranding` que não faz parte da sintaxe das operações de criação e atualização. Remova esse nível superior do objeto JSON.
1. Para substituir imagens, substitua o valor `Bytes` pelos dados binários codificados em Base64 de cada arquivo de imagem.
1. Para atualizar as configurações, modifique a saída do objeto `Settings` e inclua-a em sua próxima solicitação. O Amazon Cognito ignora os valores no objeto `Settings` que não estejam no esquema recebido na resposta da API.
1. Use o corpo de resposta atualizado em uma [UpdateManagedLoginBranding](https://docs.aws.amazon.com/)solicitação [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)or. Se essa solicitação exceder 2 MB, separe-a em várias solicitações. Essas operações funcionam em um modelo `PATCH` no qual as configurações originais permanecem inalteradas, a menos que você especifique o contrário.
# 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)