Personalizar las páginas web integradas de registro e inicio de sesión - Amazon Cognito
Especificar un logotipo personalizado para la aplicaciónEspecificar ajustes personalizados de CSS para la aplicaciónEspecificación de la configuración de personalización de la IU de la aplicación para un grupo de usuarios (AWS Management Console)Especificación de la configuración de personalización de la IU de la aplicación para un grupo de usuarios (AWS CLI y API de AWS)

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.

Personalizar las páginas web integradas de registro e inicio de sesión

Puede utilizar la AWS Management Console, la AWS CLI o la API para especificar la configuración de personalización de la interfaz de usuario de la aplicación integrada. Puede cargar una imagen de logotipo personalizada para que se muestre en la aplicación. También puede usar cascading style sheets (CSS, hojas de estilos en cascada) para personalizar el aspecto de la IU.

Puede especificar los ajustes de personalización de interfaz de usuario de la aplicación para un solo cliente (con un clientId específico) o para todos los clientes (cambiando la configuración de clientId a ALL). Si especifica ALL, se utilizará la configuración predeterminada para cada cliente que no tiene ninguna personalización de interfaz de usuario determinada. Si especifica ajustes de personalización de interfaz de usuario para un cliente específico, no volverá a usar la configuración ALL.

La solicitud que establece la personalización de su IU no debe superar los 135 KB de tamaño. En casos excepcionales, la suma de los encabezados de solicitud, su archivo CSS y su logotipo podría superar los 135 KB. Amazon Cognito codifica el archivo de imagen en Base64. Esto aumenta el tamaño de una imagen de 100 KB a 130 KB, lo que mantiene cinco KB para los encabezados de solicitud y su CSS. Si la solicitud es demasiado grande, la AWS Management Console o su solicitud de API SetUICustomization devuelve un error request parameters too large. Ajuste la imagen de su logotipo para que no supere los 100 KB y su archivo CSS para que no supere los 3 KB. No puede establecer la personalización de CSS y logotipo por separado.

nota

Para personalizar su IU, debe establecer un dominio para su grupo de usuarios.

Amazon Cognito centra su logotipo personalizado encima de los campos de entrada en el Punto de conexión Login.

Elija un archivo PNG, JPG o JPEG que pueda escalarse a 350 por 178 píxeles para su logotipo de IU alojado personalizado. El archivo del logotipo no puede tener un tamaño superior a 100 KB o 130 KB después de que Amazon Cognito lo codifique en Base64. Para establecer un ImageFile en SetUICustomization en la API, convierta su archivo en una cadena de texto codificada en Base64 o, en la AWS CLI, proporcione una ruta de archivo y deje que Amazon Cognito la codifique automáticamente.

Especificar ajustes personalizados de CSS para la aplicación

Puede personalizar el CSS de las páginas de la aplicación alojada, con las siguientes restricciones:

  • Puede utilizar cualquiera de los siguientes nombres de clase de CSS:

    • 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

  • Los valores de propiedad pueden contener HTML, excepto los siguientes valores: @import, @supports, @page, o bien instrucciones de @media o Javascript.

Puede personalizar las siguientes propiedades CSS.

Etiquetas

  • font-weight (peso de fuente) es un múltiplo de 100 entre 100 y 900.

Campos de entrada

  • width (anchura) es la anchura del bloque contenedor como un porcentaje.

  • height (altura) es la altura del campo de entrada en píxeles (px).

  • color es el color del texto. Puede ser cualquier valor de color CSS estándar.

  • background-color (color de fondo) es el color de fondo del campo de entrada. Puede ser cualquier valor de color CSS estándar.

  • border (borde) es un valor de borde CSS estándar que especifica la anchura, la transparencia y el color del borde de la ventana de la aplicación. La anchura puede ser cualquier valor entre 1 px y 100 px. La transparencia puede ser sólida o ninguna. El color puede ser cualquier valor de color estándar.

Descripciones de texto

  • padding-top (relleno superior) es la cantidad de relleno por encima de la descripción de texto.

  • padding-bottom (relleno inferior) es la cantidad de relleno por debajo de la descripción de texto.

  • display (visualización) puede ser block o inline.

  • font-size (tamaño de fuente) es el tamaño de fuente de las descripciones de texto.

