O editor de identidade visual e a identidade visual de login gerenciado

Texto e localização Configuração rápida Configurações detalhadas Operações de API

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.

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

Crie um domínio na guia Domínio ou atualize seu domínio existente. Em Versão de marca, defina seu domínio para usar o Login gerenciado.
Exclua o estilo de cliente de aplicação existente, se houver.
1. No menu Clientes da aplicação, selecione seu cliente de aplicação.
2. Em Estilo de login gerenciado, selecione o estilo atribuído ao seu cliente de aplicação.
3. Selecione Excluir estilo. Confirme a seleção.
Navegue até o menu Login gerenciado no grupo de usuários. Siga as instruções para selecionar um plano de recursos 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.
Em Estilos, selecione Criar um estilo.
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.
O console do Amazon Cognito inicia o editor de identidade visual.
Escolha uma guia na qual deseja começar a editar ou selecione Iniciar editor e acesse a configuração rápida. 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.
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.

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.

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

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, você pode 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 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 CreateManagedLoginBrandinge. UpdateManagedLoginBranding 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, 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 DeleteManagedLoginBrandinge atribua um novo estilo comCreateManagedLoginBranding. 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 sobre como gerar solicitações programáticas para configurar um estilo de identidade visual.

Ativos de imagem

CreateManagedLoginBrandinge UpdateManagedLoginBrandinginclua 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. Nesse 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_ICO	ico
FAVICON_SVG	svg
EMAIL_GRAPHIC	png, svg, jpeg
SMS_GRAPHIC	png, svg, jpeg
AUTH_APP_GRAPHIC	png, svg, jpeg
PASSWORD_GRAPHIC	png, svg, jpeg
PASSKEY_GRAPHIC	png, svg, jpeg
PAGE_HEADER_LOGO	png, svg, jpeg
PAGE_HEADER_BACKGROUND	png, svg, jpeg
PAGE_FOOTER_LOGO	png, svg, jpeg
PAGE_FOOTER_BACKGROUND	png, svg, jpeg
PAGE_BACKGROUND	png, svg, jpeg
FORM_BACKGROUND	png, svg, jpeg
FORM_LOGO	png, svg, jpeg
IDP_BUTTON_ICON	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 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

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.
Registre o ID do cliente de aplicação para o qual você criou o estilo, por exemplo, 1example23456789.
Recupere as configurações do estilo de marca com uma solicitação de DescribeManagedLoginBrandingByClientAPI ReturnMergedResources definida como. true Veja a seguir um exemplo de corpo da solicitação .
```
{
   "ClientId": "1example23456789",
   "ReturnMergedResources": true,
   "UserPoolId": "us-east-1_EXAMPLE"
}
```
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.
2. Para substituir imagens, substitua o valor Bytes pelos dados binários codificados em Base64 de cada arquivo de imagem.
3. 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.
Use o corpo de resposta atualizado em uma UpdateManagedLoginBrandingsolicitação CreateManagedLoginBrandingor. 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.

Atenção O Javascript está desativado ou não está disponível no seu navegador.

Para usar a documentação da AWS, o Javascript deve estar ativado. Consulte as páginas de Ajuda do navegador para obter instruções.

Convenções do documento

Identidade visual e personalização

Identidade visual de IU hospedada (clássica)