Italiano
  • svelte
  • sveltekit
  • node
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Costruisci l'autenticazione SvelteKit con Logto

Impara a costruire un flusso di autenticazione utente con SvelteKit integrando Logto SDK.

Gao
Gao
Founder

Inizia

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.
  • SvelteKit è un framework per lo sviluppo rapido di potenti applicazioni web performanti utilizzando Svelte.

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.

Prerequisiti

Prima di iniziare, assicurati di avere quanto segue:

Crea un'applicazione Logto

Per iniziare, crea un'applicazione Logto con il tipo "Web tradizionale". Segui questi passaggi per creare un'applicazione Logto:

  1. Accedi alla Console Logto.
  2. Nella barra di navigazione a sinistra, clicca su Applicazioni.
  3. Clicca su Crea applicazione.
  4. Nella pagina aperta, trova la sezione "Web tradizionale" e individua la scheda "SvelteKit".
  5. Clicca su Inizia a costruire e inserisci il nome della tua applicazione.
  6. Clicca su Crea.

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.

Prova la guida interattiva di Logto Cloud

Integra con Logto SDK

Installazione

Installa Logto SDK tramite il tuo gestore di pacchetti preferito:

Aggiungi Logto hook

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.

Implementa l'accesso e la disconnessione

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.

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:

Visualizza le informazioni dell'utente

Per visualizzare le informazioni dell'utente, puoi iniettare l'oggetto locals.utente nel layout, rendendolo disponibile a tutte le pagine:

Nel tuo componente Svelte:

Controllo: Esegui l'applicazione

Ora puoi eseguire l'applicazione e provare ad accedere/disconnetterti con Logto:

  1. Apri l'applicazione nel tuo browser, dovresti vedere il pulsante "Accedi".
  2. Clicca sul pulsante "Accedi" e dovresti essere reindirizzato alla pagina di accesso di Logto.
  3. Dopo aver effettuato l'accesso, dovresti essere reindirizzato di nuovo all'applicazione e dovresti vedere i dati dell'utente e il pulsante "Disconnetti".
  4. 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!

Ulteriori letture

Prova Logto oggi