Scopri come costruire un flusso di autenticazione degli utenti con Nuxt integrando il SDK Logto.
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.
Prima di iniziare, assicurati di avere quanto segue:
Per iniziare, crea un'applicazione Logto con il tipo "web tradizionale". Segui questi passaggi per creare un'applicazione Logto:
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.
Installa Logto SDK tramite il tuo gestore di pacchetti preferito:
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.
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:
/login), l'uscita (/logout) e la callback (/callback).utilizzaLogtoClient e utilizzaLogtoUser.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.
Per visualizzare le informazioni dell'utente, è possibile utilizzare il componibile utilizzaLogtoUser(), che è disponibile sia sul lato server che sul lato client:
Ora puoi eseguire l'applicazione e provare ad accedere/disconnetterti con Logto:
Se incontri problemi durante l'integrazione, non esitare a unirti al nostro server Discord per parlare con la comunità e il team di Logto!