Italiano
  • cypress
  • logto
  • autenticazione

Autenticazione Logto in Cypress

Questa guida ti mostrerà come autenticarti con Logto nei tuoi test dell'applicazione a pagina singola (SPA).

Simeng
Simeng
Developer

Introduzione

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.

Prerequisiti

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.

    crea_applicazione

  • 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.

    esperienza-di-accesso

  • 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.

  • URL di accesso Logto: http://localhost:3001/sign-in
  • Dominio dell'applicazione React SPA: http://localhost:3000
  • Impostazioni dell'esperienza di accesso Logto: username/password

Scrivi un comando Cypress personalizzato per autenticarti con Logto

Scriviamo 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.

Passo 1: Inizia il flusso di accesso

Visita la pagina di accesso della tua applicazione client nel test Cypress e avvia il flusso di accesso cliccando sul pulsante di accesso.

home

Passo 2: Compila il modulo di accesso e invia

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.

  1. Verifica che l'URL corrente sia la pagina di accesso Logto. accesso
  2. Identifica i campi di input del nome utente e della password e inserisci nome utente e password. invia
  3. Fai clic sul pulsante di accesso per accedere.

Passo 3: Autenticazione riuscita e reindirizzamento alla tua applicazione client

Dopo un accesso riuscito, dovresti essere in grado di essere reindirizzato alla tua applicazione client.

callback

Passo 4: Racchiudi l'intero flusso di accesso come un comando Cypress personalizzato

Racchiudi l'intero flusso di accesso come un comando Cypress personalizzato. cy.signIn in questo esempio.

Usa il comando Cypress personalizzato per autenticare la tua applicazione

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.

Prova Logto Cloud