Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Avtentikacija je ključna komponenta razvoja aplikacije. Pomaga zaščititi uporabniške podatke in preprečiti zlonamerne dejavnosti. Preprosto povedano, določa verodostojnost uporabnikove identitete in zagotavlja, da lahko samo pooblaščeni uporabniki dostopajo do aplikacije in njenih virov.

Ustvarjanje sistema za preverjanje pristnosti po meri je lahko zamudno opravilo in tukaj pride prav NextAuth.js. Zagotavlja varno podporo za preverjanje pristnosti za aplikacije, izdelane z okvirom Next.js.

Kaj je NextAuth.js?

NextAuth.js je odprtokodna lahka knjižnica, ki ponuja avtentikacijo in avtorizacijo podpora za aplikacije Next.js. Razvijalcem omogoča hitro in enostavno nastavitev preverjanja pristnosti in avtorizacije za njihove aplikacije Next.js. Zagotavlja funkcije, kot so preverjanje pristnosti z več ponudniki, e-pošta in preverjanje pristnosti brez gesla.

instagram viewer

Kako NextAuth.js deluje pri preverjanju pristnosti?

Rešitev za preverjanje pristnosti NextAuth.js ponuja API na strani odjemalca, ki ga lahko integrirajte v svojo aplikacijo Next.js. Uporabite ga lahko za preverjanje pristnosti uporabnikov z različnimi ponudniki vpisa, pri katerih so ustvarili račune.

Pod pokrovom so uporabniki preusmerjeni na stran za prijavo ponudnika. Ponudnik po uspešni avtentikaciji vrne podatke o seji, ki vsebujejo uporabniško vsebino uporabnika. Ta tovor lahko nato odobri dostop do aplikacije in njenih virov.

Nove posodobitve funkcij v NextAuth.js (v4)

Decembra 2022 je NextAuth.js izdal svojo četrto različico. Ta različica je bila izboljšana glede na svojo prejšnjo različico, v3, z novimi posodobitvami in spremembami. Spremembe se osredotočajo predvsem na izboljšanje uporabe knjižnice v procesu avtentikacije.

1. Posodobitve za useSession Hook

Za preverjanje, ali je uporabnik prijavljen ali ne, lahko uporabite kavelj useSession. V tej novi različici kavelj useSession vrne objekt, ki omogoča enostavnejši način za testiranje stanj, zahvaljujoč dodani možnosti stanja. Oglejte si spodnjo kodo:

uvoz {useSession} od"next-auth/react"
izvozprivzetofunkcijoKomponenta() {
konst { podatke: seja, stanje } = useSession()


če (stanje "preverjeno") { 
vrnitev<str>Prijavljen kot {session.user.email}str>
 }
vrnitev<str> Niso prijavljeni str>
}

2. Kontekst SessionProvider postane obvezen

Nova različica štiri zahteva uporabo konteksta SessionProvider. To pomeni, da boste morali svojo aplikacijo zaviti s ponudnikom useSession. NextAuth.js priporoča, da svojo aplikacijo zavijete znotraj _app.jsx mapa.

Poleg tega je bila metoda clientMaxAge nadomeščena z refetchInterval. To bo olajšalo občasno pridobivanje seje v ozadju.

uvoz {SessionProvider} od"next-auth/react"
izvozprivzetofunkcijoaplikacija({
 Komponenta, pageProps: { session, ...pageProps }, 
}) {
vrnitev ( 
<SessionProvidersejo={seja}refetchInterval={5 * 60}>
<Komponenta {...pageProps} />SessionProvider>
 )
}

3. Uvoz ponudnikov posamično

NextAuth.js ponuja več storitev ponudnika, ki jih lahko uporabite za prijavo uporabnika. Vključujejo:

  • Uporaba vgrajenih ponudnikov OAuth (npr. GitHub, Google).
  • Uporaba ponudnika e-pošte.

V tej novi različici morate uvoziti vsakega ponudnika posebej.

