Saltar al contenido principal

Prueba la experiencia del usuario con vista previa en vivo

Puedes usar la función de Vista previa en vivo para probar convenientemente las configuraciones de tu experiencia de inicio de sesión.

Vista previa en vivo​

Navegar a Console > Sign-in experience y hacer clic en el botón "Vista previa en vivo" en la esquina superior derecha abrirá una nueva pestaña del navegador con una demostración completamente funcional de las capacidades de Logto. Esta demostración muestra nuestro enfoque de diseño de experiencia para los flujos de inicio de sesión y registro. Es altamente personalizable y se puede integrar sin problemas en tu aplicación.

nota:

En esta vista previa, debes crear una cuenta primero para probar la experiencia. Puedes gestionar esta cuenta más tarde en Console > User management.

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 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 de control que contiene dos acciones principales:

  • Botón de cerrar sesión de la vista previa en vivo: Termina la sesión actual.
  • Botón de abrir 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 parámetros de autenticación incluidos en las solicitudes de autenticación para instruir al endpoint OIDC de Logto sobre cómo manejar el proceso de autenticación. Esto incluye definir tu ID de aplicación, 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 de Logto para tu aplicación.

nota:

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

  • ID de la aplicación: Especifica tu ID de aplicación único. Es esencial para probar la experiencia de inicio de sesión por aplicación, políticas de protección de recursos.
  • Parámetros adicionales de inicio de sesión: Proporciona parámetros adicionales de autenticación para probar el proceso de inicio de sesión personalizado. Por ejemplo:
  • Prompt: Agrega valores de prompt OIDC (delimitados 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 de usuario. Esta opción se utiliza para verificar la autenticación o el consentimiento preexistente.
  • Alcance (Scope): Especifica los alcances (delimitados por espacios) para las solicitudes de reclamos. Por ejemplo:
    • Para solicitar detalles de la organización del usuario, usa dos alcances: urn:logto:scope:organizations urn:logto:scope:organization_roles
    • Para solicitar permisos de API, proporciona los nombres de los alcances en el campo Scope e ingresa el identificador de API correspondiente en el campo Resource a continuación.
  • Recurso (Resource): Ingresa los identificadores de recursos de API (delimitados por espacios) a los que tu aplicación necesita acceso. Este campo permite que tu aplicación solicite tokens de acceso a recursos específicos según sea necesario.

Concesión de token de actualización​

Esta sección detalla cómo actualizar tokens para diferentes tipos de acceso:

  • Recurso (Resource): Ingresa el Identificador de API específico (delimitado por espacios) si necesitas actualizar el token de acceso a recursos de API.
  • ID de la organización: Ingresa el ID de la organización (delimitado por espacios) si necesitas actualizar el token de organización.

Si se proporcionan tanto un Recurso como un ID de la organización, la solicitud de actualización devolverá un token de acceso que admite la protección de recursos de API con plantilla de organización.

nota:

Incluye consent en el parámetro prompt para offline_access. Un token de actualización solo se emitirá si el prompt incluye consent.

Información del usuario​

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

  • Obtener reclamos del token de ID: Recupera todos los reclamos contenidos en el token de ID, 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 de userinfo.
nota:

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