## 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](https://cloud.logto.io/). - 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](https://docs.logto.io/docs/tutorials/get-started/create-and-integrate-the-first-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](https://docs.logto.io/docs/recipes/integrate-logto/react/) - Potresti seguire la nostra [guida all'esperienza di accesso](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience/) 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](https://docs.cypress.io/guides/getting-started/installing-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](https://github.com/logto-io/js/tree/master/packages/react-sample). È 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. ```js cy.visit('http://localhost:3000'); cy.get('button:contains("Accesso")').click(); ``` ![home](https://uploads.strapi.logto.io/1/home_3fad5dbe85.webp) ### 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. La pagina di accesso Logto è ospitata su un dominio diverso (http://localhost:3001/sign-in in questo esempio). Dovrai autenticarti visitando un dominio diverso con [cy.origin](https://docs.cypress.io/api/commands/origin). > 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. ```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. Verifica che l'URL corrente sia la pagina di accesso Logto. ![accesso](https://uploads.strapi.logto.io/1/sign_in_70bfa68101.webp) 2. Identifica i campi di input del nome utente e della password e inserisci nome utente e password. ![invia](https://uploads.strapi.logto.io/1/submit_39b9cb7b5f.webp) 3. Fai clic sul pulsante di accesso per accedere. Puoi riscrivere la logica di compilazione del modulo sopra basata sulle impostazioni della tua esperienza di accesso. ### 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. ```js cy.contains('Logto React Sample').should('be.visible'); ``` ![callback](https://uploads.strapi.logto.io/1/callback_b9ad9e58a4.webp) ### 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. ```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(); }); } ``` ## 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. ```js describe('autenticazione', () => { beforeAll(() => { cy.signIn('username', 'password'); }); it('should be authenticated', () => { cy.contains('Sign Out').should('be.visible'); }); }); ``` 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