Een web SDK voor Logto maken in minuten

Logto, een open-source authenticatieplatform, biedt een veelheid aan officiële SDK's die zijn ontworpen om integratie voor verschillende frameworks en platformen te vereenvoudigen. Er zijn echter nog veel platformen waarvoor geen officiële SDK's bestaan.

Om deze kloof te overbruggen, biedt Logto het fundamentele pakket @logto/browser, dat is ontworpen om ontwikkelaars te helpen bij het maken van aangepaste SDK's die zijn afgestemd op specifieke vereisten. Dit pakket implementeert de kernfunctionaliteiten van Logto, los van elk specifiek framework of platform, zolang het JavaScript ondersteunt en in een browserverdeler draait.

In deze handleiding nemen we je mee door de stappen om een React SDK te maken met behulp van @logto/browser, deze SDK zal de inlogstroom implementeren. Je kunt dezelfde stappen volgen om een SDK te maken voor elk ander JavaScript-gebaseerd platform dat in de browser draait.

De inlogstroom#

Voordat we beginnen, laten we de inlogstroom in Logto begrijpen. De inlogstroom bestaat uit de volgende stappen:

1. Redirect naar Logto: De gebruiker wordt doorgestuurd naar de Logto inlogpagina.
2. Authenticatie: De gebruiker voert zijn inloggegevens in en authenticeert bij Logto.
3. Redirect terug naar je app: Na succesvolle authenticatie wordt de gebruiker teruggestuurd naar je app met een autorisatiecode.
4. Code-uitwisseling: Je app wisselt de autorisatiecode uit voor tokens.

Korte introductie van @logto/browser#

Het @logto/browser pakket stelt een LogtoClient class beschikbaar die de kernfunctionaliteiten van Logto biedt, inclusief methoden voor de inlogstroom:

1. signIn(): Genereert de OIDC-auth URL en redirect ernaar.
2. handleSignInCallback(): Controleert en parseert de callback-URL en extraheert de autorisatiecode, en wisselt vervolgens de code uit voor tokens door het token eindpunt aan te roepen.
3. isAuthenticated(): Controleert of de gebruiker geauthenticeerd is.

Het maken van de React SDK#

In de SDK zullen we 2 hooks bieden: useLogto en useHandleSignInCallback, samen met een LogtoProvider component:

1. useLogto: Een hook die de signIn methode biedt om de aanmeldingsstroom te activeren, en de isAuthenticated status om te controleren of de gebruiker geauthenticeerd is.
2. useHandleSignInCallback: Een hook die de callback-URL verwerkt en de autorisatiecode uitwisselt voor tokens, waarmee de aanmeldingsstroom wordt voltooid.

Om de SDK te gebruiken, kun je eenvoudig je app omwikkelen met het LogtoProvider component, en de hooks gebruiken om de auth-status te controleren, in te loggen en de callback te verwerken.

Stap 1: Installeer het pakket#

Installeer eerst het @logto/browser pakket met npm of andere pakketbeheerders:

Stap 2: Definieer de context van React#

Definieer de context van de provider, bestaande uit 3 delen:

1. De onderliggende LogtoClient instantie die in de provider zal worden geïnitialiseerd en in de hooks zal worden gebruikt.
2. De authenticatiestatus.
3. De methode om de authenticatiestatus in te stellen.

Maak een nieuw bestand context.tsx en schrijf de volgende code:

Stap 3: Implementeer de provider#

Met de context klaar, laten we de provider implementeren. De provider zal de LogtoClient instantie initialiseren, controleren of de gebruiker geauthenticeerd is, en de context aan zijn kinderen bieden.

Maak een nieuw bestand provider.tsx:

Stap 4: Implementeer de hooks#

Laten we nu de hooks implementeren.

• useLogto: In deze hook gebruiken we de context om de LogtoClient instantie te verkrijgen, en bieden we de signIn methode en isAuthenticated status aan. Je kunt meer methoden aan deze hook toevoegen.
• useHandleSignInCallback: Deze hook leest de callback-URL van de browser, extraheert de autorisatiecode, en wisselt deze uit voor tokens. Hij stelt ook de authenticatiestatus in op true nadat de gebruiker is geauthenticeerd.

Maak een nieuw bestand hooks.ts en schrijf de volgende code:

Controlepunt: het gebruik van de SDK#

Nu heb je de React SDK voor Logto gemaakt. Je kunt deze in je app gebruiken door de app met het LogtoProvider component te omwikkelen, en de hooks te gebruiken om de auth-status te controleren, in te loggen en de callback af te handelen. Je kunt het officiële React-voorbeeldproject hier bekijken.

Conclusie#

In deze handleiding hebben we je door de stappen geleid om een React SDK voor Logto te maken die de basis authenticatiestroom implementeert. De hier verstrekte SDK is een basisvoorbeeld. Je kunt het uitbreiden door meer methoden en functionaliteiten toe te voegen om aan de behoeften van je app te voldoen.

Je kunt dezelfde stappen volgen om een SDK te creëren voor elk ander JavaScript-gebaseerd platform dat in een browser draait.

Resources:

1. Logto Browser SDK
2. Logto React SDK