Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Autentimine on rakenduste arendamise põhikomponent. See aitab kaitsta kasutajaandmeid ja ennetada pahatahtlikku tegevust. Lihtsamalt öeldes määrab see kasutaja identiteedi usaldusväärsuse, tagades, et rakendusele ja selle ressurssidele pääsevad juurde ainult volitatud kasutajad.

Kohandatud autentimissüsteemi loomine võib olla aeganõudev ülesanne ja siin on NextAuth.js kasulik. See pakub Next.js raamistikuga loodud rakenduste turvalise autentimise tuge.

Mis on NextAuth.js?

NextAuth.js on avatud lähtekoodiga kerge raamatukogu, mis pakub autentimine ja autoriseerimine Next.js rakenduste tugi. See võimaldab arendajatel kiiresti ja lihtsalt seadistada oma Next.js rakenduste autentimist ja autoriseerimist. See pakub selliseid funktsioone nagu autentimine mitme teenusepakkujaga, e-post ja paroolita autentimine.

Kuidas NextAuth.js autentimisel töötab?

Rakenduse NextAuth.js autentimislahendus pakub kliendipoolset API-d, mida saate

integreerida oma Next.js rakendusse. Saate seda kasutada erinevate sisselogimisteenusepakkujate kasutajate autentimiseks, kellega nad on kontod loonud.

Kapoti all suunatakse kasutajad teenusepakkuja sisselogimislehele. Eduka autentimise korral tagastab pakkuja seansiandmed, mis sisaldavad kasutaja kasulikku koormust. See kasulik koormus võib seejärel lubada juurdepääsu rakendusele ja selle ressurssidele.

Uued funktsioonivärskendused rakenduses NextAuth.js (v4)

2022. aasta detsembris andis NextAuth.js välja oma neljanda versiooni. Seda versiooni on varasemast versioonist v3 täiustatud uute värskenduste ja muudatustega. Muudatused keskenduvad peamiselt raamatukogu kasutamise parandamisele autentimisprotsessis.

1. UseSession Hooki värskendused

Konksu useSession abil saate kontrollida, kas kasutaja on sisse logitud või mitte. Selles uues versioonis tagastab konks useSession objekti, mis pakub tänu olekuvaliku lisamisele lihtsamat viisi olekute testimiseks. Vaadake allolevat koodi:

importida { useSession } alates"järgmine autentimine/reageerimine"
eksportidavaikimisifunktsiooniKomponent() {
konst { andmeid: seanss, olek } = useSession()


kui (olek "autentitud") { 
tagasi<lk>Sisse logitud kui {session.user.email}lk>
 }
tagasi<lk> Pole sisse logitud lk>
}

2. SessionProvideri kontekst muutub kohustuslikuks

Uus versioon neli nõuab SessionProvideri konteksti kasutamist. See tähendab, et peate oma rakenduse pakkima useSession Provideriga. NextAuth.js soovitab pakkida oma rakenduse sisse _app.jsx faili.

Lisaks on meetod clientMaxAge asendatud refetchIntervaliga. See muudab seansi perioodilise taustal toomise lihtsamaks.

importida { Session Provider } alates"järgmine autentimine/reageerimine"
eksportidavaikimisifunktsiooniRakendus({
 Komponent, pageProps: { session, ...pageProps }, 
}) {
tagasi ( 
<Seansipakkujaistungil={session}refetchInterval={5 * 60}>
<Komponent {...pageProps} />Seansipakkuja>
 )
}

3. Pakkujate importimine individuaalselt

NextAuth.js pakub mitmeid teenusepakkuja teenuseid, mida saate kasutaja sisselogimiseks kasutada. Nad sisaldavad:

  • Sisseehitatud OAuthi pakkujate kasutamine (nt GitHub, Google).
  • E-posti pakkuja kasutamine.

Selles uues versioonis peate importima iga teenusepakkuja eraldi.

importida GoogleProvider alates"next-auth/providers/google"
importida Auth0Provider alates"next-auth/providers/auth0";

4. Muud väikesed muudatused

  • Kliendipoolne import on ümber nimetatud järgmiseks autentimiseks/reageerimiseks järgmisest autentimisest/kliendist.
  • Muudatused tagasihelistamismeetodite argumentides: 
    sisselogimine ({ kasutaja, konto, profiil, e-post, mandaadid })
    seanss ({ seanss, tunnus, kasutaja })
    jwt({märk, kasutaja, konto, profiil, isuuskasutaja })

NextAuth.js-iga autentimises alustamine

NextAuth.js-i integreerimiseks oma Next.js-i rakendustesse toimige järgmiselt.

  1. Looge rakendus Next.js, käivitades selle käsu: npx Create-next-app
  2. Jookse npm install next-auth terminalis, et installida NextAuth.js oma rakendusse Next.js.
  3. Külastage NextAuth.js ametlikku dokumentatsiooni ja valige toetatud pakkuja(d) loendist oma eelistatud pakkuja(d). Järgmisena looge valitud teenusepakkuja(te) arendajakonsoolis konto ja registreerige oma Next.js rakendus.
  4. Määrake valitud pakkuja(te) arendajakonsoolis kodutee URL ja tagasihelistamise ümbersuunamise URL, salvestage muudatused ja kopeerige Kliendi ID ja Kliendi saladus.
  5. Looge rakenduse Next.js juurkataloogis .env-fail selle hoidmiseks Kliendi ID ja Kliendi saladus.
  6. Lõpuks looge kataloogis /pages/api uus kaust nimega aut. Looge autentimiskaustas uus fail ja pange sellele nimi [...nextauth].js. Lisage loodud faili allolev kood. Kood näitab NextAuth.js kliendipoolset API-t, kasutades Google'i pakkujat: 
importida GoogleProvider alates"next-auth/providers/google";
pakkujad: [
 GoogleProvider({
kliendi ID: protsessi.env.GOOGLE_CLIENT_ID,
klient Saladus: protsessi.env.GOOGLE_CLIENT_SECRET
 })
]

Nüüd saate edasi minna ja luua sisselogimise autentimise lehe. Siin on sisselogimiskomponendi DOM-i renderdus:

importida Reageerige alates'reageeri';
importida { useSession, login sisse, logi välja } alates"järgmine autentimine/reageerimine"
eksportidavaikimisifunktsiooniKomponent() {
konst { andmeid: seanss } = useSession()


 if (seanss) {
tagasi (
<>
<lk> Sisse logitud kui {session.user.email} lk>
<nuppuonClick={() => signOut()}>Logi väljanuppu>

 )
 }
tagasi (
<>
<lk> Pole sisse logitud lk>
<nuppuonClick={() => signIn()}>Logi sissenuppu>

 )
}

The useSession Hook pääseb ligi praegusele kasutajaseansi objektile. Kui kasutaja logib sisse ja Google on autentinud, tagastatakse kasutaja kasulikku koormust sisaldav seansiobjekt. See võimaldab Next.js-il renderdada kasutaja üksikasju rakenduse kliendi poolel, antud juhul meili.

Kohandatud autentimissüsteemid vs. Kasutusvalmis lahendused, nagu NextAuth.js

Kohandatud autentimissüsteemi loomise ja kasutusvalmis autentimise integreerimise vahel valimine lahendus, näiteks NextAuth.js, on oluline arvestada nende maksumust, keerukust ja turvalisust lahendus.

Kui teil on kohandatud autentimissüsteemi väljatöötamiseks ressursse ja teadmisi, võib see olla teie jaoks parim lähenemisviis. Kui aga otsite lihtsalt rakendatavat, turvalist ja kulutõhusat valmislahendust, võib NextAuth.js olla hea valik. Lõppkokkuvõttes sõltub valik teie vajadustest ja eelistustest.