Luo verkkosivu-SDK Logtoa varten muutamassa minuutissa

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.

Sisäänkirjautumisvirta#

Ennen kuin aloitamme, ymmärretään Logton sisäänkirjautumisvirta. Sisäänkirjautumisvirta koostuu seuraavista vaiheista:

1. Uudelleenohjaus Logtoon: Käyttäjä ohjataan uudelleen Logton sisäänkirjautumissivulle.
2. Tunnistaudu: Käyttäjä syöttää tunnistetietonsa ja tunnistautuu Logton kanssa.
3. Uudelleenohjaus sovellukseesi: Onnistuneen tunnistautumisen jälkeen käyttäjä ohjataan takaisin sovellukseesi valtuutuskoodin kanssa.
4. Koodin vaihto: Sovelluksesi vaihtaa valtuutuskoodin tunnuksiin.

Lyhyt esittely @logto/browser-paketista#

@logto/browser-paketti tarjoaa LogtoClient-luokan, joka sisältää Logton ydintoiminnallisuudet, mukaan lukien menetelmät sisäänkirjautumisvirralle:

1. signIn(): Luo OIDC-valtuu URL:n ja uudelleenohjaa siihen.
2. handleSignInCallback(): Tarkistaa ja jäsentää paluu-URL:n ja eristää valtuutuskoodin, vaihtaa sitten koodin tunnuksiin kutsumalla tunnuspäätepistettä.
3. isAuthenticated(): Tarkistaa onko käyttäjä tunnistautunut.

React SDK:n luominen#

SDK:ssa tarjoamme 2 koukkua: useLogto ja useHandleSignInCallback, yhdessä LogtoProvider-komponentin kanssa:

1. useLogto: Koukun, joka tarjoaa signIn-menetelmän sisäänkirjautumisvirran käynnistämiseen ja isAuthenticated-tilan tarkistukseen onko käyttäjä tunnistautunut.
2. 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.

Vaihe 1: Asenna paketti#

Asenna ensin @logto/browser-paketti käyttäen npm:ää tai muuta pakettienhallintaa:

Vaihe 2: Määrittele Reactin konteksti#

Määrittele tarjoajan konteksti, joka sisältää 3 osaa:

1. Taustalla oleva LogtoClient-instanssi, joka alustetaan tarjoajassa ja käytetään koukuissa.
2. Tunnistautumistila.
3. Menetelmä tunnistautumistilan asettamiseen.

Luo uusi tiedosto context.tsx ja kirjoita seuraava koodi:

Vaihe 3: Toteuta tarjoaja#

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:

Vaihe 4: Toteuta koukut#

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:

Tarkistuspiste: SDK:n käyttäminen#

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ä.

Yhteenveto#

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:

1. Logto Selaimen SDK
2. Logto React SDK