Svenska
  • cypress
  • logto
  • autentisering

Logto-autentisering i Cypress

Den här guiden visar dig hur du autentiserar med Logto i dina Single Page Application (SPA) tester.

Simeng
Simeng
Developer

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.

    create_application

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

    sign-in-experience

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

home

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.

  1. Bekräfta att den aktuella URL:en är Logtos inloggningssida. sign-in
  2. Identifiera användarnamns- och lösenordsinmatningsfälten och fyll i användarnamnet och lösenordet. submit
  3. 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.

callback

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.

Prova Logto Cloud