## 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](https://cloud.logto.io/). - 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](https://docs.logto.io/docs/tutorials/get-started/create-and-integrate-the-first-app/) 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](https://docs.logto.io/docs/recipes/integrate-logto/react/) - Du kan följa vår [guide för anpassning av inloggningsupplevelsen](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience/) 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](https://docs.cypress.io/guides/getting-started/installing-cypress) 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](https://github.com/logto-io/js/tree/master/packages/react-sample). 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. ```js cy.visit('http://localhost:3000'); cy.get('button:contains("Sign In")').click(); ``` ![home](https://uploads.strapi.logto.io/1/home_3fad5dbe85.webp) ### 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. Logtos inloggningssida är värd på en annan domän (http://localhost:3001/sign-in i denna exempel). Du kommer behöva autentisera genom att besöka en annan domän med [cy.origin](https://docs.cypress.io/api/commands/origin). > 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. ```js cy.origin('http://localhost:3001', { args: { username, password } }, ({ username, password }) => { cy.url().should('include', 'sign-in'); cy.get('input[name="identifier"]').type(username); cy.get('input[name="password"]').type(password); cy.get('button:contains("Sign in")').click(); }); ``` 1. Bekräfta att den aktuella URL:en är Logtos inloggningssida. ![sign-in](https://uploads.strapi.logto.io/1/sign_in_70bfa68101.webp) 2. Identifiera användarnamns- och lösenordsinmatningsfälten och fyll i användarnamnet och lösenordet. ![submit](https://uploads.strapi.logto.io/1/submit_39b9cb7b5f.webp) 3. Klicka på inloggningsknappen för att logga in. Du kan skriva om ovanstående formulärfyllnadslogik baserat på dina inloggningsupplevelseinställningar. ### Steg 3: Lyckades autentisera och omdirigera tillbaka till din klientapplikation Efter en lyckad inloggning bör du kunna omdirigera tillbaka till din klientapplikation. ```js cy.contains('Logto React Sample').should('be.visible'); ``` ![callback](https://uploads.strapi.logto.io/1/callback_b9ad9e58a4.webp) ### 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. ```js function signIn(username: string, password: string) { cy.visit('http://localhost:3000'); cy.get('button:contains("Sign In")').click(); cy.origin('http://localhost:3001', { args: { username, password } }, ({ username, password }) => { cy.url().should('include', 'sign-in'); cy.get('input[name="identifier"]').type(username); cy.get('input[name="password"]').type(password); cy.get('button:contains("Sign in")').click(); }); Cypress.Commands.add('signIn', (username: string, password: string) => { const log = Cypress.log({ displayName: 'SignIn', message: [`Logga in med: ${username}`], autoEnd: false, }); log.snapshot('before'); signIn(username, password); log.snapshot('after'); log.end(); }); } ``` ## 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. ```js describe('autentisering', () => { beforeAll(() => { cy.signIn('användarnamn', 'lösenord'); }); it('borde vara autentiserat', () => { cy.contains('Logga ut').should('be.visible'); }); }); ``` 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