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 demo 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, debes crear una cuenta primero para probar la experiencia. Puedes gestionar esta cuenta más tarde 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 con 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 y las 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 usa para comprobar si ya existe autenticación o consentimiento previo.
  • Alcance (Scope): Especifica los alcances (separados 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 alcance en el campo Alcance y escribe el identificador de API correspondiente en el campo Recurso a continuación.
  • Recurso (Resource): Ingresa los identificadores de recursos de API (separados por espacios) a los que tu aplicación necesita acceder. 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 (separado por espacios) si necesitas actualizar tokens de acceso a recursos de API.
  • ID de organización (Organization ID): Ingresa el ID de organización (separado por espacios) si necesitas actualizar tokens de organización.

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

nota:

Incluye consent en el parámetro prompt para offline_access. Solo se emitirá un refresh token 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.