Autenticación de Logto en Cypress

Introducción#

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.

Prerrequisitos#

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.

• URL de inicio de sesión de Logto: http://localhost:3001/sign-in
• Dominio de aplicación React SPA: http://localhost:3000
• Configuraciones de experiencia de inicio de sesión de Logto: nombre de usuario/contraseña

Escribir un comando personalizado de Cypress para autenticarse con Logto#

Vamos 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.

Paso 1: Iniciar el flujo de inicio de sesión#

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.

Paso 2: Completa el formulario de inicio de sesión y envíalo#

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.

1. Asegúrate de que la URL actual es la página de inicio de sesión de Logto.
2. Identifica los campos de entrada de nombre de usuario y contraseña y llénalos con el nombre de usuario y contraseña.
3. Haz clic en el botón de inicio de sesión para iniciar sesión.

Paso 3: Autenticar exitosamente y redirigir de nuevo a tu aplicación cliente#

Después de un inicio de sesión exitoso, deberías poder redirigirte de nuevo a tu aplicación cliente.

Paso 4: Envolver todo el flujo de inicio de sesión como un comando personalizado de Cypress#

Envuelve todo el flujo de inicio de sesión como un comando personalizado de Cypress. cy.signIn en este ejemplo.

Usar el comando personalizado de Cypress para autenticar tu aplicación#

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.