## 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](https://cloud.logto.io/). - 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](https://docs.logto.io/docs/tutorials/get-started/create-and-integrate-the-first-app/) Leitfaden, erstelle und registriere eine neue Anwendung in Logto. create_application

- Integriere Logto mit deiner SPA-Anwendung mithilfe unseres Out-of-Box SDKs. Zum Beispiel [React SDK](https://docs.logto.io/docs/recipes/integrate-logto/react/) - Du kannst unserem [Anleitung zur Anpassung der Anmeldeerfahrung](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience/) folgen, um das Anmeldeerlebnis deiner eigenen SPA-Anwendung anzupassen. Simuliere den Anmeldeablauf entsprechend in deinen Cypress-Tests.

- Vervollständige die [Cypress-Installation](https://docs.cypress.io/guides/getting-started/installing-cypress) 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](https://github.com/logto-io/js/tree/master/packages/react-sample) 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. ```js cy.visit('http://localhost:3000'); cy.get('button:contains("Sign In")').click(); ``` ![home](https://uploads.strapi.logto.io/1/home_3fad5dbe85.webp) ### Schritt 2: Ausfüllen des Anmeldeformulars und Abschicken Navigiere zur Logto-Anmeldeseite, und fülle Benutzername und Passwort ein, um dich anzumelden. Die Logto-Anmeldeseite ist auf einer anderen Domain gehostet (http://localhost:3001/sign-in in diesem Beispiel). Du musst dich authentifizieren, indem du eine andere Domain mit [cy.origin](https://docs.cypress.io/api/commands/origin) besuchst. > 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. ```js cy.origin('http://localhost:3001', { args: { username, password } }, ({ username, password }) => { cy.url().should('include', 'sign-in'); cy.get('input[name="identifier"]').type(username); cy.get('input[name="password"]').type(password); cy.get('button:contains("Sign in")').click(); }); ``` 1. Stelle sicher, dass die aktuelle URL die Logto-Anmeldeseite ist. ![sign-in](https://uploads.strapi.logto.io/1/sign_in_70bfa68101.webp) 2. Identifiziere die Eingabefelder für Benutzername und Passwort und fülle Benutzername und Passwort ein. ![submit](https://uploads.strapi.logto.io/1/submit_39b9cb7b5f.webp) 3. Klicke auf die Anmeldeschaltfläche, um dich anzumelden. Du kannst die oben stehende Logik zum Ausfüllen des Formulars basierend auf deinen Anmeldeerfahrungseinstellungen umschreiben. ### 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. ```js cy.contains('Logto React Sample').should('be.visible'); ``` ![callback](https://uploads.strapi.logto.io/1/callback_b9ad9e58a4.webp) ### Schritt 4: Verpacke den gesamten Anmeldeablauf als benutzerdefinierten Cypress-Befehl Verpacke den gesamten Anmeldeablauf als benutzerdefinierten Cypress-Befehl. `cy.signIn` in diesem Beispiel. ```js function signIn(username: string, password: string) { cy.visit('http://localhost:3000'); cy.get('button:contains("Sign In")').click(); cy.origin('http://localhost:3001', { args: { username, password } }, ({ username, password }) => { cy.url().should('include', 'sign-in'); cy.get('input[name="identifier"]').type(username); cy.get('input[name="password"]').type(password); cy.get('button:contains("Sign in")').click(); }); Cypress.Commands.add('signIn', (username: string, password: string) => { const log = Cypress.log({ displayName: 'SignIn', message: [`Sign in with: ${username}`], autoEnd: false, }); log.snapshot('before'); signIn(username, password); log.snapshot('after'); log.end(); }); } ``` ## 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. ```js describe('authentication', () => { beforeAll(() => { cy.signIn('username', 'password'); }); it('should be authenticated', () => { cy.contains('Sign Out').should('be.visible'); }); }); ``` 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. Logto Cloud ausprobieren