Creare un SDK web per Logto in pochi minuti
Impara a creare un SDK personalizzato per Logto utilizzando `@logto/browser`.
Logto, una piattaforma di autenticazione open-source, offre un'ampia gamma di SDK ufficiali progettati per semplificare l'integrazione per vari framework e piattaforme. Tuttavia, ci sono ancora molte piattaforme che non hanno SDK ufficiali.
Per colmare questa lacuna, Logto fornisce il pacchetto fondamentale @logto/browser
, progettato per aiutare gli sviluppatori a creare SDK personalizzati adatti a specifiche esigenze. Questo pacchetto implementa le funzionalità principali di Logto, distaccate da qualsiasi framework o piattaforma specifica, purché supporti JavaScript e funzioni in un ambiente di browser.
In questa guida, ti guideremo attraverso i passaggi per creare un SDK per React utilizzando @logto/browser, questo SDK implementerà il flusso di accesso. Puoi seguire gli stessi passaggi per creare un SDK per qualsiasi altra piattaforma basata su JavaScript che funziona in un browser.
Il flusso di accesso
Prima di iniziare, capiamo il flusso di accesso in Logto. Il flusso di accesso consiste nei seguenti passaggi:
- Reindirizzare a Logto: L'utente viene reindirizzato alla pagina di accesso di Logto.
- Autenticazione: L'utente inserisce le proprie credenziali e si autentica con Logto.
- Reindirizza di nuovo alla tua app: Dopo l'autenticazione riuscita, l'utente viene reindirizzato di nuovo alla tua app con un codice di autorizzazione.
- Scambio di codice: La tua app scambia il codice di autorizzazione per i token.
Breve introduzione di @logto/browser
Il pacchetto @logto/browser
espone una classe LogtoClient
che fornisce le funzionalità chiave di Logto, inclusi metodi per il flusso di accesso:
signIn()
: Genera l'URL di autenticazione OIDC e reindirizza ad esso.handleSignInCallback()
: Controlla e analizza l'URL di callback e estrae il codice di autorizzazione, quindi scambia il codice per i token chiamando un endpoint di token.isAuthenticated()
: Controlla se l'utente è autenticato.
Creazione dell'SDK per React
Nell'SDK, forniremo 2 ganci: useLogto
e useHandleSignInCallback
, insieme a un componente LogtoProvider
:
useLogto
: Un gancio che fornisce il metodosignIn
per attivare il flusso di accesso, e lo statoisAuthenticated
per controllare se l'utente è autenticato.useHandleSignInCallback
: Un gancio che gestisce l'URL di callback e scambia il codice di autorizzazione per i token, completando il flusso di accesso.
Per utilizzare l'SDK, puoi semplicemente avvolgere la tua app con il componente LogtoProvider
e utilizzare i ganci per controllare lo stato di autenticazione, per l'accesso e per gestire il callback.
Passaggio 1: Installa il pacchetto
Prima, installa il pacchetto @logto/browser
utilizzando npm o altri gestori di pacchetti:
Passaggio 2: Definisci il contesto di React
Definisci il contesto del provider, contenente 3 parti:
- L'istanza
LogtoClient
di base che verrà inizializzata nel provider e utilizzata nei ganci. - Lo stato di autenticazione.
- Il metodo per impostare lo stato di autenticazione.
Crea un nuovo file context.tsx
e scrivi il seguente codice:
Passaggio 3: Implementa il provider
Con il contesto pronto, implementiamo il provider. Il provider inizializzerà l'istanza LogtoClient
, controllerà se l'utente è autenticato, e fornirà il contesto ai suoi figli.
Crea un nuovo file provider.tsx
:
Passaggio 4: Implementa i ganci
Ora, implementiamo i ganci.
useLogto
: In questo gancio, usiamo il contesto per ottenere l'istanzaLogtoClient
, e forniamo il metodosignIn
e lo statoisAuthenticated
. Puoi continuare ad aggiungere altri metodi a questo gancio.useHandleSignInCallback
: Questo gancio leggerà l'URL di callback dal browser, estrarra il codice di autorizzazione e lo scambierà per i token. Imposterà anche lo stato di autenticazione sutrue
dopo che l'utente si è autenticato.
Crea un nuovo file hooks.ts
e scrivi il seguente codice:
Controllo: utilizzo dell'SDK
Ora, hai creato l'SDK React per Logto. Puoi usarlo nella tua app avvolgendo l'app con il componente LogtoProvider
e utilizzando i ganci per controllare lo stato di autenticazione, accedere e gestire il callback. Puoi controllare il progetto di esempio ufficiale di React qui.
Conclusione
In questa guida, ti abbiamo guidato attraverso i passaggi per creare un SDK React per Logto che implementa il flusso di autenticazione di base. L'SDK fornito qui è un esempio di base. Puoi estenderlo aggiungendo altri metodi e funzionalità per soddisfare le esigenze della tua app.
Puoi seguire gli stessi passaggi per creare un SDK per qualsiasi altra piattaforma basata su JavaScript che funziona in un browser.
Risorse: