Logto-Authentifizierung in Cypress

Einführung#

Die Authentifizierung ist ein entscheidender Bestandteil jeder Webanwendung, und es ist wichtig sicherzustellen, dass Authentifizierungsschranken in Single Page Applications (SPAs) wie erwartet funktionieren. In diesem Leitfaden führen wir dich durch den Prozess der Authentifizierung mit Logto in deinen Cypress-Tests, sodass du effektiv den Authentifizierungsablauf deiner SPA testen kannst.

Voraussetzungen#

Bevor du eintauchst, stelle sicher, dass du Folgendes bereit hast:

• Ein Logto-Konto. Wenn du noch keines hast, kannst du dich kostenlos bei Logto Cloud anmelden.

• Eine Single Page Application (SPA), die für die Authentifizierung mit Logto integriert ist. Wenn du noch keine hast, folge bitte unserem create-and-integrate-the-first-app Leitfaden, erstelle und registriere eine neue Anwendung in Logto.

  

• Integriere Logto mit deiner SPA-Anwendung mithilfe unseres Out-of-Box SDKs. Zum Beispiel React SDK

• Du kannst unserem Anleitung zur Anpassung der Anmeldeerfahrung folgen, um das Anmeldeerlebnis deiner eigenen SPA-Anwendung anzupassen. Simuliere den Anmeldeablauf entsprechend in deinen Cypress-Tests.

  

• Vervollständige die Cypress-Installation und Konfiguration. Dieser Leitfaden geht davon aus, dass du eine gut eingerichtete Cypress-Umgebung hast und deine Cypress-Tests bereits ausführen kannst.

• Bringe deinen Logto-Dienst und die Client-Anwendung hoch.

Wir werden unsere React SPA-Beispielanwendung als Beispiel in diesem Leitfaden verwenden. Du kannst den Quellcode hier finden. Es ist eine einfache React-Anwendung, die mit Logto unter Verwendung der Logto React SDK zur Authentifizierung integriert ist.

• Logto Anmelde-URL: http://localhost:3001/sign-in
• React SPA-Anwendungsdomäne: http://localhost:3000
• Logto Anmeldeerfahrungseinstellungen: Benutzername/Passwort

Schreibe einen benutzerdefinierten Cypress-Befehl zur Authentifizierung mit Logto#

Lass uns einen benutzerdefinierten Cypress-Befehl schreiben, um uns mit Logto in deinen Cypress-Tests zu authentifizieren. Mithilfe des benutzerdefinierten Befehls kannst du dich in beliebigen deiner Cypress-Tests einfach mit Logto authentifizieren.

Schritt 1: Initiierung des Anmeldeablaufs#

Besuche die Anmeldeseite deiner Client-Anwendung im Cypress-Test und leite den Anmeldeablauf ein, indem du auf die Anmelde-Schaltfläche klickst.

Schritt 2: Ausfüllen des Anmeldeformulars und Abschicken#

Navigiere zur Logto-Anmeldeseite, und fülle Benutzername und Passwort ein, um dich anzumelden.

Unter normalen Umständen kann ein einziger Cypress-Test nur Befehle in einem einzigen Ursprung ausführen, eine Begrenzung, die durch die standardmäßigen Web-Sicherheitsfunktionen des Browsers bestimmt wird. Der cy.origin()-Befehl ermöglicht es deinen Tests, diese Begrenzung zu umgehen.

1. Stelle sicher, dass die aktuelle URL die Logto-Anmeldeseite ist.
2. Identifiziere die Eingabefelder für Benutzername und Passwort und fülle Benutzername und Passwort ein.
3. Klicke auf die Anmeldeschaltfläche, um dich anzumelden.

Schritt 3: Erfolgreich authentifiziert und Rückkehr zu deiner Client-Anwendung#

Nach einer erfolgreichen Anmeldung solltest du in der Lage sein, zu deiner Client-Anwendung zurückzukehren.

Schritt 4: Verpacke den gesamten Anmeldeablauf als benutzerdefinierten Cypress-Befehl#

Verpacke den gesamten Anmeldeablauf als benutzerdefinierten Cypress-Befehl. cy.signIn in diesem Beispiel.

Verwende den benutzerdefinierten Cypress-Befehl zur Authentifizierung deiner Anwendung#

In jedem deiner Cypress-Tests kannst du den benutzerdefinierten Cypress-Befehl verwenden, um dich mit Logto zu authentifizieren.

Herzlichen Glückwunsch! Du hast dich erfolgreich mit Logto in deinen Cypress-Tests authentifiziert. Du kannst dich jetzt darauf konzentrieren, deine SPA-Anwendung zu testen, ohne dir Gedanken über den Authentifizierungsablauf zu machen.