Italiano
  • react
  • react-native
  • expo
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Costruire l'autenticazione di Expo (React Native) con Logto

Impara come costruire un flusso di autenticazione utente con Expo (React Native) 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.
  • Expo (React Native) è un ecosistema di strumenti che ti aiutano a creare app native universali con React che funzionano su Android, iOS e sul web.

In questo tutorial, ti mostreremo come costruire un flusso di autenticazione utente con Expo (React Native) integrando il Logto SDK. Il tutorial utilizza TypeScript come linguaggio di programmazione.

Prerequisiti

Prima di iniziare, assicurati di avere quanto segue:

  • Un account Logto. Se non ne hai uno, puoi iscriverti gratuitamente.
  • Un ambiente di sviluppo An Expo (React Native) e un progetto.

Crea un'applicazione Logto

Per iniziare, crea un'applicazione Logto con il tipo "Native". 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 "Native" e individua la scheda "Expo (React Native)".
  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 Expo (React Native). 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 e dipendenze correlate tramite il tuo gestore di pacchetti preferito:

Il pacchetto @logto/rn è l'SDK per Logto. Gli altri pacchetti sono le sue dipendenze correlate. Non possono essere elencati come dipendenze dirette perché l'Expo CLI richiede che tutte le dipendenze per i moduli nativi siano installate direttamente all'interno del package.json del progetto principale.

Inizializzare il provider Logto

Importa e usa LogtoProvider per fornire un contesto Logto:

Implementa accesso e disconnessione

Passa alla pagina dei dettagli dell'applicazione di Logto Console. Aggiungi un URI di reindirizzamento nativo (ad esempio, io.logto://callback), quindi clicca "Salva".

  • Per iOS, lo schema URI di reindirizzamento non ha molta importanza poiché la classe ASWebAuthenticationSession ascolterà l'URI di reindirizzamento indipendentemente dal fatto che sia registrato o meno.

  • Per Android, lo schema URI di reindirizzamento deve essere compilato nel file app.json di Expo, ad esempio:

Ora torna alla tua app, puoi usare il hook useLogto per accedere e disconnetterti:

Visualizza le informazioni dell'utente

Per visualizzare le informazioni dell'utente, puoi usare il metodo getIdTokenClaims():

Punto di 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!

Letture successive

Prova Logto Oggi