Deze handleiding laat je zien hoe je kunt authentiseren met Logto in je Single Page Application (SPA)-tests.
Authenticatie is een cruciaal onderdeel van elke webapplicatie, en het is essentieel om ervoor te zorgen dat authenticatiebeveiligingen werken zoals verwacht in Single Page Applications (SPA's). In deze handleiding nemen we je mee door het proces van authenticeren met Logto in je Cypress-tests, zodat je effectief de authenticatiestroom van je SPA kunt testen.
Voordat je begint, zorg ervoor dat je het volgende gereed hebt:
Een Logto-account. Als je er nog geen hebt, kun je je gratis aanmelden voor Logto cloud.
Een Single Page Application (SPA) die integreert met Logto voor authenticatie. Als je er nog geen hebt, volg dan onze creëer en integreer de eerste app handleiding, creëer en registreer een nieuwe applicatie in Logto.
Integreer Logto met je SPA-applicatie met behulp van onze kant-en-klare SDK. Bijvoorbeeld React SDK
Je kunt onze aanmeldingservaring handleiding volgen om de aanmeldingservaring voor je eigen SPA-applicatie aan te passen. Simuleer de aanmeldingsstroom in je Cypress-tests overeenkomstig.
Voltooi de Cypress-installatie en configuratie. Deze handleiding gaat ervan uit dat je een goed opgezet Cypress-omgeving hebt en dat je je Cypress-tests al kunt uitvoeren.
Start je Logto-service en de clientapplicatie.
We zullen onze React SPA Voorbeeld applicatie als voorbeeld gebruiken in deze handleiding. Je kunt de broncode vinden hier. Het is een eenvoudige React-toepassing die integreert met Logto met behulp van de Logto React SDK voor authenticatie.
http://localhost:3001/sign-inhttp://localhost:3000gebruikersnaam/wachtwoordLaten we een aangepaste Cypress-opdracht schrijven om te authenticeren met Logto in je Cypress-tests. Met de aangepaste opdracht kun je eenvoudig met Logto authenticeren in al je Cypress-tests.
Bezoek de aanmeldingspagina van je clientapplicatie in de Cypress-test en start de aanmeldingsstroom door op de aanmeldknop te klikken.
Navigeer naar de Logto-aanmeldingspagina en vul de gebruikersnaam en het wachtwoord in om aan te melden.
Bij normaal gebruik kan een enkele Cypress-test mogelijk alleen opdrachten uitvoeren in één enkel origineel, een beperking bepaald door de standaard webbeveiligingsfuncties van de browser. De cy.origin() opdracht staat je tests toe deze beperking te omzeilen.
Na een succesvolle aanmelding zou je moeten worden teruggeleid naar je clientapplicatie.
Verpak de hele aanmeldingsstroom als een aangepaste Cypress-opdracht. cy.signIn in dit voorbeeld.
In al je Cypress-tests kun je de aangepaste Cypress-opdracht gebruiken om je te authenticeren bij Logto.
Gefeliciteerd! Je hebt succesvol authenticatie uitgevoerd met Logto in je Cypress-tests. Je kunt je nu richten op het testen van je SPA-applicatie zonder je zorgen te maken over de authenticatiestroom.