Saltar al contenido principal

Prueba la experiencia de usuario con la vista previa en vivo

Puedes utilizar la función de Vista previa en vivo para probar cómodamente las configuraciones de tu experiencia de inicio de sesión.

Vista previa en vivo​

Navega a Consola > Experiencia de inicio de sesión y haz clic en el botón "Vista previa en vivo" en la esquina superior derecha para abrir una nueva pestaña del navegador con una demostración totalmente funcional de las capacidades de Logto. Esta demo muestra nuestro enfoque de diseño de experiencia para los flujos de inicio de sesión y registro. Es altamente personalizable y puede integrarse perfectamente en tu aplicación.

nota:

En esta vista previa, primero debes crear una cuenta para probar la experiencia. Puedes gestionar esta cuenta más adelante en Consola > Gestión de usuarios.

Si intentas iniciar sesión con la cuenta de usuario que creaste y el proceso es exitoso sin problemas, serás redirigido a una página de éxito que muestra tus identificadores y tu ID.

Panel de desarrollo​

Después de un inicio de sesión exitoso usando la Vista Previa en Vivo de Logto, llegarás a un panel que contiene dos acciones principales:

  • Botón de cerrar sesión en la vista previa en vivo: Termina la sesión actual.
  • Botón de abrir el panel de desarrollo: Lanza herramientas de depuración para analizar tu flujo de autenticación.

El Panel de Desarrollo proporciona información en tiempo real para solucionar problemas de integración OIDC, inspeccionar tokens y reclamos, y probar escenarios avanzados de identidad.

Configuración de Logto​

La Vista Previa en Vivo se basa en una aplicación de demostración oculta que presenta una experiencia de inicio de sesión unificada por defecto. En la sección Configuración de Logto, puedes configurar los parámetros de autenticación incluidos en las solicitudes de autenticación para indicar al endpoint OIDC de Logto cómo manejar el proceso de autenticación. Esto incluye definir tu App ID, asignar un ID de organización, solicitar alcances específicos, etc. Esta configuración es similar a inicializar el LogtoClient con el LogtoProvider, que establece un contexto Logto para tu aplicación.

nota:

Recuerda guardar los cambios de configuración. Se aplicarán la próxima vez que inicies sesión con la Vista Previa en Vivo.

  • App ID: Especifica tu App ID único. Es esencial para probar la experiencia de inicio de sesión por aplicación, políticas de protección de recursos.
  • Parámetros extra de inicio de sesión: Proporciona parámetros de autenticación adicionales para probar el proceso de inicio de sesión personalizado. Por ejemplo:
  • Prompt: Añade valores de prompt OIDC (separados por espacios) para especificar si el Servidor de Autorización solicita al usuario final la reautenticación y el consentimiento. Los valores definidos son:
    • login: Obliga a reautenticar al usuario final.
    • consent: Requiere el consentimiento del usuario antes de compartir información con el cliente.
    • none: Indica que no se debe mostrar ninguna interfaz. Esta opción se utiliza para comprobar si ya existe autenticación o consentimiento previo.
  • Scope (Alcance): Especifica los alcances (separados por espacios) para las solicitudes de reclamos. Por ejemplo:
    • Para solicitar detalles de la organización del usuario, utiliza dos alcances: urn:logto:scope:organizations urn:logto:scope:organization_roles
    • Para solicitar permisos de API, proporciona los nombres de alcance en el campo Scope y escribe el identificador de API correspondiente en el campo Resource a continuación.
  • Resource (Recurso): Introduce los identificadores de recursos de API (separados por espacios) a los que tu aplicación necesita acceder. Este campo permite que tu app solicite tokens de acceso a recursos específicos según sea necesario.

Concesión de refresh token​

Esta sección detalla cómo refrescar tokens para diferentes tipos de acceso.

  • Resource (Recurso): Ingresa el identificador específico de API (separado por espacios) si necesitas refrescar tokens de acceso a recursos de API.
  • Organization ID (ID de organización): Ingresa el ID de la organización (separado por espacios) si necesitas refrescar tokens de organización.

Consulta Autorización para más detalles sobre cómo usar la concesión de refresh token.

nota:

Incluye consent en el parámetro prompt para offline_access. Un refresh token solo se emitirá si el prompt incluye consent.

Información del usuario​

Consulta los datos del usuario recuperados de tu flujo de autenticación:

  • Obtener reclamos del ID token: Recupera todos los reclamos contenidos en el ID token, como at_hash, aud, auth_time, exp, iat, issu y perfiles de usuario adicionales. Esto es útil para validar el token y extraer la información necesaria del usuario.
  • Obtener información del usuario: Recupera solo la información del perfil del usuario consultando el endpoint userinfo.
nota:

Utiliza las Herramientas de Desarrollador de Chrome (F12 → Consola) para inspeccionar las solicitudes de red y revisar los tokens y reclamos.