Impara a costruire un flusso di autenticazione utente con SvelteKit integrando Logto SDK.
In questo tutorial, ti mostreremo come costruire un flusso di autenticazione utente con SvelteKit integrando il Logto SDK. Il tutorial utilizza TypeScript 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 SvelteKit. Il seguente contenuto può essere un riferimento per usi futuri.
Installa Logto SDK tramite il tuo gestore di pacchetti preferito:
Nel tuo file hooks.server.ts, aggiungi il seguente codice per iniettare il Logto hook nel tuo server:
Poiché queste informazioni sono sensibili, è consigliato utilizzare le variabili di ambiente:
Se hai più hook, puoi usare la funzione helper [sequence()] (https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks) per concatenarli:
Ora puoi accedere al cliente Logto nell'oggetto locals. Per TypeScript, puoi aggiungere il tipo a app.d.ts:
Discuteremo dell'oggetto utente più tardi.
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.
Torna alla tua app, nella pagina in cui vuoi implementare l'accesso e la disconnessione, definisci le seguenti azioni:
Quindi usa queste azioni nel tuo componente Svelte:
Per visualizzare le informazioni dell'utente, puoi iniettare l'oggetto locals.utente nel layout, rendendolo disponibile a tutte le pagine:
Nel tuo componente Svelte:
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!