¿Cómo puedo configurar la interfaz de usuario web alojada para Amazon Cognito?

Breve descripción

Cuando crea un grupo de usuarios en Amazon Cognito y, a continuación, configura un dominio para él, Amazon Cognito aprovisiona automáticamente una interfaz de usuario web alojada de modo que le permita añadir páginas de registro e inicio de sesión a su aplicación.

Si no tiene claro cómo debe realizar la configuración o qué ajustes debe utilizar (por ejemplo, los tipos de flujos y ámbitos de OAuth 2.0 que se deben activar), siga los pasos que se describen en este artículo.

Solución

Si aún no lo ha hecho, cree un grupo de usuarios y un cliente de aplicación en el grupo de usuarios. A continuación, siga estas instrucciones:

Nota: Estas instrucciones se basan en la nueva consola de Amazon Cognito.

Agregación de un nombre de dominio para el grupo de usuarios

1. En la consola de Amazon Cognito, seleccione Grupos de usuarios y, a continuación, elija el grupo de usuarios.
2. En Integración de aplicaciones, seleccione Nombre del dominio y, a continuación, elija Acciones.
3. Elija Crear dominio de Cognito para agregar el prefijo del dominio al dominio alojado de Amazon Cognito. Como alternativa, también puede elegir Crear dominio personalizado para agregar un dominio personalizado propio.

Modificación de la configuración del cliente de aplicación

1. En la consola de Amazon Cognito, seleccione Grupos de usuarios y, a continuación, elija el grupo de usuarios.
2. En Integración de aplicaciones, elija su cliente de aplicación en la sección Clientes de aplicaciones y análisis.
3. Seleccione Editar en la sección Interfaz de usuario alojada.
4. Siga estos pasos:
   En URL de devolución de llamadas permitidas, indique la URL de la aplicación web que recibirá el código de autorización. Se redirigirá aquí a los usuarios cuando inicien sesión.
   En URL de cierre de sesión permitidas (opcional), indique la URL a la que desee redirigir a los usuarios cuando cierren la sesión.
   En Proveedores de identidad, seleccione Grupo de usuarios de Cognito en la lista desplegable.
   En Tipos de concesión de OAuth 2.0, elija el flujo de autenticación de OAuth 2.0 Concesión de código de autorización o Concesión implícita. Los clientes públicos y confidenciales utilizan el tipo de concesión de código de autorización para intercambiar un código de autorización por un token de acceso. El tipo de concesión implícita solo se usa cuando hay un motivo concreto por el que no se puede usar la concesión de código de autorización.
   En Ámbitos de OpenID Connect, seleccione openid y los demás ámbitos de OAuth que desee que Amazon Cognito añada en los tokens para la autenticación de los usuarios. Por ejemplo, email y phone.
   En Ámbitos personalizados, seleccione los ámbitos personalizados que desee autorizar para la aplicación en cuestión.
5. Seleccione Guardar los cambios.

Para obtener más información, consulte Configuring a user pool app client.

(Opcional) Personalización de la interfaz de usuario web alojada

Puede añadir un logotipo personalizado o personalizar el CSS de la interfaz de usuario web alojada. Para obtener más información, consulte Customizing the built-in sign-in and sign-up webpages.

(Opcional) Composición de la URL para la interfaz de usuario web alojada

Si desea controlar qué parámetros se deben incluir en la URL de inicio de sesión de la interfaz de usuario web alojada, componga la URL manualmente.

1. En la consola de Amazon Cognito, seleccione Grupos de usuarios y, a continuación, elija el grupo de usuarios.
2. En Integración de aplicaciones, copie la URL Dominio en la sección Dominio. A continuación, pegue la URL en un editor de texto como referencia.
3. En Clientes de aplicaciones y análisis, haga clic en el nombre del cliente.
4. Copie ID de cliente en el portapapeles. A continuación, pegue el ID en un editor de texto como referencia.
5. Copie una de las URL de devolución de llamadas permitidas en el portapapeles. A continuación, pegue la URL en un editor de texto como referencia.
6. Pegue toda la información que acaba de copiar en este formato para componer la URL para la interfaz de usuario web alojada:
   domainUrl/login?response_type=code&client_id=appClientId&redirect_uri=callbackUrl
   Por ejemplo: https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com
   \Alternativa:
   Seleccione Visualización de la interfaz de usuario alojada en la sección Cliente de aplicación para acceder a la URL del punto de enlace de inicio de sesión. A continuación, sustituya partes de la URL tal y como se ha detallado anteriormente.

Si antes activó Concesión de código de autorización en Tipos de concesión de OAuth 2.0, cuando utilice esta URL estará pidiendo a Amazon Cognito que devuelva un código de autorización cuando los usuarios inicien sesión. Si antes activó Concesión implícita en Tipos de concesión de OAuth 2.0 y desea que Amazon Cognito devuelva en cambio un token de acceso cuando los usuarios inicien sesión, sustituya response_type=code por response_type=token en la URL.

Iniciación de la interfaz de usuario web alojada

Nota: Si compuso la URL para la interfaz de usuario web alojada manualmente, introduzca esa URL en el navegador web.

1. En la consola de Amazon Cognito, seleccione Grupos de usuarios y, a continuación, elija el grupo de usuarios.
2. En Integración de aplicaciones, haga clic en Nombre del cliente en la sección Clientes de aplicaciones y análisis.
3. En Interfaz de usuario alojada, elija Visualización de la interfaz de usuario alojada. La página de inicio de sesión de la interfaz de usuario web alojada se abre en una nueva pestaña o ventana del navegador.

Información relacionada

Getting started with user pools