## 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](https://cloud.logto.io/). - 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](https://docs.logto.io/docs/tutorials/get-started/create-and-integrate-the-first-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](https://docs.logto.io/docs/recipes/integrate-logto/react/) - Je kunt onze [aanmeldingservaring handleiding](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience/) volgen om de aanmeldingservaring voor je eigen SPA-applicatie aan te passen. Simuleer de aanmeldingsstroom in je Cypress-tests overeenkomstig.

- Voltooi de [Cypress-installatie](https://docs.cypress.io/guides/getting-started/installing-cypress) 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](https://github.com/logto-io/js/tree/master/packages/react-sample). 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. ```js cy.visit('http://localhost:3000'); cy.get('button:contains("Sign In")').click(); ``` ![home](https://uploads.strapi.logto.io/1/home_3fad5dbe85.webp) ### 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. De Logto-aanmeldingspagina is gehost op een ander domein (http://localhost:3001/sign-in in dit voorbeeld). Je moet authenticeren door een ander domein te bezoeken met [cy.origin](https://docs.cypress.io/api/commands/origin). > 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. ```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. Bevestig dat de huidige URL de Logto-aanmeldingspagina is. ![sign-in](https://uploads.strapi.logto.io/1/sign_in_70bfa68101.webp) 2. Identificeer de invoervelden voor gebruikersnaam en wachtwoord en vul de gebruikersnaam en het wachtwoord in. ![submit](https://uploads.strapi.logto.io/1/submit_39b9cb7b5f.webp) 3. Klik op de aanmeldknop om aan te melden. Je kunt de bovenstaande logica voor formulierinvoer herschrijven op basis van je aanmeldingsinstellingen. ### Stap 3: Succesvol geauthentiseerd en teruggeleid naar je clientapplicatie Na een succesvolle aanmelding zou je moeten worden teruggeleid naar je clientapplicatie. ```js cy.contains('Logto React Sample').should('be.visible'); ``` ![callback](https://uploads.strapi.logto.io/1/callback_b9ad9e58a4.webp) ### 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. ```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: [`Sign in with: ${username}`], autoEnd: false, }); log.snapshot('before'); signIn(username, password); log.snapshot('after'); log.end(); }); } ``` ## 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. ```js describe('authentication', () => { beforeAll(() => { cy.signIn('username', 'password'); }); it('should be authenticated', () => { cy.contains('Sign Out').should('be.visible'); }); }); ``` 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