Ta knjižnica vam omogoča brezhibno integracijo Googlovega preverjanja pristnosti v vašo aplikacijo Next.js, s čimer odpravite potrebo po razvoju iz nič.

Integracija varnega sistema za preverjanje pristnosti je ključni razvojni korak, ki ne zagotavlja le varnega okolja za uporabnike, ampak tudi vliva zaupanje v vaš izdelek. Ta sistem zagotavlja, da so njihovi podatki zaščiteni in da lahko do aplikacije dostopajo le pooblaščene osebe.

Izgradnja varne avtentikacije od začetka je lahko dolgotrajen proces, ki zahteva temeljito razumevanje avtentikacijskih protokolov in procesov, še posebej pri obravnavanju različnih avtentikacij ponudniki.

Z uporabo NextAuth se lahko osredotočite na gradnjo osnovnih funkcij. Preberite, če želite izvedeti, kako integrirati Googlovo socialno prijavo v svojo aplikacijo z uporabo NextAuth.

Kako deluje NextAuth

NextAuth.js je odprtokodna knjižnica za preverjanje pristnosti, ki poenostavlja postopek dodajanja avtentikacijo in avtorizacijo funkcionalnost za aplikacije Next.js ter prilagajanje delovnih tokov preverjanja pristnosti. Zagotavlja vrsto funkcij, kot so e-pošta, preverjanje pristnosti brez gesla in podpora za različne ponudnike preverjanja pristnosti, kot so Google, GitHub in drugi.

instagram viewer

Na visoki ravni NextAuth deluje kot vmesna programska oprema, ki olajša postopek preverjanja pristnosti med vašo aplikacijo in ponudnikom. Pod pokrovom, ko se uporabnik poskuša prijaviti, je preusmerjen na Googlovo stran za prijavo. Po uspešnem preverjanju pristnosti Google vrne koristni tovor, ki vključuje podatke o uporabniku, kot sta njegovo ime in e-poštni naslov. Ti podatki se uporabljajo za odobritev dostopa do aplikacije in njenih virov.

S pomočjo podatkov koristnega tovora NextAuth ustvari sejo za vsakega preverjenega uporabnika in shrani žeton seje v varen piškotek samo HTTP. Žeton seje se uporablja za preverjanje identitete uporabnika in ohranjanje njegovega statusa preverjanja pristnosti. Ta postopek velja tudi za druge ponudnike z manjšimi odstopanji v izvedbi.

Registrirajte svojo aplikacijo Next.js na Googlovi konzoli za razvijalce

NextAuth zagotavlja podporo za Googlovo storitev preverjanja pristnosti. Da pa vaša aplikacija komunicira z Googlovimi API-ji in omogoča uporabnikom preverjanje pristnosti z njihove poverilnice za Google, boste morali svojo aplikacijo registrirati na Googlovi razvijalski konzoli in pridobiti a ID stranke in Skrivnost stranke.

Če želite to narediti, pojdite na Google Developer Console. Nato se prijavite s svojim Google Računom za dostop do konzole. Ko ste prijavljeni, ustvarite nov projekt.

Na strani s pregledom projekta izberite API-ji in storitve s seznama storitev v levem podoknu menija in na koncu še Poverilnice možnost.

Kliknite na Ustvarite poverilnice gumb za ustvarjanje vašega ID-ja stranke in skrivnosti stranke. Nato med danimi možnostmi določite vrsto aplikacije in nato podajte ime za svojo aplikacijo.

Nato določite URL domače poti svoje aplikacije in na koncu določite pooblaščeni URI preusmeritve za svojo aplikacijo. Za ta primer bi moralo biti http://localhost: 3000/api/auth/callback/google kot določajo nastavitve Googlovega ponudnika NextAuth.

Po uspešni registraciji vam bo Google posredoval ID odjemalca in skrivnost odjemalca za uporabo v vaši aplikaciji.

Nastavite aplikacijo NextJS

Za začetek ustvarite projekt Next.js lokalno:

npx create-next-app next-auth-app

Ko je nastavitev končana, se pomaknite do novo ustvarjenega imenika projekta in zaženite ta ukaz, da zavrtite razvojni strežnik.

npm run dev

Odprite brskalnik in se pomaknite do http://localhost: 3000. To bi moral biti pričakovan rezultat.

Kodo tega projekta najdete v Repozitorij GitHub.

Nastavitev datoteke .env

V korenski mapi vašega projekta ustvarite novo datoteko in jo poimenujte .env za shranjevanje ID-ja odjemalca, skrivnosti in osnovnega URL-ja.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'ID stranke'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'skrivnost'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

URL NextAUTH se uporablja za določitev osnovnega URL-ja vaše aplikacije, ki se uporablja za preusmerjanje uporabnikov po zaključku preverjanja pristnosti.

Integrirajte NextAuth v svojo aplikacijo Next.js

Najprej namestite knjižnico NextAuth v svoj projekt.

npm namestite next-auth

Naprej, v /pages ustvarite novo mapo in jo poimenujte api. Spremenite imenik v api in ustvarite drugo mapo z imenom avt. V mapo auth dodajte novo datoteko in jo poimenujte [...nextauth].js in dodajte naslednje vrstice kode.

