El editor de marca y la personalización del inicio de sesión administrado

Texto y localización Configuración rápida Configuración detallada Operaciones de la API

El editor de marcas es una herramienta visual de diseño y edición para sus páginas web de inicio de sesión administrado. Está incluido en la consola de Amazon Cognito. En el editor de marcas, puede empezar con una vista previa de sus páginas de inicio de sesión y pasar a una opción de configuración rápida o a una vista detallada con opciones avanzadas. Puede modificar y previsualizar los parámetros de estilo o añadir una imagen de fondo y un logotipo personalizados. Puede configurar el modo claro y el modo oscuro.

Vista previa del editor visual en el editor de marcas para los grupos de usuarios de Amazon Cognito

Para empezar, cree un estilo que pueda aplicar a su grupo de usuarios o a un cliente de aplicación.

Cómo empezar a usar el editor de marcas

Cree un dominio desde la pestaña Dominio o actualice su dominio actual. En Versión de marca, configure el dominio para que utilice el Inicio de sesión administrado.
Elimine el estilo de cliente de aplicación existente si lo hubiera.
1. En el menú Clientes de aplicación, seleccione el cliente de aplicación.
2. En Estilo de inicio de sesión administrado, seleccione el estilo asignado a su cliente de aplicación.
3. Elija Eliminar estilo. Confirme la opción elegida.
Navegue hasta el menú Inicio de sesión administrado en su grupo de usuarios. Si aún no lo ha hecho, siga las instrucciones para seleccionar un plan de características que incluya el inicio de sesión administrado. También puede seleccionar Vista previa de esta característica si quiere echar un vistazo al editor de marcas sin hacer cambios.
En Estilos, seleccione Crear un estilo.
Elija el cliente de aplicación al que desea asignar su estilo y seleccione Crear. También puede crear un cliente de aplicación nuevo.
La consola de Amazon Cognito lanza el editor de marcas.
Elija la pestaña en la que desee empezar a editar o seleccione Iniciar el editor e introduzca la configuración rápida. Las siguientes pestañas están disponibles:

Vista previa

Compruebe cuáles son sus selecciones actuales en las páginas de inicio de sesión administrado.

Bases

Establezca un tema general, configure los enlaces a proveedores de identidad externos y aplique estilos a los campos de los formularios.

Componentes

Configure estilos para encabezados, pies de página y elementos individuales de la interfaz de usuario.
Para tomar decisiones sobre la configuración inicial, introduzca la configuración rápida. Seleccione Cambiar la categoría de configuración y elija Configuración rápida. Al seleccionar Proceder, se abre el editor de marcas con un conjunto de opciones básicas que puede configurar.

Texto y localización

No es posible modificar ni localizar el texto en el editor de marcas. En lugar de eso, añada un parámetro de consulta lang a la URL que distribuye a los usuarios. Este parámetro hace que las páginas de inicio de sesión administrado se traduzcan a uno de los varios idiomas disponibles. Para obtener más información, consulte Localización de inicio de sesión administrado.

Configuración rápida

El botón Iniciar el editor de marcas carga un editor visual para la configuración de inicio de sesión gestionado, en el que puede seleccionar entre una variedad de opciones de personalización principales. A medida que realiza selecciones, Amazon Cognito muestra los cambios de inicio de sesión administrados en una ventana de vista previa. Para volver al menú de configuración detallado, seleccione el botón Cambiar la categoría de configuración.

En términos generales, ¿cuál debería ser el aspecto y qué sensación debería transmitir?

Configure los ajustes básicos del tema para el inicio de sesión administrado.

Modo de visualización: Elija una experiencia de modo claro, modo oscuro o adaptativa para su inicio de sesión administrado. La configuración adaptativa depende de la preferencia del navegador del usuario cuando Amazon Cognito procesa el inicio de sesión administrado. Si elige un modo adaptable al navegador, puede elegir diferentes colores e imágenes de logotipos para el modo claro y oscuro.
Spacing: Establezca el espaciado predeterminado entre los elementos de la página.
Radio del borde: Defina la profundidad de redondeo del borde exterior de los elementos.

¿Cómo debe quedar el fondo de la página?

Tipo de fondo

La casilla Mostrar imagen indica si desea una imagen de fondo o establecer un color de fondo sólido.

Para usar una imagen, seleccione Mostrar imagen y elija una imagen de fondo para los modos claro y oscuro. También puede establecer un Color de fondo de la página en modo oscuro y modo claro para las áreas del fondo que no estén cubiertas por la imagen.
Para usar solo un color de fondo, quite la selección de Mostrar imagen y elija un color de fondo de la página en modo claro y oscuro.

