Questa guida ti mostrerà come autenticarti con Logto nei tuoi test dell'applicazione a pagina singola (SPA).
L'autenticazione è una parte cruciale di qualsiasi applicazione web ed è essenziale assicurarsi che le protezioni di autenticazione funzionino come previsto nelle applicazioni a pagina singola (SPA). In questa guida ti guideremo attraverso il processo di autenticazione con Logto nei tuoi test Cypress, permettendoti di testare efficacemente il flusso di autenticazione della tua SPA.
Prima di iniziare, assicurati di avere a disposizione quanto segue:
Un account Logto. Se non ne hai uno, puoi registrarti su Logto cloud gratuitamente.
Un'applicazione a pagina singola (SPA) che si integra con Logto per l'autenticazione. Se non ne hai una, segui la nostra guida crea e integra la prima app, crea e registra una nuova applicazione in Logto.
Integra Logto con la tua applicazione SPA utilizzando il nostro SDK pronto all'uso, ad es. React SDK
Potresti seguire la nostra guida all'esperienza di accesso per personalizzare l'esperienza di accesso per la tua applicazione SPA. Simula il flusso di accesso nei tuoi test Cypress di conseguenza.
Completa l'installazione di Cypress e la configurazione. Questa guida presume che tu abbia un ambiente Cypress ben configurato e che tu sia già in grado di eseguire i tuoi test Cypress.
Avvia il tuo servizio Logto e l'applicazione client.
Utilizzeremo la nostra applicazione di esempio React SPA in questa guida. Puoi trovare il codice sorgente qui. È una semplice applicazione React che si integra con Logto utilizzando Logto React SDK per l'autenticazione.
http://localhost:3001/sign-inhttp://localhost:3000username/passwordScriviamo un comando Cypress personalizzato per autenticarti con Logto nei tuoi test Cypress. Utilizzando il comando personalizzato, puoi facilmente autenticarti con Logto in uno qualsiasi dei tuoi test Cypress.
Visita la pagina di accesso della tua applicazione client nel test Cypress e avvia il flusso di accesso cliccando sul pulsante di accesso.
Naviga alla pagina di accesso Logto e compila il nome utente e la password per accedere.
In uso normale, un singolo test Cypress può eseguire comandi in un'unica origine, una limitazione determinata dalle caratteristiche di sicurezza standard del web del browser. Il comando cy.origin() consente ai tuoi test di bypassare questa limitazione.
Dopo un accesso riuscito, dovresti essere in grado di essere reindirizzato alla tua applicazione client.
Racchiudi l'intero flusso di accesso come un comando Cypress personalizzato. cy.signIn in questo esempio.
In uno qualsiasi dei tuoi test Cypress, puoi usare il comando Cypress personalizzato per autenticarti con Logto.
Congratulazioni! Ti sei autenticato con successo con Logto nei tuoi test Cypress. Ora puoi concentrarti sul testare la tua applicazione SPA senza preoccuparti del flusso di autenticazione.