Authentification Logto dans Cypress

Introduction#

L'authentification est une partie cruciale de toute application web, et il est essentiel de s'assurer que les gardes d'authentification fonctionnent comme prévu dans les applications à page unique (SPA). Dans ce guide, nous vous guiderons à travers le processus d'authentification avec Logto dans vos tests Cypress, vous permettant de tester efficacement le flux d'authentification de votre SPA.

Prérequis#

Avant de plonger, assurez-vous d'avoir les éléments suivants prêts :

• Un compte Logto. Si vous n'en avez pas, vous pouvez vous inscrire gratuitement à Logto cloud.

• Une application à page unique (SPA) intégrée avec Logto pour l'authentification. Si vous n'en avez pas, veuillez suivre notre guide create-and-integrate-the-first-app, créer et enregistrer une nouvelle application dans Logto.

  

• Intégrez Logto avec votre application SPA en utilisant notre SDK prêt à l'emploi. par exemple, React SDK

• Vous pouvez suivre notre guide de l'expérience de connexion pour personnaliser l'expérience de connexion pour votre propre application SPA. Simulez le flux de connexion dans vos tests Cypress en conséquence.

  

• Complétez l'installation et la configuration de Cypress. Ce guide suppose que vous avez un environnement Cypress bien configuré et que vous pouvez déjà exécuter vos tests Cypress.

• Faites fonctionner votre service Logto et l'application cliente.

Nous utiliserons notre application d'exemple React SPA comme exemple dans ce guide. Vous pouvez trouver le code source ici. C'est une application React simple qui s'intègre avec Logto utilisant Logto React SDK pour l'authentification.

• URL de connexion Logto : http://localhost:3001/sign-in
• Domaine de l'application React SPA : http://localhost:3000
• Paramètres de l'expérience de connexion Logto : nom d'utilisateur/mot de passe

Écrivez une commande personnalisée Cypress pour s'authentifier avec Logto#

Écrivons une commande personnalisée Cypress pour s'authentifier avec Logto dans vos tests Cypress. En utilisant la commande personnalisée, vous pouvez facilement vous authentifier avec Logto dans n'importe lequel de vos tests Cypress.

Étape 1 : Initier le flux de connexion#

Visitez la page de connexion de votre application cliente dans le test Cypress, et initiez le flux de connexion en cliquant sur le bouton de connexion.

Étape 2 : Remplissez le formulaire de connexion et soumettez#

Naviguez vers la page de connexion Logto, et remplissez le nom d'utilisateur et le mot de passe pour vous connecter.

Dans une utilisation normale, un seul test Cypress peut uniquement exécuter des commandes dans une seule origine, une limitation déterminée par les fonctionnalités de sécurité Web standard du navigateur. La commande cy.origin() permet à vos tests de contourner cette limitation.

1. Vérifiez que l'URL actuelle est la page de connexion Logto.
2. Identifiez les champs de saisie du nom d'utilisateur et du mot de passe et remplissez le nom d'utilisateur et le mot de passe.
3. Cliquez sur le bouton de connexion pour vous connecter.

Étape 3 : Authentification réussie et redirection vers votre application cliente#

Après une connexion réussie, vous devriez pouvoir être redirigé vers votre application cliente.

Étape 4 : Envelopper l'ensemble du flux de connexion comme une commande personnalisée Cypress#

Enveloppez l'ensemble du flux de connexion comme une commande personnalisée Cypress. cy.signIn dans cet exemple.

Utilisez la commande personnalisée Cypress pour authentifier votre application#

Dans n'importe lequel de vos tests Cypress, vous pouvez utiliser la commande personnalisée Cypress pour vous authentifier avec Logto.

Félicitations ! Vous vous êtes authentifié avec succès avec Logto dans vos tests Cypress. Vous pouvez maintenant vous concentrer sur le test de votre application SPA sans vous soucier du flux d'authentification.