Den här guiden visar dig hur du autentiserar med Logto i dina Single Page Application (SPA) tester.
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.
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.
http://localhost:3001/sign-inhttp://localhost:3000användarnamn/lösenordLå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.
Besök din klientapplikations inloggningssida i Cypress-testet och initiera inloggningsflödet genom att klicka på inloggningsknappen.
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.
Efter en lyckad inloggning bör du kunna omdirigera tillbaka till din klientapplikation.
Sammanfatta hela inloggningsflödet som ett anpassat Cypress-kommando. cy.signIn i detta exempel.
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.