Logto-autentisering i Cypress
Den här guiden visar dig hur du autentiserar med Logto i dina Single Page Application (SPA) tester.
Introduktion
Autentisering är en viktig del av alla webbapplikationer, och det är viktigt att se till att autentiseringsskydd fungerar som förväntat i Single Page Applications (SPAs). I den här guiden går vi igenom processen för att autentisera med Logto i dina Cypress-tester, vilket gör att du effektivt kan testa ditt SPA:s autentiseringsflöde.
Förutsättningar
Innan du dyker in, se till att du har följande redo:
-
Ett Logto-konto. Om du inte har ett kan du registrera dig för Logto cloud gratis.
-
En Single Page Application (SPA) som integreras med Logto för autentisering. Om du inte har en, följ vår skapa-och-integrera-den-första-appen guide, skapa och registrera en ny applikation i Logto.
-
Integrera Logto med din SPA-applikation med hjälp av vårt färdiga SDK, t.ex. React SDK
-
Du kan följa vår guide för anpassning av inloggningsupplevelsen för att anpassa inloggningsupplevelsen för din egen SPA-applikation. Simulera inloggningsflödet i dina Cypress-tester på motsvarande sätt.
-
Slutför Cypress-installationen och konfiguration. Den här guiden förutsätter att du har en väluppbyggd Cypress-miljö och att du redan kan köra dina Cypress-tester.
-
Starta din Logto-tjänst och klientapplikationen.
Vi kommer att använda vårt React SPA-provbibliotek som exempel i den här guiden. Du kan hitta källkoden här. Det är en enkel React-applikation som integreras med Logto med hjälp av Logto React SDK för autentisering.
- Logto inloggnings-URL:
http://localhost:3001/sign-in
- React SPA-applikationsdomän:
http://localhost:3000
- Logto inloggningsupplevelseinställningar:
användarnamn/lösenord
Skriv ett anpassat Cypress-kommando för att autentisera med Logto
Låt oss skriva ett anpassat Cypress-kommando för att autentisera med Logto i dina Cypress-tester. Med det anpassade kommandot kan du enkelt autentisera med Logto i alla dina Cypress-tester.
Steg 1: Starta inloggningsflödet
Besök din klientapplikations inloggningssida i Cypress-testet och initiera inloggningsflödet genom att klicka på inloggningsknappen.
Steg 2: Fyll i inloggningsformuläret och skicka in
Navigera till Logtos inloggningssida och fyll i användarnamnet och lösenordet för att logga in.
Vid normal användning kan ett enda Cypress-test bara köra kommandon i en enda ursprung, en begränsning bestämd av webbläsarens standardwebbsäkerhetsfunktioner. cy.origin()-kommandot låter dina tester kringgå denna begränsning.
- Bekräfta att den aktuella URL:en är Logtos inloggningssida.
- Identifiera användarnamns- och lösenordsinmatningsfälten och fyll i användarnamnet och lösenordet.
- Klicka på inloggningsknappen för att logga in.
Steg 3: Lyckades autentisera och omdirigera tillbaka till din klientapplikation
Efter en lyckad inloggning bör du kunna omdirigera tillbaka till din klientapplikation.
Steg 4: Sammanfatta hela inloggningsflödet som ett anpassat Cypress-kommando
Sammanfatta hela inloggningsflödet som ett anpassat Cypress-kommando. cy.signIn
i detta exempel.
Använd det anpassade Cypress-kommandot för att autentisera din applikation
I något av dina Cypress-tester kan du använda det anpassade Cypress-kommandot för att autentisera med Logto.
Grattis! Du har framgångsrikt autentiserat med Logto i dina Cypress-tester. Du kan nu fokusera på att testa din SPA-applikation utan oro för autentiseringsflödet.