Creare un SDK web per Logto in pochi minuti

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:

1. Reindirizzare a Logto: L'utente viene reindirizzato alla pagina di accesso di Logto.
2. Autenticazione: L'utente inserisce le proprie credenziali e si autentica con Logto.
3. Reindirizza di nuovo alla tua app: Dopo l'autenticazione riuscita, l'utente viene reindirizzato di nuovo alla tua app con un codice di autorizzazione.
4. 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:

1. signIn(): Genera l'URL di autenticazione OIDC e reindirizza ad esso.
2. 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.
3. isAuthenticated(): Controlla se l'utente è autenticato.

Creazione dell'SDK per React#

Nell'SDK, forniremo 2 ganci: useLogto e useHandleSignInCallback, insieme a un componente LogtoProvider:

1. useLogto: Un gancio che fornisce il metodo signIn per attivare il flusso di accesso, e lo stato isAuthenticated per controllare se l'utente è autenticato.
2. 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:

1. L'istanza LogtoClient di base che verrà inizializzata nel provider e utilizzata nei ganci.
2. Lo stato di autenticazione.
3. 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'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:

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:

1. SDK del browser Logto
2. SDK React di Logto