uvoz NextAuth od"naslednja avtorizacija/naslednja";
uvoz GoogleProvider od"next-auth/providers/google";
izvozprivzeto NextAuth({
 ponudniki:[
 GoogleProvider({
 clientId: proces.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Ta koda konfigurira Google kot ponudnika preverjanja pristnosti. Funkcija NextAuth definira konfiguracijski objekt Googlovega ponudnika, ki ima dve lastnosti: ID odjemalca in skrivnost odjemalca, ki inicializira ponudnika.

Nato odprite pages/_app.js datoteko in naredite naslednje spremembe kode.

uvoz'../styles/globals.css'
uvoz {SessionProvider} od"next-auth/react"
funkcijoMyApp({ Komponenta, pageProps: { session, ...pageProps } }) {
vrnitev (


 </SessionProvider>
 )
}
izvozprivzeto MyApp

NextAuth's SessionProvider zagotavlja funkcijo upravljanja stanja preverjanja pristnosti za aplikacijo Next.js. Potrebuje a sejo prop, ki vsebuje podatke o seji preverjanja pristnosti, vrnjene iz Googlovega API-ja, ki vključuje podrobnosti uporabnika, kot so njihov ID, e-pošta in žeton za dostop.

Z zavijanjem MyApp s komponento SessionProvider je na voljo objekt seje za preverjanje pristnosti s podrobnostmi o uporabniku v celotni aplikaciji, kar aplikaciji omogoča, da vztraja in upodablja strani na podlagi njihovega stanja preverjanja pristnosti.

Konfigurirajte datoteko index.js

Odprite pages/index.js datoteko, izbrišite okvirno kodo in dodajte spodnjo kodo, da ustvarite gumb za prijavo, ki uporabnike usmerja na stran za prijavo.

uvoz glava od'naprej/glava'
uvoz stilov od'../styles/Home.module.css'
uvoz {useRouter} od'naslednji/usmerjevalnik';
izvozprivzetofunkcijodomov() {
konst usmerjevalnik = useRouter();

vrnitev (





Ustvari naslednjo aplikacijo<<span>/title></span><br> <meta name="<span">"description" content=<span>"Ustvarjeno z ustvarjanjem naslednje aplikacije"</span> /> <br> <povezava rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Dobrodošli v <a href="<span">" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></main></p><p> </p><p classname="{styles.description}"><br> Začnite s prijavo <span>v</span>{<span>' ' </span>}<br> <koda classname="{styles.code}"><span>z</span> vašim Google Računom<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Prijava<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></koda></p><p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Ta koda uporablja kavelj Next.js <strong>useRouter</strong> za obravnavanje usmerjanja znotraj aplikacije z definiranjem predmeta usmerjevalnika. Ko kliknete gumb za prijavo, funkcija za obravnavo pokliče metodo <strong>router.push</strong> za preusmeritev uporabnika na stran za prijavo.</p> <h3 id="create-a-login-authentication-page">Ustvarite avtentikacijo za prijavo Stran</h3> <p>V imeniku <strong>pages</strong> ustvarite novo datoteko <strong>Login.js</strong>, nato dodajte naslednje vrstice kode.</p> <pre> <code><span>import</span> { useSession, signIn, signOut } <span>from</span> <span>»next-auth/react«</span><br><span>import</span> { useRouter} <span>from</span> <span>'next /router'</span>;<br><span>uvozi</span> sloge <span>iz</span> <span>'../styles/Login.module.css'</span><p><span>izvoz</span> <span>privzeta</span> <span><span>funkcija</span> < span>Prijava</span>() {<br> <span>const</span> { <span>podatki</span>: seja } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (seja) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Ustvari naslednjo aplikacijo<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Podpisano < span>v <span>kot</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> Uporabniški profil<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Odjava<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>vrnitev</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Ustvari naslednjo aplikacijo<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Niste prijavljeni <span></span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Podpiši <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> in <strong>signOut</strong> so kljuke, ki jih zagotavlja <strong>next-auth</strong>. Kavelj <strong>useSession</strong> se uporablja za dostop do objekta trenutne uporabniške seje, ko se uporabnik prijavi in ​​ga uspešno overi Google.</p> <p>To Next.js omogoča, da ohrani stanje preverjanja pristnosti in upodablja podatke o uporabniku na strani odjemalca aplikacije, v tem primeru e-pošta.</p> <p>Poleg tega lahko z uporabo predmeta seje preprosto zgradite uporabniške profile po meri za vašo aplikacijo in shranite podatke v bazo podatkov, kot je kot PostgreSQL. <span>Bazo podatkov PostgreSQL lahko povežete s svojo aplikacijo Next.js s pomočjo Prisme</span>.</p> <p>Kavelj za odpis omogoča uporabniku, da se odjavi iz aplikacije. Ta kavelj bo izbrisal objekt seje, ustvarjen med postopkom prijave, in uporabnik bo odjavljen.</p> <p>Zavrtite razvojni strežnik na posodobite spremembe in pojdite na aplikacijo Next.js, ki se izvaja v brskalniku, da preizkusite funkcijo preverjanja pristnosti.</p> <pre> <code>npm run dev</code> </pre> <p>Poleg tega lahko <span>uporabite Tailwind CSS z aplikacijo Next.js</span> za oblikovanje modelov preverjanja pristnosti.</p> <h2 id="authentication-using-nextauth"> Preverjanje pristnosti z uporabo NextAuth  h2> </h2>
<p>NextAuth podpira več storitev za preverjanje pristnosti, ki jih je mogoče preprosto integrirati v vaše aplikacije Next.js za upravljanje na strani odjemalca preverjanje pristnosti.</p> <p>Poleg tega lahko integrirate bazo podatkov za shranjevanje podatkov vaših uporabnikov in žeton dostopa za implementacijo na strani strežnika preverjanje pristnosti za nadaljnje zahteve za preverjanje pristnosti, saj NextAuth zagotavlja podporo za različne integracije baze podatkov.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></povezava>