Botón de envío

  • font-size (tamaño de fuente) es el tamaño de fuente del botón de envío.

  • font-weight (peso de fuente) es el peso de fuente del texto del botón: bold, italic o normal.

  • margen es una cadena de cuatro valores que indica el tamaño de margen de las partes superior, inferior, derecha e izquierda del botón.

  • font-size (tamaño de fuente) es el tamaño de fuente de las descripciones de texto.

  • width (anchura) es la anchura del texto del botón como porcentaje del bloque contenedor.

  • height (altura) es la altura del botón en píxeles (px).

  • color es el color del texto del botón. Puede ser cualquier valor de color CSS estándar.

  • background-color (color de fondo) es el color de fondo del botón. Puede ser cualquier valor de color estándar.

Banner

  • relleno es una cadena de cuatro valores que indica el tamaño del relleno de las partes superior, inferior, derecha e izquierda del banner.

  • background-color (color de fondo) es el color de fondo del banner. Puede ser cualquier valor de color CSS estándar.

Ajustes al mantener el puntero sobre el botón de envío

  • color es el color de primer plano del botón al pasar el puntero sobre él. Puede ser cualquier valor de color CSS estándar.

  • background-color (color de fondo) es el color de fondo del botón al pasar el puntero sobre él. Puede ser cualquier valor de color CSS estándar.

Ajustes al mantener el puntero sobre el botón de proveedor de identidad

  • color es el color de primer plano del botón al pasar el puntero sobre él. Puede ser cualquier valor de color CSS estándar.

  • background-color (color de fondo) es el color de fondo del botón al pasar el puntero sobre él. Puede ser cualquier valor de color CSS estándar.

Comprobación de contraseña no válida

  • color es el color del texto del mensaje "Password check not valid". Puede ser cualquier valor de color CSS estándar.

Introducción

  • background-color (color de fondo) es el color de fondo de la ventana de la aplicación. Puede ser cualquier valor de color CSS estándar.

Mensajes de error

  • margen es una cadena de cuatro valores que indica el tamaño de margen de las partes superior, inferior, derecha e izquierda.

  • padding (relleno) es el tamaño del relleno.

  • font-size (tamaño de fuente) es el tamaño de la fuente.

  • width (anchura) es la anchura del mensaje de error como porcentaje del bloque contenedor.

  • background-color (color de fondo) es el color de fondo del mensaje de error. Puede ser cualquier valor de color CSS estándar.

  • borde es una cadena de tres valores que especifica el ancho, la transparencia y el color del borde.

  • color es el color del texto del mensaje de error. Puede ser cualquier valor de color CSS estándar.

  • box-sizing (tamaño de cuadro) se utiliza para indicar al navegador qué deben incluir las propiedades de tamaño (anchura y altura).

Botones de proveedor de identidad

  • height (altura) es la altura del botón en píxeles (px).

  • width (anchura) es la anchura del texto del botón como porcentaje del bloque contenedor.

  • text-align (alineación de texto) es el ajuste de alineación del texto. Puede ser left, right, o center.

  • margin-bottom (margen inferior) es el ajuste del margen inferior.

  • color es el color del texto del botón. Puede ser cualquier valor de color CSS estándar.

  • background-color (color de fondo) es el color de fondo del botón. Puede ser cualquier valor de color CSS estándar.

  • border-color (color de borde) es el color de borde del botón. Puede ser cualquier valor de color CSS estándar.

Descripciones de proveedor de identidad

  • padding-top (relleno superior) es la cantidad de relleno por encima de la descripción.

  • padding-bottom (relleno inferior) es la cantidad de relleno por debajo de la descripción.

  • display (visualización) puede ser block o inline.

  • font-size (tamaño de fuente) es el tamaño de fuente de las descripciones.

Texto legal

  • color es el color del texto. Puede ser cualquier valor de color CSS estándar.

  • font-size (tamaño de fuente) es el tamaño de la fuente.

nota

