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

Sluta slösa veckor på användarautentisering
Lansera säkra appar snabbare med Logto. Integrera användarautentisering på några minuter och fokusera på din kärnprodukt.
Kom igång
Product screenshot

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