uvoz GoogleProvider od"next-auth/providers/google"
uvoz Auth0Provider od"next-auth/providers/auth0";

4. Druge manjše spremembe

  • Uvoz na strani odjemalca je bil preimenovan v next-auth/react iz next-auth/client.
  • Spremembe argumentov metod povratnega klica: 
    prijava({uporabnik, račun, profil, e-pošta, poverilnice})
    seja ({ seja, žeton, uporabnik })
    jwt({žeton, uporabnik, račun, profil, isNewUser})

Kako začeti uporabljati NextAuth.js pri preverjanju pristnosti

Če želite integrirati NextAuth.js v svoje aplikacije Next.js, sledite spodnjim korakom:

  1. Ustvarite aplikacijo Next.js tako, da zaženete ta ukaz: npx create-next-app
  2. Teči npm namestite next-auth v vašem terminalu, da namestite NextAuth.js v vašo aplikacijo Next.js.
  3. Obiščite NextAuth.js uradno dokumentacijo in s seznama podprtih ponudnikov izberite želenega ponudnika. Nato ustvarite račun v razvijalski konzoli izbranega ponudnika in registrirajte svojo aplikacijo Next.js.
  4. V razvijalski konzoli izbranega(-ih) ponudnika(-ov) določite URL domače poti in URL preusmeritve povratnega klica, shranite spremembe in kopirajte ClientID in Skrivnost stranke.
  5. V korenskem imeniku aplikacije Next.js ustvarite datoteko .env za shranjevanje ID stranke in Skrivnost stranke.
  6. Na koncu v imeniku /pages/api ustvarite novo mapo z imenom avt. V mapi auth ustvarite novo datoteko in jo poimenujte [...nextauth].js. V ustvarjeno datoteko dodajte spodnjo kodo. Koda prikazuje API NextAuth.js na strani odjemalca z uporabo Googlovega ponudnika: 
uvoz GoogleProvider od"next-auth/providers/google";
ponudniki: [
 GoogleProvider({
clientId: postopek.env.GOOGLE_CLIENT_ID,
clientSecret: postopek.env.GOOGLE_CLIENT_SECRET
 })
]

Zdaj lahko nadaljujete in ustvarite stran za preverjanje pristnosti pri prijavi. Tukaj je upodabljanje DOM za komponento za prijavo:

uvoz Reagiraj od'reagirati';
uvoz {useSession, signIn, signOut} od"next-auth/react"
izvozprivzetofunkcijoKomponenta() {
konst { podatke: seja } = useSession()


 if (seja) {
vrnitev (
<>
<str> Prijavljen kot {session.user.email} str>
<gumbonClick={() => signOut()}>Odjavagumb>

 )
 }
vrnitev (
<>
<str> Niso prijavljeni str>
<gumbonClick={() => signIn()}>Prijavagumb>

 )
}

The useSession Hook dostopa do trenutnega predmeta uporabniške seje. Ko se uporabnik prijavi in ​​ga Google overi, se vrne objekt seje z uporabniško vsebino. To omogoča Next.js, da upodablja podatke o uporabniku na odjemalski strani aplikacije, v tem primeru e-pošto.

Sistemi za preverjanje pristnosti po meri vs. Rešitve, pripravljene za uporabo, kot je NextAuth.js

Izbira med izdelavo sistema za preverjanje pristnosti po meri in integracijo preverjanja pristnosti, pripravljenega za uporabo rešitev, kot je NextAuth.js, je pomembno upoštevati ceno, kompleksnost in varnost vsake rešitev.

Če imate vire in strokovno znanje za razvoj sistema za preverjanje pristnosti po meri, je to morda najboljši pristop za vas. Če pa iščete takoj pripravljeno rešitev, ki je enostavna za implementacijo, varna in stroškovno učinkovita, je lahko NextAuth.js dobra izbira za razmislek. Navsezadnje bo izbira odvisna od vaših potreb in želja.