Nederlands
  • cypress
  • logto
  • authenticatie

Logto-authenticatie in Cypress

Deze handleiding laat je zien hoe je kunt authentiseren met Logto in je Single Page Application (SPA)-tests.

Simeng
Simeng
Developer

Inleiding

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.

Vereisten

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.

    create_application

  • 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.

    sign-in-experience

  • 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.

  • Logto aanmeldings-URL: http://localhost:3001/sign-in
  • React SPA applicatiedomein: http://localhost:3000
  • Logto aanmeldingsinstellingen: gebruikersnaam/wachtwoord

Schrijf een aangepaste Cypress-opdracht om te authenticeren met Logto

Laten 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.

Stap 1: Start de aanmeldingsstroom

Bezoek de aanmeldingspagina van je clientapplicatie in de Cypress-test en start de aanmeldingsstroom door op de aanmeldknop te klikken.

home

Stap 2: Vul het aanmeldingsformulier in en verstuur

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.

  1. Bevestig dat de huidige URL de Logto-aanmeldingspagina is. sign-in
  2. Identificeer de invoervelden voor gebruikersnaam en wachtwoord en vul de gebruikersnaam en het wachtwoord in. submit
  3. Klik op de aanmeldknop om aan te melden.

Stap 3: Succesvol geauthentiseerd en teruggeleid naar je clientapplicatie

Na een succesvolle aanmelding zou je moeten worden teruggeleid naar je clientapplicatie.

callback

Stap 4: Verpak de hele aanmeldingsstroom als een aangepaste Cypress-opdracht

Verpak de hele aanmeldingsstroom als een aangepaste Cypress-opdracht. cy.signIn in dit voorbeeld.

Gebruik de aangepaste Cypress-opdracht om je applicatie te authenticeren

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.

Probeer Logto Cloud