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à.
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à.
Prima di iniziare, assicurati di avere i seguenti elementi:
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:
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.
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.
endpoint è l'endpoint API di Logto. Puoi trovarlo nella guida integrata o nella sezione Domains nelle impostazioni del tenant.appId è l'ID dell'applicazione Logto. Puoi trovarlo nella pagina dei dettagli dell'applicazione.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.
Esegui l'app Capacitor e fai clic sul pulsante di accesso. Si aprirà una finestra del browser, reindirizzandoti alla pagina di accesso Logto.
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:
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!