Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Autentifikācija ir galvenā lietojumprogrammu izstrādes sastāvdaļa. Tas palīdz aizsargāt lietotāja datus un novērst ļaunprātīgas darbības. Vienkārši sakot, tas nosaka lietotāja identitātes uzticamību, nodrošinot, ka tikai autorizēti lietotāji var piekļūt lietojumprogrammai un tās resursiem.

Pielāgotas autentifikācijas sistēmas izveide var būt laikietilpīgs uzdevums, un šeit noder NextAuth.js. Tas nodrošina drošu autentifikācijas atbalstu lietojumprogrammām, kas izveidotas, izmantojot Next.js ietvaru.

Kas ir NextAuth.js?

NextAuth.js ir atvērtā koda viegla bibliotēka, kas nodrošina autentifikācija un autorizācija atbalsts Next.js lietojumprogrammām. Tas ļauj izstrādātājiem ātri un vienkārši iestatīt autentifikāciju un autorizāciju savām Next.js lietotnēm. Tas nodrošina tādas funkcijas kā autentifikācija ar vairākiem pakalpojumu sniedzējiem, e-pasts un autentifikācija bez paroles.

Kā NextAuth.js darbojas autentifikācijā?

NextAuth.js autentifikācijas risinājums nodrošina klienta puses API, ko varat integrēt savā Next.js lietojumprogrammā. Varat to izmantot, lai autentificētu lietotājus ar dažādiem pierakstīšanās nodrošinātājiem, ar kuriem viņi ir izveidojuši kontus.

Zem pārsega lietotāji tiek novirzīti uz pakalpojumu sniedzēja pierakstīšanās lapu. Pēc veiksmīgas autentifikācijas pakalpojumu sniedzējs atgriež sesijas datus, kas satur lietotāja lietderīgo slodzi. Pēc tam šī krava var atļaut piekļuvi lietojumprogrammai un tās resursiem.

Jauni funkciju atjauninājumi pakalpojumā NextAuth.js (v4)

2022. gada decembrī vietne NextAuth.js izlaida savu ceturto versiju. Šī versija ir uzlabota salīdzinājumā ar iepriekšējo versiju v3 ar jauniem atjauninājumiem un modifikācijām. Izmaiņas galvenokārt vērstas uz bibliotēkas izmantošanas uzlabošanu autentifikācijas procesā.

1. UseSession Hook atjauninājumi

Varat izmantot āķi useSession, lai pārbaudītu, vai lietotājs ir pierakstījies. Šajā jaunajā versijā useSession āķis atgriež objektu, kas nodrošina vienkāršāku veidu, kā pārbaudīt stāvokļus, pateicoties statusa opcijai. Skatiet zemāk esošo kodu:

imports { useSession } no"next-ath/react"
eksportētnoklusējumafunkcijuKomponents() {
konst { datus: sesija, statuss } = useSession()


ja (statuss "autentificēts") { 
atgriezties<lpp>Pierakstījies kā {session.user.email}lpp>
 }
atgriezties<lpp> Nav pierakstījies lpp>
}

2. SessionProvider konteksts kļūst obligāts

Jaunā ceturtā versija nosaka SessionProvider konteksta izmantošanu. Tas nozīmē, ka jums būs jāietver sava lietotne ar useSession Provider. NextAuth.js iesaka ietīt jūsu lietotni _app.jsx failu.

Turklāt metode clientMaxAge ir aizstāta ar refetchInterval. Tas atvieglos periodisku sesijas ielādi fonā.

imports { SessionProvider } no"next-ath/react"
eksportētnoklusējumafunkcijuApp({
 Komponents, pageProps: { session, ...pageProps }, 
}) {
atgriezties ( 
<SessionProvidersesija={sesija}ielādes intervāls={5 * 60}>
<Komponents {...lapaProps} />SessionProvider>
 )
}

3. Pakalpojumu sniedzēju importēšana atsevišķi

NextAuth.js nodrošina vairākus pakalpojumu sniedzēja pakalpojumus, kurus varat izmantot, lai pierakstītos lietotājam. Tajos ietilpst:

  • Izmantojot iebūvētos OAuth nodrošinātājus (piemēram, GitHub, Google).
  • Izmantojot e-pasta pakalpojumu sniedzēju.

Šajā jaunajā versijā katrs pakalpojumu sniedzējs ir jāimportē atsevišķi.

imports GoogleProvider no"next-auth/providers/google"
imports Auth0Provider no"next-auth/providers/auth0";

4. Citas nelielas izmaiņas

  • Klienta puses importēšana ir pārdēvēta par nākamo autentifikāciju/reaģēt no nākamās autentifikācijas/klienta.
  • Izmaiņas atzvanīšanas metožu argumentos: 
    pierakstīšanās ({ lietotājs, konts, profils, e-pasts, akreditācijas dati })
    sesija ({sesija, marķieris, lietotājs })
    jwt ({ marķieris, lietotājs, konts, profils, ir jauns lietotājs })

Darba sākšana ar NextAuth.js autentifikācijā

Lai savās Next.js lietojumprogrammās integrētu NextAuth.js, veiciet tālāk norādītās darbības.

  1. Izveidojiet Next.js lietojumprogrammu, izpildot šo komandu: npx Create-next-app
  2. Skrien npm instalēt nākamo autorizāciju savā terminālī, lai instalētu NextAuth.js savā Next.js lietojumprogrammā.
  3. Apmeklējiet NextAuth.js oficiālo dokumentāciju un atbalstīto pakalpojumu sarakstā atlasiet vēlamo pakalpojumu sniedzēju/-us. Pēc tam izveidojiet kontu izvēlētā(-o) pakalpojumu sniedzēja(-u) izstrādātāja konsolē un reģistrējiet savu Next.js lietojumprogrammu.
  4. Atlasītā(-o) nodrošinātāja(-u) izstrādātāja konsolē norādiet mājas maršruta URL un atzvanīšanas novirzīšanas URL, saglabājiet izmaiņas un kopējiet Klienta ID un Klienta noslēpums.
  5. Savas Next.js lietojumprogrammas saknes direktorijā izveidojiet .env failu, kurā turēt Klienta ID un Klienta noslēpums.
  6. Visbeidzot direktorijā /pages/api izveidojiet jaunu mapi ar nosaukumu aut. Auth mapē izveidojiet jaunu failu un nosauciet to [...nextauth].js. Izveidotajā failā pievienojiet tālāk norādīto kodu. Kods parāda NextAuth.js klienta puses API, izmantojot Google pakalpojumu sniedzēju: 
imports GoogleProvider no"next-auth/providers/google";
pakalpojumu sniedzēji: [
 GoogleProvider({
klienta ID: process.env.GOOGLE_CLIENT_ID,
klienta noslēpums: process.env.GOOGLE_CLIENT_SECRET
 })
]

Tagad varat iet uz priekšu un izveidot pieteikšanās autentifikācijas lapu. Šeit ir pieteikšanās komponenta DOM renderēšana:

imports Reaģēt no'reaģēt';
imports { useSession, signIn, signOut } no"next-ath/react"
eksportētnoklusējumafunkcijuKomponents() {
konst { datus: sesija } = useSession()


 if (sesija) {
atgriezties (
<>
<lpp> Pierakstījies kā {session.user.email} lpp>
<poguonClick={() => signOut()}>Izrakstītiespogu>

 )
 }
atgriezties (
<>
<lpp> Nav pierakstījies lpp>
<poguonClick={() => signIn()}> Pierakstītiespogu>

 )
}

The useSession Hook piekļūst pašreizējā lietotāja sesijas objektam. Kad lietotājs pierakstās un Google to ir autentificējis, tiek atgriezts sesijas objekts ar lietotāja lietderīgo slodzi. Tādējādi Next.js var renderēt lietotāja informāciju lietotnes klienta pusē, šajā gadījumā e-pasta ziņojumā.

Pielāgotas autentifikācijas sistēmas vs. Lietošanai gatavi risinājumi, piemēram, NextAuth.js

Izvēle starp pielāgotas autentifikācijas sistēmas izveidi un lietošanai gatavas autentifikācijas integrēšanu risinājumu, piemēram, NextAuth.js, ir svarīgi ņemt vērā katra izmaksas, sarežģītību un drošību risinājums.

Ja jums ir resursi un zināšanas, lai izstrādātu pielāgotu autentifikācijas sistēmu, tā var būt jums labākā pieeja. Tomēr, ja meklējat gatavu risinājumu, kas ir viegli ieviešams, drošs un rentabls, NextAuth.js var būt laba izvēle. Galu galā izvēle būs atkarīga no jūsu vajadzībām un vēlmēm.