Esta guía te mostrará cómo autenticarte con Logto en tus pruebas de Aplicaciones de Página Única (SPA).
La autenticación es una parte crucial de cualquier aplicación web, y es esencial garantizar que los guardias de autenticación funcionen como se espera en Aplicaciones de Página Única (SPAs). En esta guía, te llevaremos paso a paso por el proceso de autenticación con Logto en tus pruebas de Cypress, permitiéndote probar eficazmente el flujo de autenticación de tu SPA.
Antes de comenzar, asegúrate de tener lo siguiente listo:
Una cuenta de Logto. Si no tienes una, puedes registrarte en Logto cloud de manera gratuita.
Una Aplicación de Página Única (SPA) que se integre con Logto para la autenticación. Si no tienes una, por favor sigue nuestra guía create-and-integrate-the-first-app, crea y registra una nueva aplicación en Logto.
Integra Logto con tu aplicación SPA usando nuestro SDK listo para usar. por ejemplo, React SDK
Puedes seguir nuestra guía de experiencia de inicio de sesión para personalizar la experiencia de inicio de sesión de tu propia aplicación SPA. Simula el flujo de inicio de sesión en tus pruebas de Cypress en consecuencia.
Completa la instalación de Cypress y su configuración. Esta guía asume que tienes un entorno de Cypress bien configurado y ya eres capaz de ejecutar tus pruebas de Cypress.
Levanta tu servicio Logto y la aplicación cliente.
Usaremos nuestra aplicación de ejemplo React SPA como un ejemplo en esta guía. Puedes encontrar el código fuente aquí. Es una aplicación React simple que se integra con Logto usando Logto React SDK para autenticación.
http://localhost:3001/sign-inhttp://localhost:3000nombre de usuario/contraseñaVamos a escribir un comando personalizado de Cypress para autenticarnos con Logto en tus pruebas de Cypress. Usando el comando personalizado, puedes autenticarte fácilmente con Logto en cualquiera de tus pruebas de Cypress.
Visita la página de inicio de sesión de tu aplicación cliente en la prueba de Cypress, e inicia el flujo de inicio de sesión haciendo clic en el botón de inicio de sesión.
Navega a la página de inicio de sesión de Logto, y completa el nombre de usuario y la contraseña para iniciar sesión.
En uso normal, una sola prueba de Cypress puede ejecutar comandos solo en un solo origen, una limitación determinada por características estándar de seguridad web del navegador. El comando cy.origin() permite que tus pruebas eludan esta limitación.
Después de un inicio de sesión exitoso, deberías poder redirigirte de nuevo a tu aplicación cliente.
Envuelve todo el flujo de inicio de sesión como un comando personalizado de Cypress. cy.signIn en este ejemplo.
En cualquiera de tus pruebas de Cypress, puedes usar el comando personalizado de Cypress para autenticarte con Logto.
¡Felicidades! Has autenticado exitosamente con Logto en tus pruebas de Cypress. Ahora puedes concentrarte en probar tu aplicación SPA sin preocuparte por el flujo de autenticación.