¿Qué aspecto deben tener los formularios?

Configure los ajustes de los elementos del formulario del inicio de sesión administrado. Algunos ejemplos de elementos de formulario son las solicitudes de inicio de sesión y las solicitudes de código.

Alineación horizontal: Establezca la alineación horizontal de los campos del formulario.
Logotipo del formulario: Establezca el posicionamiento de la imagen de su logotipo.
Imagen del logotipo: Elija un archivo de imagen del logotipo para incluirlo en el elemento del formulario para los modos claro y oscuro. Para cargar una imagen, seleccione el menú desplegable Imagen del logotipo, seleccione Agregar nuevo activo y añada un archivo de logotipo.
Color de marca principal: Establezca un color de tema para los modos claro y oscuro. Este color se aplicará como color de fondo a todos los elementos clasificados como primarios.

¿Qué aspecto deben tener los encabezados?

Elija si quiere incluir un encabezado en sus páginas de inicio de sesión administrado. El encabezado puede contener una imagen de logotipo.

Logotipo del encabezado: Establezca la posición de la imagen del logotipo en su encabezado.
Imagen del logotipo: Elija una posición del logotipo y un archivo de imagen del logotipo para incluirlos en el encabezado. Para cargar una imagen, seleccione el menú desplegable Imagen del logotipo, seleccione Agregar nuevo activo y añada un archivo de logotipo.
Color de fondo del encabezado: Configure los colores de los modos claro y oscuro para el fondo del encabezado.

Configuración detallada

En la vista de configuración detallada, puede modificar los componentes individuales de la base y los componentes. La pestaña Vista previa muestra una vista previa del inicio de sesión administrado en el contexto actual con sus personalizaciones.

Para acceder al editor visual de un componente, elija el icono de edición en el mosaico del componente. Desde el editor del estudio de temas, puede cambiar de un componente a otro con el botón Cambiar la categoría de configuración.

Bases

Estilos de aplicación

Configure los aspectos básicos de su configuración de inicio de sesión administrado. Esta categoría tiene ajustes para el tema general, el espaciado del texto y el encabezado y el pie de página.

Modo de visualización: Elija una experiencia de modo claro, modo oscuro o adaptativa para sus páginas de inicio de sesión. Si elige un modo adaptable al navegador, puede elegir diferentes colores e imágenes de logotipos para el modo claro y oscuro.
Spacing: Establezca el espaciado predeterminado entre los elementos de la página.

Comportamiento de la autenticación

Configure los estilos de los botones que conectan a sus usuarios con proveedores de identidad externos (IdPs). Esta sección incluye la opción Entrada de búsqueda de dominio para que el administrador solicite a los usuarios una dirección de correo electrónico y la compare con su identificador de proveedor de identidad SAML.

Comportamiento del formulario

Configure los estilos de los formularios de entrada: la posición de las entradas, los colores y la alineación de los elementos.

Componentes

Botones

Estilos de los botones que Amazon Cognito representa en las páginas de inicio de sesión administrado.

Divisor

Estilos para las líneas divisorias y los límites entre los elementos de inicio de sesión administrado, como el formulario de entrada y el selector de inicio de sesión del proveedor externo.

Lista desplegable

Estilos para menús desplegables.

Icono de favoritos

Estilos para la imagen que Amazon Cognito proporciona para la pestaña y el icono del marcador.

Anillos de enfoque

Estilos para los puntos destacados que indican una entrada actualmente seleccionada.

Contenedor de formulario

Estilos de los elementos que delimitan un formulario.

Pie de página global

Estilos para el pie de página que Amazon Cognito muestra en la parte inferior de las páginas de inicio de sesión administrado.

Encabezado global

Estilos para el encabezado que Amazon Cognito muestra en la parte superior de las páginas de inicio de sesión administrado.

Indicaciones

Estilos para los mensajes de error y de éxito.

Controles de opciones

Estilos para casillas de verificación, selecciones múltiples y otras peticiones de entrada.

Fondo de página

Estilos para el contexto general del inicio de sesión administrado.

Entradas

Estilos para las solicitudes de entrada de campos de formulario.

Enlace

Estilos de hipervínculos en las páginas de inicio de sesión administrado.

Texto para página

Estilos para el texto de la página.

Texto para campo

Estilos del texto alrededor de las entradas del formulario.

Operaciones de API y SDK para la creación de marcas de inicio de sesión administrado

También puede aplicar la marca a un estilo de inicio de sesión administrado con las operaciones de la API CreateManagedLoginBrandingy UpdateManagedLoginBranding. Estas operaciones son ideales para crear versiones idénticas o ligeramente modificadas de un estilo de marca para otra aplicación, cliente o grupo de usuarios. Consulta la marca de inicio de sesión gestionado de un estilo existente con la operación de API y DescribeManagedLoginBranding, a continuación, modifica el resultado según sea necesario y aplícalo a otro recurso.

La operación UpdateManagedLoginBranding no cambia el cliente de aplicación al que se aplica su estilo. Solo actualiza el estilo existente que está asignado a un cliente de aplicación. Para reemplazar por completo el estilo de un cliente de aplicación, elimina el estilo existente con DeleteManagedLoginBrandingy asigna un estilo nuevo conCreateManagedLoginBranding. En la consola de Amazon Cognito, ocurre lo mismo: debe eliminar el estilo existente y crear uno nuevo.

Para configurar una marca de inicio de sesión administrado en una solicitud de API o SDK, es necesario que la configuración esté integrada en un archivo JSON que se convierta en un tipo de datos Document. A continuación, encontrará directrices sobre las imágenes que puede añadir y para generar solicitudes programáticas a fin de configurar un estilo de marca.

Administración de imágenes

CreateManagedLoginBrandinge UpdateManagedLoginBrandingincluye un Assets parámetro. Este parámetro es una matriz de archivos de imagen en formato binario codificado en base64.

nota

Las solicitudes programáticas que crean o actualizan un estilo de marca no deben tener un tamaño superior a 2 MB. Es posible que los elementos de su solicitud hagan que supere este límite. En ese caso, divídala en varias solicitudes UpdateManagedLoginBranding para grupos de parámetros que no superen el tamaño máximo de la solicitud. Estas solicitudes no dan como resultado que los parámetros no especificados se establezcan de forma predeterminada, por lo que puede enviar solicitudes parciales sin que ello afecte a la configuración existente.

Algunos recursos tienen limitaciones en cuanto a los tipos de archivos que puede enviar.

Activo	Extensiones de archivo aceptadas
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

Los archivos del tipo SVG admiten los siguientes atributos y elementos.

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

Herramientas para operaciones de creación de marcas de inicio de sesión administradas

Amazon Cognito administra un archivo en formato de esquema JSON para el objeto de configuración de marca managed-login. A continuación, se explica cómo actualizar mediante programación su estilo de marca.

Cómo actualizar la marca en la API de grupos de usuarios

En la consola de Amazon Cognito, cree un estilo de marca de inicio de sesión administrado y predeterminado desde el menú Inicio de sesión administrado de su grupo de usuarios. Asígnelo a un cliente de aplicación.
Registre el ID del cliente de aplicación para el que creó el estilo, por ejemplo 1example23456789.
Recupera la configuración del estilo de marca con una solicitud de DescribeManagedLoginBrandingByClientAPI ReturnMergedResources configurada entrue. A continuación, se muestra un ejemplo de cuerpo de la solicitud .
```
{
   "ClientId": "1example23456789",
   "ReturnMergedResources": true,
   "UserPoolId": "us-east-1_EXAMPLE"
}
```
Modifique el resultado de DescribeManagedLoginBrandingByClient con sus personalizaciones.
1. El cuerpo de la respuesta está incluido en un elemento ManagedLoginBranding que no forma parte de la sintaxis de las operaciones de creación y actualización. Elimine este nivel superior del objeto JSON.
2. Para reemplazar las imágenes, sustituya el valor de Bytes por los datos binarios codificados en Base64 de cada archivo de imagen.
3. Para actualizar la configuración, modifique la salida del objeto Settings e inclúyala en su próxima solicitud. Amazon Cognito ignora los valores del objeto Settings que no estén en el esquema que usted reciba en la respuesta de la API.
Usa el cuerpo de la respuesta actualizado en una UpdateManagedLoginBrandingsolicitud CreateManagedLoginBrandingo. Si el tamaño de la solicitud supera los 2 MB, sepárela en varias solicitudes. Estas operaciones funcionan en un modelo PATCH en el que la configuración original permanece inalterada a menos que especifique lo contrario.

Aviso JavaScript está desactivado o no está disponible en su navegador.

Para utilizar la documentación de AWS, debe estar habilitado JavaScript. Para obtener más información, consulte las páginas de ayuda de su navegador.

Convenciones del documento

Creación de marca y personalización

Marca de interfaz de usuario alojada (clásica)