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á. # 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.