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.
Prima di iniziare, capiamo il flusso di accesso in Logto. Il flusso di accesso consiste nei seguenti passaggi:
@logto/browserIl 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.Nell'SDK, forniremo 2 ganci: useLogto e useHandleSignInCallback, insieme a un componente LogtoProvider:
useLogto: Un gancio che fornisce il metodo signIn per attivare il flusso di accesso, e lo stato isAuthenticated 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.
Prima, installa il pacchetto @logto/browser utilizzando npm o altri gestori di pacchetti:
Definisci il contesto del provider, contenente 3 parti:
LogtoClient di base che verrà inizializzata nel provider e utilizzata nei ganci.Crea un nuovo file context.tsx e scrivi il seguente codice:
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:
Ora, implementiamo i ganci.
useLogto: In questo gancio, usiamo il contesto per ottenere l'istanza LogtoClient, e forniamo il metodo signIn e lo stato isAuthenticated. 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 su true dopo che l'utente si è autenticato.Crea un nuovo file hooks.ts e scrivi il seguente codice:
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.
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: