Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # El editor de marca y la personalización del inicio de sesión administrado 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\]](http://docs.aws.amazon.com/es_es/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png) 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** 1. [Cree un dominio](cognito-user-pools-assign-domain.md) 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**. 1. 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. 1. En **Estilo de inicio de sesión administrado**, seleccione el estilo asignado a su cliente de aplicación. 1. Elija **Eliminar estilo**. Confirme la opción elegida. 1. 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](cognito-sign-in-feature-plans.md) 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. 1. En **Estilos**, seleccione **Crear un estilo**. 1. 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. 1. La consola de Amazon Cognito lanza el editor de marcas. 1. Elija la pestaña en la que desee empezar a editar o seleccione **Iniciar el editor** e introduzca la [configuración rápida](#branding-designer-quick-setup). 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. 1. 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](cognito-user-pools-managed-login.md#managed-login-localization). ## 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. 1. 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. 1. 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**, elija **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. ![\[Consola de administración de AWS Captura de pantalla de la configuración detallada de los componentes de inicio de sesión gestionados.\]](http://docs.aws.amazon.com/es_es/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png) 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](cognito-user-pools-managing-saml-idp-naming.md). **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. **Link** 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 [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)y [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html). 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](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html), 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 [DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html)y asigna un estilo nuevo con`CreateManagedLoginBranding`. 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 [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)incluye 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\$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 | 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 administrado Amazon Cognito administra un archivo en [formato de esquema JSON](https://json-schema.org/docs) para el objeto de configuración de marca de inicio de sesión administrado. 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** 1. 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. 1. Registre el ID del cliente de aplicación para el que creó el estilo, por ejemplo `1example23456789`. 1. Recupera la configuración del estilo de marca con una solicitud de [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html)API `ReturnMergedResources` configurada en`true`. A continuación, se muestra un ejemplo de cuerpo de la solicitud . ``` { "ClientId": "1example23456789", "ReturnMergedResources": true, "UserPoolId": "us-east-1_EXAMPLE" } ``` 1. 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. 1. Para reemplazar las imágenes, sustituya el valor de `Bytes` por los datos binarios codificados en Base64 de cada archivo de imagen. 1. 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. 1. Usa el cuerpo de la respuesta actualizado en una [UpdateManagedLoginBranding](https://docs.aws.amazon.com/)solicitud [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)o. 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.