Skapa ett web-SDK för Logto på några minuter

Logto, en öppen källkods autoplattform, erbjuder en mängd officiella SDK:er som är utformade för att förenkla integrationen för olika ramverk och plattformar. Det finns dock fortfarande många plattformar som inte har officiella SDK:er.

För att överbrygga denna lucka tillhandahåller Logto det grundläggande paketet @logto/browser, designat för att hjälpa utvecklare skapa anpassade SDK:er skräddarsydda efter specifika behov. Detta paket implementerar Logtos kärnfunktioner, frikopplade från något specifikt ramverk eller plattform, så länge det stöder JavaScript och körs i en webbläsarmiljö.

I denna guide kommer vi att gå igenom stegen för att skapa ett React SDK med hjälp av @logto/browser. Detta SDK kommer att implementera inloggningsflödet. Du kan följa samma steg för att skapa ett SDK för vilken annan JavaScript-baserad plattform som helst som körs i en webbläsare.

Inloggningsflödet#

Innan vi börjar, låt oss förstå inloggningsflödet i Logto. Inloggningsflödet består av följande steg:

1. Omdirigera till Logto: Användaren omdirigeras till Logtos inloggningssida.
2. Autentisering: Användaren anger sina inloggningsuppgifter och autentiserar med Logto.
3. Omdirigera tillbaka till din app: Efter framgångsrik autentisering omdirigeras användaren tillbaka till din app med en auktoriseringskod.
4. Kodutbyte: Din app byter ut auktoriseringskoden mot tokens.

Kort introduktion av @logto/browser#

Paketet @logto/browser exponerar en LogtoClient klass som tillhandahåller Logtos kärnfunktioner, inklusive metoder för inloggningsflödet:

1. signIn(): Genererar OIDC-autoriserings-URL:en och omdirigerar till den.
2. handleSignInCallback(): Kontrollerar och analyserar retur-URL:en och extraherar auktoriseringskoden, sedan byter koden mot tokens genom att anropa token-endpointen.
3. isAuthenticated(): Kontrollera om användaren är autentiserad.

Skapa React SDK:et#

I SDK:et kommer vi att tillhandahålla 2 hooks: useLogto och useHandleSignInCallback, tillsammans med en LogtoProvider komponent:

1. useLogto: En hook som tillhandahåller metoden signIn för att initiera inloggningsflödet och tillståndet isAuthenticated för att kontrollera om användaren är autentiserad.
2. useHandleSignInCallback: En hook som hanterar retur-URL:en och byter auktoriseringskoden mot tokens, fullfölj inloggningsflödet.

För att använda SDK:et kan du enkelt omsluta din app med LogtoProvider komponenten och använda hooks för att kontrollera autentiseringstillstånd, logga in och hantera återkopplingen.

Steg 1: Installera paketet#

Först, installera @logto/browser paketet med npm eller andra pakethanterare:

Steg 2: Definiera kontexten i React#

Definiera kontexten för leverantören, innehållande 3 delar:

1. Den underliggande LogtoClient instansen som kommer att initieras i leverantören och användas i hooks.
2. Autentiseringstillståndet.
3. Metoden för att ställa in autentiseringstillståndet.

Skapa en ny fil context.tsx och skriv följande kod:

Steg 3: Implementera leverantören#

Med kontexten redo, låt oss implementera leverantören. Leverantören kommer att initiera LogtoClient instansen, kontrollera om användaren är autentiserad och tillhandahålla kontexten till sina barn.

Skapa en ny fil provider.tsx:

Steg 4: Implementera hooks#

Nu, låt oss implementera hooks.

• useLogto: I denna hook använder vi kontexten för att få LogtoClient instansen och tillhandahåller metoden signIn och isAuthenticated-tillståndet. Du kan fortsätta att lägga till fler metoder till denna hook.
• useHandleSignInCallback: Denna hook kommer att läsa callback URL från webbläsaren, extrahera auktoriseringskoden och byta den mot tokens. Den kommer också att ställa in autentiseringstillståndet till true efter att användaren är autentiserad.

Skapa en ny fil hooks.ts och skriv följande kod:

Kontrollpunkt: använda SDK:et#

Nu har du skapat React SDK för Logto. Du kan använda det i din app genom att omsluta appen med LogtoProvider komponenten och använda hooks för att kontrollera autentiseringstillstånd, logga in och hantera återkopplingen. Du kan kontrollera det officiella React-exempelprojektet här.

Slutsats#

I denna guide har vi gått igenom stegen för att skapa en React SDK för Logto som implementerar det grundläggande autentiseringsflödet. SDK:et som tillhandahålls här är ett grundläggande exempel. Du kan utöka det genom att lägga till fler metoder och funktioner för att möta dina apps behov.

Du kan följa samma steg för att skapa ett SDK för vilken annan JavaScript-baserad plattform som helst som körs i en webbläsare.

Resurser:

1. Logto Browser SDK
2. Logto React SDK