Integroi Logto-tunnistus Next.js-sovellukseesi käyttämällä Server Actions -toimintoja.
Server Actions esittelee uudenlaisen lähestymistavan luoda vahvoja verkkosovelluksia ilman perinteisiä REST-rajapintoja. Olemme aiemmin käsitelleet tätä artikkelissamme.
Tänään olemme innoissamme voidessamme ilmoittaa virallisesta Server Actions -tuesta Next.js SDK:ssämme, vaikka se onkin kokeellinen ominaisuus.
Yleiskatsauksen saamiseksi tutustu tähän esimerkkiin ja seuraa mukana, kun kerromme, kuinka integroida Logto Server Actions -toimintojen avulla tässä oppaassa.
Aloittaaksesi varmista, että sinulla on seuraavat asiat:
Jos isännöit Logtoa itse, viittaa Logto "Get started" -dokumentaatioon asentaaksesi Logto-instanssisi.
Avaa Logto Console syöttämällä URL https://cloud.logto.io/, jos käytät Logto Cloudia, tai päätepiste, jonka olet asettanut itse isännöinnille.
Seuraavaksi siirry "Applications"-välilehdelle ja napsauta "Create application".
Näkyviin tulevassa modalissa valitse "Next.js (App Router)" ja anna sovellukselle nimi, esimerkiksi "Next.js App". Napsauta sitten "Create application".
Sinut ohjataan opassivulle Logtossa. Napsauta "Finish and done" jatkaaksesi Sovelluksen tietosivulle.
"Redirect URIs" -kohdassa syötä seuraava arvo:
Esimerkiksi, jos isännöit Next.js:ää http://localhost:3000, arvo tulisi olla:
Napsauta "Save Changes" -painiketta alareunassa. Kun onnistut, pidä tämä sivu auki, sillä se on hyödyllinen Next.js-konfiguraatiolle.
Varmista, että sinulla on projekti uusimmalla Next.js-versiolla. Jos sinulla ei ole vielä sellaista, voit seurata virallista asennusopasta luodaksesi sellaisen.
Tämän oppaan kirjoittamisen aikaan ominaisuus on kokeellinen ja vaatii aktivoinnin next.config.js-tiedostossa:
Aloita asentamalla @logto/next-moduuli käyttämällä npm seuraavasti:
Voit myös käyttää yarn tai pnpm.
Luo sitten joitakin toimintoja "server actionseiksi", luo uusi tiedosto libraries/logto.ts:
Tässä tiedostossa viemme neljä funktiota tunnistusta varten. Huomaa ensimmäinen rivi, "use server", joka osoittaa, että tiedoston koodi voi ajaa vain palvelimen puolella. Käytämme "next/headers" hallitsemaan evästepohjaisia istuntoja.
"use server"-käytöstä: https://react.dev/reference/react/use-server"next/headers"-käytöstä evästeiden hallintaan: https://nextjs.org/docs/api-reference/next/headersYllä olevia toimintoja voidaan kutsua suoraan asiakaspuolen React-komponentista. Tämä on Server Actions -toimintojen tärkein etu. Mennään seuraavaan lukuun katsomaan, kuinka näitä toimintoja käytetään.
Kun tunnistustoiminnot ovat paikoillaan, rakennamme sivun. Luomme kaksi asiakaskomponenttia aloittamaan kirjautumis- ja kirjautumisnäkymät.
/app/sign-in.tsx:
Tässä tuodaan signIn-funktio, joka juuri määriteltiin edellisessä luvussa. Vaikka koodi suoritetaan palvelimen puolella, tämä funktio voidaan kutsua suoraan <button>-komponentista, kun käyttäjä napsauttaa kirjautumispainiketta. Tällä tavalla eliminoimme tarpeen kirjoittaa mitään REST-rajapintaa käsittelemään kirjautumisprosessia. Itse asiassa Next.js käsittelee "POST"-pyyntöjen välittäjäyksityiskohdat puolestamme. Saatuamme redirectUrl-osoitteen voimme kutsua router.push ohjaamaan Logto-kirjautumissivulle.
/app/sign-out.tsx:
Uloskirjautumisprosessi on samankaltainen kuin sisäänkirjautumisprosessi.
Vakiona olevana OIDC-identiteetin tarjoajana Logto ohjaa käyttäjät takaisinsoitoosoitteeseen tunnistautumisen jälkeen. Meidän on siis valmisteltava takaisinsoitosivu käsittelemään kirjautumistulosta.
/app/callback/page.tsx
Tässä käytämme asiakaskomponenttia useEffectin kanssa, joka tekee helppoa näyttää "ladataan"-sivun paremman käyttäjäkokemuksen saavuttamiseksi.
Nyt teemme minimaalisen kotisivun esittämään Logto SDK:n hyödyntämistä. Tarvittaessa suojaa mikä tahansa resurssi tuntemattomilta käyttäjiltä tarkistamalla isAuthenticated-arvo ja ohjaamalla kirjautumissivulle tai näyttämällä virheilmoitukset.
app/page.tsx
Kuten voit, tämä on palvelinkomponentti, joka poistaa tarpeen useEffectille ja monimutkaisten tilamuutosten hallinnalle.
Palvelintoiminnot tarjoavat virtaviivaisen ja yksinkertaisen tavan toteuttaa tunnistus verrattuna perinteisiin Next.js-sovelluksiin, jotka tukeutuvat REST-rajapintoihin.
Koko koodiesimerkki löytyy tästä tietovarastosta: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample
Miksi et kokeilisi Logto Cloudia ja näkisi käytännössä sen helppoutta?