Suomi
  • cypress
  • logto
  • tunnistautuminen

Logton tunnistautuminen Cypressissä

Tämä opas näyttää, kuinka tunnistaudut Logton kanssa Single Page Application (SPA) -testissäsi.

Simeng
Simeng
Developer

Lopeta viikkojen tuhlaaminen käyttäjien tunnistautumiseen
Julkaise turvallisia sovelluksia nopeammin Logtolla. Integroi käyttäjien tunnistautuminen minuuteissa ja keskity ydintuotteeseesi.
Aloita
Product screenshot

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.

  • Single Page Application (SPA), joka on integroitu Logton kanssa tunnistautumista varten. Jos sinulla ei ole sellaista, seuraa luo-ja-integroi-ensimmäinen-sovellus -opastamme, luo ja rekisteröi uusi sovellus Logtoon.

    luo_sovellus

  • Integroi Logto SPA-sovellukseesi meidän valmiiksi rakennetuilla SDK:illamme, esim. React SDK

  • Voit seurata kirjautumiskokemuksen mukautustamme mukauttaaksesi kirjautumiskokemuksen omaa SPA-sovellustasi varten. Simuloi kirjautumisprosessia Cypress-testeissäsi vastaavasti.

    kirjautumiskokemus

  • Viimeistele Cypressin asennus 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ä.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.

koti

Vaihe 2: Täytä kirjautumislomake ja lähetä

Siiry Logton kirjautumissivulle ja täytä käyttäjätunnus ja salasana kirjautuaksesi.

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.

  1. Varmista, että nykyinen URL-osoite on Logton kirjautumissivu. kirjautuminen
  2. Tunnista käyttäjätunnuksen ja salasanan syöttökentät ja kirjoita käyttäjätunnus ja salasana. lähetä
  3. Klikkaa kirjautumispainiketta kirjautuaksesi.

Vaihe 3: Onnistunut tunnistautuminen ja paluu asiakassovellukseen

Onnistuneen kirjautumisen jälkeen sinun tulee voida palata asiakassovellukseesi.

kutsu

Vaihe 4: Kääri koko kirjautumisprosessi mukautettuna Cypress-komentona

Kääri koko kirjautumisprosessi mukautettuna Cypress-komentona. cy.signIn tässä esimerkissä.

Käytä mukautettua Cypress-komentoa sovelluksesi tunnistautumiseen

Missä tahansa Cypress-testissäsi voit käyttää mukautettua Cypress-komentoa tunnistautuaksesi Logton avulla.

Onneksi olkoon! Olet onnistuneesti tunnistautunut Logton kanssa Cypress-testeissäsi. Voit nyt keskittyä testaamaan SPA-sovellustasi murehtimatta tunnistautumisprosessista.

Kokeile Logto Cloudia