Leer hoe je een aangepaste SDK voor Logto maakt met behulp van `@logto/browser`.
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.
Voordat we beginnen, laten we de inlogstroom in Logto begrijpen. De inlogstroom bestaat uit de volgende stappen:
@logto/browserHet @logto/browser pakket stelt een LogtoClient class beschikbaar die de kernfunctionaliteiten van Logto biedt, inclusief methoden voor de inlogstroom:
signIn(): Genereert de OIDC-auth URL en redirect ernaar.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.isAuthenticated(): Controleert of de gebruiker geauthenticeerd is.In de SDK zullen we 2 hooks bieden: useLogto en useHandleSignInCallback, samen met een LogtoProvider component:
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.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.
Installeer eerst het @logto/browser pakket met npm of andere pakketbeheerders:
Definieer de context van de provider, bestaande uit 3 delen:
LogtoClient instantie die in de provider zal worden geïnitialiseerd en in de hooks zal worden gebruikt.Maak een nieuw bestand context.tsx en schrijf de volgende code:
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:
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:
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.
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: