Ce guide vous montrera comment vous authentifier avec Logto dans vos tests d'application à page unique (SPA).
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.
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.
http://localhost:3001/sign-inhttp://localhost:3000nom d'utilisateur/mot de passeÉ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.
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.
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.
Après une connexion réussie, vous devriez pouvoir être redirigé vers votre application cliente.
Enveloppez l'ensemble du flux de connexion comme une commande personnalisée Cypress. cy.signIn dans cet exemple.
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.