Cuando personaliza texto legal, está personalizando el mensaje. No publicaremos nada en ninguna de sus cuentas sin pedir antes que se muestre en los proveedores de identidad social en la página de inicio de sesión.

Logo

  • max-width (anchura máx.) es la anchura máxima como porcentaje del bloque contenedor.

  • max-height (altura máx.) es la altura máxima como porcentaje del bloque contenedor.

Foco del campo de entrada

  • border-color (color de borde) es el color del campo de entrada. Puede ser cualquier valor de color CSS estándar.

  • outline (contorno) es la anchura del borde del campo de entrada en píxeles (px).

Botones sociales

  • height (altura) es la altura del botón en píxeles (px).

  • text-align (alineación de texto) es el ajuste de alineación del texto. Puede ser left, right, o center.

  • width (anchura) es la anchura del texto del botón como porcentaje del bloque contenedor.

  • margin-bottom (margen inferior) es el ajuste del margen inferior.

Comprobación de contraseña válida

  • color es el color del texto del mensaje "Password check valid". Puede ser cualquier valor de color CSS estándar.

Especificación de la configuración de personalización de la IU de la aplicación para un grupo de usuarios (AWS Management Console)

Puede utilizar la AWS Management Console para especificar la configuración de personalización de la interfaz de usuario de la aplicación.

nota

Para ver la interfaz de usuario alojada y sus personalizaciones, escriba en un navegador la siguiente URL con los datos específicos de su grupo de usuarios: https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> Posiblemente deba esperar hasta un minuto para actualizar la ventana del navegador y que aparezcan los cambios realizados en la consola.

Su dominio aparece en la pestaña App integration (Integración de aplicaciones) en Domain (Dominio). Su ID de cliente de aplicación y URL de devolución de llamada aparecen en App clients (Clientes de la aplicación).

Para especificar la configuración de personalización de la interfaz de usuario

  1. Inicie sesión en la consola de Amazon Cognito.

  2. En el panel de navegación, elija User Pools (Grupos de usuarios), y elija el grupo de usuarios que desea editar.

  3. Elija la pestaña App integration (Integración de aplicaciones).

  4. Para personalizar la configuración de la IU de todos los clientes de aplicaciones, localice Hosted UI customization (Personalización de IU alojada)y seleccione Edit (Editar).

  5. Para personalizar la configuración de la IU de un cliente de aplicación, localice Clientes de aplicaciones y seleccione el cliente de la aplicación que quiere modificar y, a continuación, localice Personalización de IU alojada y seleccione Editar. Para cambiar un cliente de aplicación de la personalización predeterminada del grupo de usuarios a la personalización específica del cliente, seleccione Use client-level settings (Utilizar la configuración de nivel de cliente).

  6. Para cargar su propio archivo de imagen de logotipo, elija Choose file (Elegir archivo) o Replace current file (Reemplazar archivo actual).

  7. Para personalizar CSS de la interfaz de usuario alojada, descargue CSS template.css y modifique la plantilla con los valores que quiera personalizar. Solo las claves incluidas en la plantilla se pueden utilizar con la IU alojada. Las claves CSS añadidas no se reflejarán en la IU. Después de personalizar el archivo CSS, elija Choose file (Elegir archivo) o Replace current file (Reemplazar archivo actual) para cargar su archivo CSS personalizado.

Especificación de la configuración de personalización de la IU de la aplicación para un grupo de usuarios (AWS CLI y API de AWS)

Utilice los siguientes comandos para especificar la configuración de la personalización de interfaz de usuario de la aplicación para su grupo de usuarios.

Para obtener la configuración de personalización de la IU de aplicación integrada de un grupo de usuarios, utilice las siguientes operaciones de API.
Para establecer la configuración de personalización de la IU de aplicación integrada de un grupo de usuarios, utilice las siguientes operaciones de API.

  • AWS CLI del archivo de imagen: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file fileb://"<path-to-logo-image-file>" --css ".label-customizable{ color: <color>;}"

  • AWS CLI con imagen codificada como texto binario Base64: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <base64-encoded-image-file> --css ".label-customizable{ color: <color>;}"

  • API de AWS: SetUICustomization