Costruisci l'autenticazione Nuxt con Logto
Scopri come costruire un flusso di autenticazione degli utenti con Nuxt integrando il SDK Logto.
Founder
Cominciamo
Introduzione
- Logto è un'alternativa open-source ad Auth0 per costruire infrastrutture di identità. Supporta vari metodi di accesso, inclusi nome utente, email, numero di telefono e popolari accessi social come Google e GitHub.
- Nuxt una struttura open source che rende lo sviluppo web intuitivo e potente.
In questo tutorial, ti mostreremo come costruire un flusso di autenticazione utente con Nuxt integrando il Logto SDK. Il tutorial utilizza JavaScript tipo come linguaggio di programmazione.
Prerequisiti
Prima di iniziare, assicurati di avere quanto segue:
- Un account Logto. Se non ne hai uno, puoi iscriverti gratuitamente.
- Un ambiente di sviluppo A Nuxt e un progetto.
Crea un'applicazione Logto
Per iniziare, crea un'applicazione Logto con il tipo "web tradizionale". Segui questi passaggi per creare un'applicazione Logto:
- Accedi alla Console Logto.
- Nella barra di navigazione a sinistra, clicca su Applicazioni.
- Clicca su Crea applicazione.
- Nella pagina aperta, trova la sezione "web tradizionale" e individua la scheda "Nuxt".
- Clicca su Inizia a costruire e inserisci il nome della tua applicazione.
- Clicca su Crea.
Dovresti quindi vedere una guida interattiva che ti guida attraverso il processo di integrazione del Logto SDK con la tua applicazione Nuxt. Il seguente contenuto può essere un riferimento per usi futuri.
Integra Logto SDK
Installazione
Installa Logto SDK tramite il tuo gestore di pacchetti preferito:
Registra il modulo Logto
Nel tuo file di configurazione Nuxt (nuxt.config.ts), aggiungi il modulo Logto:
La configurazione minima per il modulo è la seguente:
Dato che queste informazioni sono sensibili, si raccomanda di utilizzare variabili d'ambiente:
Vedi la configurazione del runtime per maggiori informazioni.
Implementa il login e il logout
Configura gli URI di reindirizzamento
Passa alla pagina dei dettagli dell'applicazione della Console Logto. Aggiungi un URI di reindirizzamento http://localhost:3000/callback.
URI di reindirizzamento è un concetto di OAuth 2.0 che implica la posizione a cui reindirizzare dopo l'autenticazione.
Allo stesso modo, aggiungi http://localhost:3000/ alla sezione "URI di reindirizzamento post-logout".
URI di reindirizzamento post-logout è un concetto di OAuth 2.0 che implica la posizione a cui reindirizzare dopo il logout.
Quindi clicca su "Salva" per salvare le modifiche.
Quando si registra il modulo @logto / nuxt, farà quanto segue:
- Aggiungi tre percorsi per l'accesso (
/login), l'uscita (/logout) e la callback (/callback). - Importa due composti:
utilizzaLogtoClienteutilizzaLogtoUser.
Questi percorsi possono essere configurati tramite logto.pathnames nelle opzioni del modulo, per esempio:
Dai un'occhiata al file di definizione del tipo nel pacchetto @logto/nuxt per maggiori informazioni.
Dato che le pagine Nuxt saranno reidratate e diventeranno un'applicazione a pagina singola (SPA) dopo il caricamento iniziale, è necessario reindirizzare l'utente verso la rotta di login o logout, se necessario.
Visualizza le informazioni dell'utente
Per visualizzare le informazioni dell'utente, è possibile utilizzare il componibile utilizzaLogtoUser(), che è disponibile sia sul lato server che sul lato client:
Punto di controllo: Esegui l'applicazione
Ora puoi eseguire l'applicazione e provare ad accedere/disconnetterti con Logto:
- Apri l'applicazione nel tuo browser, dovresti vedere il pulsante "Accedi".
- Clicca sul pulsante "Accedi" e dovresti essere reindirizzato alla pagina di accesso di Logto.
- Dopo aver effettuato l'accesso, dovresti essere reindirizzato di nuovo all'applicazione e dovresti vedere i dati dell'utente e il pulsante "Disconnetti".
- Clicca sul pulsante "Disconnetti" e dovresti essere reindirizzato alla pagina di disconnessione di Logto e poi di nuovo all'applicazione con uno stato non autenticato.
Se incontri problemi durante l'integrazione, non esitare a unirti al nostro server Discord per parlare con la comunità e il team di Logto!