Opi luomaan mukautettu SDK Logtoa varten käyttäen `@logto/browser`.
Logto, avoimen lähdekoodin tunnistusympäristö, tarjoaa lukuisia virallisia SDK:ita helpottamaan integraatiota eri kehys- ja alustatyypeille. Monille alustoille ei kuitenkaan ole virallisia SDK:ita.
Tämän aukon täyttämiseksi Logto tarjoaa peruspaketin @logto/browser, joka on suunniteltu auttamaan kehittäjiä luomaan mukautettuja SDK:ita räätälöitynä erityisiin tarpeisiin. Tämä paketti toteuttaa Logton ydintoiminnallisuudet, jotka ovat irrotettuina mistään tietyistä kehyksistä tai alustoista, kunhan se tukee JavaScriptiä ja pyörii selaimen ympäristössä.
Tässä oppaassa käydään läpi vaiheet React SDK:n luomiseen käyttäen @logto/browseria, tämä SDK toteuttaa sisäänkirjautumisvirran. Voit seurata samoja vaiheita luodaksesi SDK:n mille tahansa muulle JavaScript-pohjaiselle alustalle, joka pyörii selaimessa.
Ennen kuin aloitamme, ymmärretään Logton sisäänkirjautumisvirta. Sisäänkirjautumisvirta koostuu seuraavista vaiheista:
@logto/browser-paketista@logto/browser-paketti tarjoaa LogtoClient-luokan, joka sisältää Logton ydintoiminnallisuudet, mukaan lukien menetelmät sisäänkirjautumisvirralle:
signIn(): Luo OIDC-valtuu URL:n ja uudelleenohjaa siihen.handleSignInCallback(): Tarkistaa ja jäsentää paluu-URL:n ja eristää valtuutuskoodin, vaihtaa sitten koodin tunnuksiin kutsumalla tunnuspäätepistettä.isAuthenticated(): Tarkistaa onko käyttäjä tunnistautunut.SDK:ssa tarjoamme 2 koukkua: useLogto ja useHandleSignInCallback, yhdessä LogtoProvider-komponentin kanssa:
useLogto: Koukun, joka tarjoaa signIn-menetelmän sisäänkirjautumisvirran käynnistämiseen ja isAuthenticated-tilan tarkistukseen onko käyttäjä tunnistautunut.useHandleSignInCallback: Koukun, joka käsittelee paluu-URL:n ja vaihtaa valtuutuskoodin tunnuksiin, lopettaa sisäänkirjautumisvirran.Voit käyttää SDK:ta yksinkertaisesti käärittämällä sovelluksesi LogtoProvider-komponentilla ja käyttämällä koukkuja tarkistaaksesi tunnistautumistilan, sisäänkirjautumisen ja paluu-URL:n käsittelyn.
Asenna ensin @logto/browser-paketti käyttäen npm:ää tai muuta pakettienhallintaa:
Määrittele tarjoajan konteksti, joka sisältää 3 osaa:
LogtoClient-instanssi, joka alustetaan tarjoajassa ja käytetään koukuissa.Luo uusi tiedosto context.tsx ja kirjoita seuraava koodi:
Kun konteksti on valmis, toteutetaan tarjoaja. Tarjoaja alustaa LogtoClient-instanssin, tarkistaa onko käyttäjä tunnistautunut ja tarjoaa kontekstin lapsilleen.
Luo uusi tiedosto provider.tsx:
Nyt toteutetaan koukut.
useLogto: Tässä koukussa käytämme kontekstia saadaksemme LogtoClient-instanssin ja tarjoamme signIn-menetelmän ja isAuthenticated-tilan. Voit jatkaa lisäämällä enemmän menetelmiä tähän koukkuun.useHandleSignInCallback: Tämä koukku lukee paluu-URL:n selaimesta, eristää valtuutuskoodin ja vaihtaa sen tunnuksiin. Se asettaa myös tunnistautumistilan true:ksi käyttäjän tunnistautumisen jälkeen.Luo uusi tiedosto hooks.ts ja kirjoita seuraava koodi:
Nyt olet luonut React SDK:n Logtoa varten. Voit käyttää sitä sovelluksessasi käärittämällä sovelluksen LogtoProvider-komponentilla ja käyttämällä koukkuja tarkistaaksesi tunnistautumistilan, kirjautuaksesi sisään ja käsitelläksesi paluu-URL:n. Voit tarkistaa virallisen Reactin esimerkkiprojektin täältä.
Tässä oppaassa olemme käyneet läpi vaiheet React SDK:n luomiseksi Logtoon, joka toteuttaa perus tunnistusvirran. Täällä tarjottu SDK on perusesimerkki. Voit laajentaa sitä lisäämällä enemmän menetelmiä ja toiminnallisuuksia, jotka vastaavat sovelluksesi tarpeita.
Voit seurata samoja vaiheita luodaksesi SDK:n mille tahansa muulle JavaScript-pohjaiselle alustalle, joka pyörii selaimessa.
Resurssit: