Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Autentifikavimas yra pagrindinis programų kūrimo komponentas. Tai padeda apsaugoti vartotojo duomenis ir užkirsti kelią kenksmingai veiklai. Paprasčiau tariant, jis nustato vartotojo tapatybės patikimumą ir užtikrina, kad tik įgalioti vartotojai galėtų pasiekti programą ir jos išteklius.

Pasirinktinės autentifikavimo sistemos kūrimas gali užtrukti daug laiko, todėl NextAuth.js pravers čia. Tai užtikrina saugų autentifikavimo palaikymą programoms, sukurtoms naudojant Next.js sistemą.

Kas yra NextAuth.js?

NextAuth.js yra atviro kodo lengva biblioteka, kuri suteikia autentifikavimas ir autorizacija Next.js programų palaikymas. Tai leidžia kūrėjams greitai ir lengvai nustatyti savo Next.js programų autentifikavimą ir autorizavimą. Tai suteikia tokias funkcijas kaip autentifikavimas naudojant kelis teikėjus, el. paštas ir autentifikavimas be slaptažodžio.

instagram viewer

Kaip NextAuth.js veikia autentifikuojant?

NextAuth.js autentifikavimo sprendimas suteikia kliento API, kurią galite padaryti integruoti į Next.js programą. Jį galite naudoti norėdami autentifikuoti vartotojus, turinčius skirtingus prisijungimo teikėjus, su kuriais jie sukūrė paskyras.

Po gaubtu vartotojai nukreipiami į teikėjo prisijungimo puslapį. Sėkmingai patvirtinus, teikėjas grąžina seanso duomenis, kuriuose yra vartotojo naudingoji apkrova. Tada šis naudingasis krovinys gali suteikti prieigą prie programos ir jos išteklių.

Nauji NextAuth.js (v4) funkcijų naujiniai

2022 m. gruodžio mėn. NextAuth.js išleido ketvirtąją versiją. Ši versija buvo patobulinta, palyginti su ankstesne versija, v3, su naujais atnaujinimais ir pakeitimais. Pakeitimai daugiausia skirti pagerinti bibliotekos naudojimą autentifikavimo procese.

1. „useSession Hook“ atnaujinimai

Norėdami patikrinti, ar vartotojas yra prisijungęs, ar ne, galite naudoti kabliuką useSession. Šioje naujoje versijoje „useSession“ kabliukas grąžina objektą, kuris suteikia paprastesnį būdą patikrinti būsenas, nes pridėta būsenos parinktis. Žiūrėkite žemiau esantį kodą:

importuoti { useSession } iš"kitas autorius / reaguoti"
eksportuotinumatytasfunkcijaKomponentas() {
konst { duomenis: sesija, būsena } = useSession()


jeigu (būsena "autentifikuota") { 
grąžinti<p>Prisijungta kaip {session.user.email}p>
 }
grąžinti<p> Neprisijungęs p>
}

2. SessionProvider kontekstas tampa privalomas

Naujoji ketvirtoji versija įpareigoja naudoti „SessionProvider“ kontekstą. Tai reiškia, kad turėsite apvynioti programą naudodami „useSession Provider“. NextAuth.js rekomenduoja apvynioti programą į _app.jsx failą.

Be to, metodas clientMaxAge buvo pakeistas refetchInterval. Taip bus lengviau periodiškai gauti seansą fone.

importuoti { SessionProvider } iš"kitas autorius / reaguoti"
eksportuotinumatytasfunkcijaProgramėlė({
 Komponentas, pageProps: { session, ...pageProps }, 
}) {
grąžinti ( 
<SessionProvidersesija={sesija}pakartotinis intervalas={5 * 60}>
<Komponentas {...pageProps} />SessionProvider>
 )
}

3. Tiekėjų importavimas atskirai

NextAuth.js teikia kelias teikėjo paslaugas, kurias galite naudoti prisijungdami vartotojui. Jie įtraukia:

  • Naudojant integruotus OAuth teikėjus (pvz., „GitHub“, „Google“).
  • Naudojant el. pašto teikėją.

Šioje naujoje versijoje kiekvieną teikėją turite importuoti atskirai.

importuoti GoogleProvider iš"next-auth/providers/google"
importuoti Auth0Provider iš"next-auth/providers/auth0";

4. Kiti nedideli pakeitimai

  • Kliento pusės importavimas buvo pervardytas į kitą autentifikavimą / reaguoti iš kito autentiškumo / kliento.
  • Atšaukimo metodų argumentų pakeitimai: 
    prisijungimas ({ vartotojas, paskyra, profilis, el. paštas, kredencialai })
    sesija ({ sesija, prieigos raktas, naudotojas })
    jwt ({ prieigos raktas, vartotojas, paskyra, profilis, yra naujas naudotojas })

Darbo pradžia naudojant NextAuth.js autentifikavimo sistemoje

Norėdami integruoti NextAuth.js į Next.js programas, atlikite toliau nurodytus veiksmus.

  1. Sukurkite Next.js programą vykdydami šią komandą: npx Create-next-app
  2. Bėk npm įdiegti kitą autentifikavimą terminale, kad įdiegtumėte NextAuth.js savo Next.js programoje.
  3. Aplankykite NextAuth.js oficialius dokumentus ir iš palaikomų paslaugų sąrašo pasirinkite pageidaujamą (-us) teikėją (-us). Tada sukurkite paskyrą pasirinkto teikėjo (-ų) kūrėjų pulte ir užregistruokite Next.js programą.
  4. Pasirinkto (-ų) teikėjo (-ų) kūrėjo pulte nurodykite namų maršruto URL ir atgalinio skambučio peradresavimo URL, išsaugokite pakeitimus ir nukopijuokite Kliento ID ir Kliento paslaptis.
  5. Programos Next.js šakniniame kataloge sukurkite .env failą, kuriame laikysite Kliento ID ir Kliento paslaptis.
  6. Galiausiai kataloge /pages/api sukurkite naują aplanką pavadinimu aut. Auth aplanke sukurkite naują failą ir pavadinkite jį [...nextauth].js. Į sukurtą failą pridėkite toliau esantį kodą. Kode rodoma NextAuth.js kliento API naudojant „Google Provider“: 
importuoti GoogleProvider iš"next-auth/providers/google";
teikėjai: [
 GoogleProvider ({
kliento ID: procesas.env.GOOGLE_CLIENT_ID,
kliento paslaptis: procesas.env.GOOGLE_CLIENT_SECRET
 })
]

Dabar galite eiti į priekį ir sukurti prisijungimo autentifikavimo puslapį. Čia yra prisijungimo komponento DOM atvaizdavimas:

importuoti Reaguoti iš'reaguoti';
importuoti { useSession, signIn, signOut } iš"kitas autorius / reaguoti"
eksportuotinumatytasfunkcijaKomponentas() {
konst { duomenis: sesija } = useSession()


 if (sesija) {
grąžinti (
<>
<p> Prisijungta kaip {session.user.email} p>
<mygtukąpaspaudus={() => signOut()}> Atsijungtimygtuką>

 )
 }
grąžinti (
<>
<p> Neprisijungęs p>
<mygtukąpaspaudus={() => signIn()}>Prisijungtimygtuką>

 )
}

The useSession Hook pasiekia dabartinį vartotojo seanso objektą. Kai vartotojas prisijungia ir „Google“ jį patvirtina, grąžinamas seanso objektas su naudotojo naudingumu. Taip Next.js gali pateikti išsamią vartotojo informaciją programos kliento pusėje, šiuo atveju el.

Individualizuotos autentifikavimo sistemos vs. Paruošti naudoti sprendimai, tokie kaip NextAuth.js

Pasirinkimas tarp tinkintos autentifikavimo sistemos kūrimo ir paruošto naudoti autentifikavimo integravimo sprendimas, pvz., NextAuth.js, svarbu atsižvelgti į kiekvieno iš jų kainą, sudėtingumą ir saugumą sprendimas.

Jei turite išteklių ir patirties, kad sukurtumėte pasirinktinę autentifikavimo sistemą, tai gali būti geriausias būdas jums. Tačiau, jei ieškote jau paruošto sprendimo, kurį būtų lengva įdiegti, saugus ir ekonomiškas, NextAuth.js gali būti geras pasirinkimas. Galų gale, pasirinkimas priklausys nuo jūsų poreikių ir pageidavimų.