Costruisci l'autenticazione CapacitorJS con Logto
In questo tutorial, dimostreremo come costruire il flusso di autenticazione con Logto in Capacitor. Questo ti permetterà di creare flussi di accesso e registrazione multipiattaforma con facilità.
Founder
Introduzione
- Logto è una moderna alternativa a Auth0 per costruire infrastrutture di identità cliente con il minimo sforzo. Supporta vari metodi di accesso, inclusi nome utente, email, numero di telefono e popolari accessi social come Google e GitHub.
- Capacitor è un runtime nativo open-source per costruire app Web Native.
In questo tutorial, dimostreremo come costruire il flusso di autenticazione con Logto in Capacitor. Questo ti permetterà di creare flussi di accesso e registrazione multipiattaforma con facilità.
Prerequisiti
Prima di iniziare, assicurati di avere i seguenti elementi:
- Un account Logto. Se non ne hai uno, puoi iscriverti gratuitamente.
- Un progetto Capacitor. Puoi seguire la guida ufficiale per crearne uno.
Crea un'applicazione Logto
Per iniziare, crea un'applicazione Logto di tipo "Nativa". Le applicazioni Logto servono come applicazioni client nei flussi OAuth 2.0 e OpenID Connect (OIDC). Segui questi passaggi per creare un'applicazione Logto:
- Accedi al Logto Cloud Console.
- Nella barra di navigazione sinistra, fai clic su Applications.
- Fai clic su Create application.
- Seleziona Native come tipo di applicazione e inserisci il nome dell'applicazione.
- Fai clic su Create.
Dopo aver creato l'applicazione Logto, configura l'URI di reindirizzo. L'URI di reindirizzo viene utilizzato per reindirizzare l'utente alla tua applicazione dopo il flusso di autenticazione.
Assicurati che l'URI reindirizzi all'app Capacitor, ad esempio, com.example.app://callback. Il valore può variare a seconda della configurazione dell'app Capacitor. Per ulteriori dettagli, vedi Collegamenti profondi di Capacitor.
Ricorda di fare clic su Save Changes dopo aver aggiornato l'URI di reindirizzo.
Se non sei sicuro dell'URI di reindirizzo, puoi lasciarlo vuoto per ora e aggiornarlo in seguito.
Configura Capacitor
Supponendo che tu abbia già un progetto Capacitor, questo tutorial è indipendente dal framework, quindi puoi utilizzare qualsiasi framework UI che preferisci e aggiornare il codice di conseguenza.
Installa le dipendenze
Inizializza il client Logto
- L'
endpointè l'endpoint API di Logto. Puoi trovarlo nella guida integrata o nella sezione Domains nelle impostazioni del tenant. - L'
appIdè l'ID dell'applicazione Logto. Puoi trovarlo nella pagina dei dettagli dell'applicazione.
Implementa il pulsante di accesso
Aggiungi il seguente codice al gestore onClick del pulsante di accesso:
Sostituisci com.example.app://callback con l'URI di reindirizzo che hai configurato nell'applicazione Logto.
Checkpoint: Attiva il flusso di autenticazione
Esegui l'app Capacitor e fai clic sul pulsante di accesso. Si aprirà una finestra del browser, reindirizzandoti alla pagina di accesso Logto.
Disconnessione
Poiché Capacitor utilizza il Safari View Controller su iOS e le Chrome Custom Tabs su Android, lo stato di autenticazione può essere conservato per un po' di tempo. Tuttavia, a volte l'utente potrebbe voler disconnettersi immediatamente dall'applicazione. In questo caso, possiamo utilizzare il metodo signOut per disconnettere l'utente:
Il metodo signOut ha un parametro opzionale per l'URI di reindirizzo post-disconnessione. Se non viene fornito, l'utente verrà reindirizzato alla pagina di disconnessione di Logto:
L'utente deve fare clic su "Fine" per chiudere la visualizzazione web e ritornare all'app Capacitor. Se vuoi reindirizzare automaticamente l'utente all'app Capacitor, puoi fornire l'URI di reindirizzo post-disconnessione:
Assicurati che l'URI di reindirizzo post-disconnessione reindirizzi all'app Capacitor e ricorda di aggiungere l'URI di reindirizzo post-disconnessione al Logto Console:
Checkpoint: Completa il flusso di autenticazione
Esegui nuovamente l'app Capacitor e fai clic sul pulsante di accesso. Se tutto procede bene, al completamento del flusso di autenticazione, l'app Capacitor riceverà il risultato del login e stamperà le informazioni dell'utente nella console.
Quindi fai clic sul pulsante di disconnessione e l'app Capacitor verrà reindirizzata alla pagina di disconnessione di Logto. Si reindirizzerà automaticamente all'app Capacitor se l'URI di reindirizzo post-disconnessione è configurato.
Ora puoi configurare il flusso di autenticazione nel Logto Cloud Console senza scrivere codice complesso. La configurazione si applicherà a tutte le applicazioni client, garantendo un'esperienza utente coerente.
Se riscontri problemi durante l'integrazione, non esitare a contattarci tramite email a [email protected] o unisciti al nostro server Discord!