## Johdanto Tunnistautuminen on kriittinen osa mitä tahansa verkkosovellusta, ja on tärkeää varmistaa, että tunnistautumisvahdit toimivat odotetusti Single Page Application (SPA) -sovelluksissa. Tässä oppaassa opastamme sinut tunnistautumisprosessin läpi Logton avulla Cypress-testeissäsi, mikä mahdollistaa SPA-sovelluksesi tunnistautumisprosessin tehokkaan testaamisen. ## Esivaatimukset Ennen kuin syvennyt aiheeseen, varmista, että sinulla on seuraavat asiat valmiina: - Logto-tili. Jos sinulla ei ole sellaista, voit [rekisteröityä Logto Cloudiin ilmaiseksi](https://cloud.logto.io/). - Single Page Application (SPA), joka on integroitu Logton kanssa tunnistautumista varten. Jos sinulla ei ole sellaista, seuraa [luo-ja-integroi-ensimmäinen-sovellus](https://docs.logto.io/docs/tutorials/get-started/create-and-integrate-the-first-app/) -opastamme, luo ja rekisteröi uusi sovellus Logtoon. luo_sovellus

- Integroi Logto SPA-sovellukseesi meidän valmiiksi rakennetuilla SDK:illamme, esim. [React SDK](https://docs.logto.io/docs/recipes/integrate-logto/react/) - Voit seurata [kirjautumiskokemuksen mukautustamme](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience/) mukauttaaksesi kirjautumiskokemuksen omaa SPA-sovellustasi varten. Simuloi kirjautumisprosessia Cypress-testeissäsi vastaavasti. kirjautumiskokemus

- Viimeistele [Cypressin asennus](https://docs.cypress.io/guides/getting-started/installing-cypress) ja konfigurointi. Tämä opas olettaa, että sinulla on hyvin asennettu Cypress-ympäristö ja voit jo suorittaa Cypress-testisi. - Käynnistä Logto-palvelusi ja asiakassovelluksesi.
Käytämme esimerkkinä tässä oppaassa React SPA Sample -sovellustamme. Lähdekoodin löydät [täältä](https://github.com/logto-io/js/tree/master/packages/react-sample).Se on yksinkertainen React-sovellus, joka integroituu Logtoon käyttäen Logto React SDK:ta tunnistautumiseen. - Logton kirjautumisosoite: `http://localhost:3001/sign-in` - React SPA-sovelluksen domain: `http://localhost:3000` - Logton kirjautumiskokemusasetukset: `käyttäjätunnus/salasana` ## Kirjoita mukautettu Cypress-komento tunnistautumiseen Logton kanssa Kirjoitetaan mukautettu Cypress-komento tunnistautumiseen Logton kanssa Cypress-testeissäsi. Mukautetun komennon avulla voit helposti tunnistautua Logton kanssa missä tahansa Cypress-testissäsi. ### Vaihe 1: Käynnistä kirjautumisprosessi Vierail in asiakassovelluksesi kirjautumissivulla Cypress-testissä ja käynnistä kirjautumisprosessi napsauttamalla kirjautumispainiketta. ```js cy.visit('http://localhost:3000'); cy.get('button:contains("Kirjaudu sisään")').click(); ``` ![koti](https://uploads.strapi.logto.io/1/home_3fad5dbe85.webp) ### Vaihe 2: Täytä kirjautumislomake ja lähetä Siiry Logton kirjautumissivulle ja täytä käyttäjätunnus ja salasana kirjautuaksesi. Logton kirjautumissivu sijaitsee eri domainissa (http://localhost:3001/sign-in tässä esimerkissä). Sinun tulee tunnistautua vierailemalla eri domainissa [cy.origin](https://docs.cypress.io/api/commands/origin) avulla. > Normaaleissa olosuhteissa yksi Cypress-testi voi ajaa komentoja vain yhdessä alkuperässä, selaimen tavallisten verkkoturvallisuusominaisuuksien määräämä rajoitus. cy.origin() -komento sallii testiesi ohittaa tämän rajoituksen. ```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("Kirjaudu sisään")').click(); }); ``` 1. Varmista, että nykyinen URL-osoite on Logton kirjautumissivu. ![kirjautuminen](https://uploads.strapi.logto.io/1/sign_in_70bfa68101.webp) 2. Tunnista käyttäjätunnuksen ja salasanan syöttökentät ja kirjoita käyttäjätunnus ja salasana. ![lähetä](https://uploads.strapi.logto.io/1/submit_39b9cb7b5f.webp) 3. Klikkaa kirjautumispainiketta kirjautuaksesi. Voit kirjoittaa uudelleen yllä olevan lomaketäyttölogiikan kirjautumiskokemusasettelujen perusteella. ### Vaihe 3: Onnistunut tunnistautuminen ja paluu asiakassovellukseen Onnistuneen kirjautumisen jälkeen sinun tulee voida palata asiakassovellukseesi. ```js cy.contains('Logto React Sample').should('be.visible'); ``` ![kutsu](https://uploads.strapi.logto.io/1/callback_b9ad9e58a4.webp) ### Vaihe 4: Kääri koko kirjautumisprosessi mukautettuna Cypress-komentona Kääri koko kirjautumisprosessi mukautettuna Cypress-komentona. `cy.signIn` tässä esimerkissä. ```js function signIn(username: string, password: string) { cy.visit('http://localhost:3000'); cy.get('button:contains("Kirjaudu sisään")').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("Kirjaudu sisään")').click(); }); Cypress.Commands.add('signIn', (username: string, password: string) => { const log = Cypress.log({ displayName: 'SignIn', message: [`Kirjaudu sisään käyttäen: ${username}`], autoEnd: false, }); log.snapshot('ennen'); signIn(username, password); log.snapshot('jälkeen'); log.end(); }); } ``` ## Käytä mukautettua Cypress-komentoa sovelluksesi tunnistautumiseen Missä tahansa Cypress-testissäsi voit käyttää mukautettua Cypress-komentoa tunnistautuaksesi Logton avulla. ```js describe('tunnistautuminen', () => { beforeAll(() => { cy.signIn('username', 'password'); }); it('tulisi olla tunnistautunut', () => { cy.contains('Kirjaudu ulos').should('be.visible'); }); }); ``` Onneksi olkoon! Olet onnistuneesti tunnistautunut Logton kanssa Cypress-testeissäsi. Voit nyt keskittyä testaamaan SPA-sovellustasi murehtimatta tunnistautumisprosessista. Kokeile Logto Cloudia