Táto knižnica vám umožňuje bezproblémovo integrovať overenie Google do vašej aplikácie Next.js, čím sa eliminuje potreba vyvíjať ju od začiatku.

Integrácia bezpečného autentifikačného systému je kľúčovým vývojovým krokom, ktorý nielenže poskytuje bezpečné prostredie pre používateľov, ale tiež vzbudzuje dôveru vo váš produkt. Tento systém zabezpečuje, že ich údaje sú chránené a že do aplikácie majú prístup iba oprávnené osoby.

Vybudovanie bezpečnej autentifikácie od základov môže byť časovo náročný proces, ktorý si vyžaduje dôkladnosť pochopenie autentifikačných protokolov a procesov, najmä pri manipulácii s rôznymi autentifikáciami poskytovateľov.

Pomocou NextAuth sa môžete zamerať na vytváranie základných funkcií. Čítajte ďalej a zistite, ako integrovať sociálne prihlásenie Google do vašej aplikácie pomocou NextAuth.

Ako funguje NextAuth

NextAuth.js je open-source overovacia knižnica, ktorá zjednodušuje proces pridávania autentifikáciu a autorizáciu funkčnosť aplikácií Next.js, ako aj prispôsobenie pracovných postupov overovania. Poskytuje celý rad funkcií, ako je e-mail, overenie bez hesla a podpora pre rôznych poskytovateľov overenia, ako sú Google, GitHub a ďalšie.

instagram viewer

Na vysokej úrovni funguje NextAuth ako middleware, ktorý uľahčuje proces autentifikácie medzi vašou aplikáciou a poskytovateľom. Pod kapotou, keď sa používateľ pokúsi prihlásiť, je presmerovaný na prihlasovaciu stránku Google. Po úspešnej autentifikácii Google vráti užitočné zaťaženie, ktoré obsahuje údaje používateľa, ako je jeho meno a e-mailová adresa. Tieto údaje sa používajú na autorizáciu prístupu k aplikácii a jej zdrojom.

Pomocou údajov o užitočnom zaťažení vytvorí NextAuth reláciu pre každého overeného používateľa a uloží token relácie do zabezpečeného cookie iba HTTP. Token relácie sa používa na overenie identity užívateľa a zachovanie stavu jeho autentifikácie. Tento proces platí aj pre iných poskytovateľov s malými odchýlkami v implementácii.

Zaregistrujte svoju aplikáciu Next.js v Konzole pre vývojárov Google

NextAuth poskytuje podporu pre overovaciu službu Google. Aby však vaša aplikácia interagovala s rozhraniami Google API a umožňovala používateľom autentifikáciu ich poverenia Google, budete musieť zaregistrovať svoju aplikáciu v konzole pre vývojárov Google a získať a ID klienta a Tajomstvo klienta.

Ak to chcete urobiť, prejdite na Google Developer Console. Potom sa prihláste pomocou svojho účtu Google, aby ste získali prístup ku konzole. Po prihlásení vytvorte nový projekt.

Na stránke prehľadu projektu vyberte položku API a služby zo zoznamu služieb na ľavom paneli ponuky a nakoniec, poverenia možnosť.

Klikni na Vytvorte poverenia tlačidlo na vygenerovanie vášho ID klienta a tajomstva klienta. Ďalej zadajte typ aplikácie z daných možností a potom zadajte názov vašej aplikácie.

Potom zadajte domovskú adresu URL vašej aplikácie a nakoniec zadajte identifikátor URI autorizovaného presmerovania pre vašu aplikáciu. Pre tento prípad by to tak malo byť http://localhost: 3000/api/auth/callback/google ako je uvedené v nastaveniach poskytovateľa Google NextAuth.

Po úspešnej registrácii vám spoločnosť Google poskytne ID klienta a tajný kľúč klienta na použitie vo vašej aplikácii.

Nastavte aplikáciu NextJS

Ak chcete začať, lokálne vytvorte projekt Next.js:

npx create-next-app next-auth-app

Po dokončení nastavenia prejdite do novovytvoreného adresára projektu a spustite tento príkaz, čím spustíte vývojový server.

npm spustiť dev

Otvorte prehliadač a prejdite na http://localhost: 3000. Toto by mal byť očakávaný výsledok.

Kód tohto projektu nájdete v ňom úložisko GitHub.

Nastavenie súboru .env

V koreňovom priečinku projektu vytvorte nový súbor a pomenujte ho .env uchovávať vaše ID klienta, tajný kľúč a základnú adresu URL.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'client ID'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'tajné'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

Adresa URL NextAUTH sa používa na určenie základnej adresy URL vašej aplikácie, ktorá sa používa na presmerovanie používateľov po dokončení autentifikácie.

Integrujte NextAuth do svojej aplikácie Next.js

Najprv si do projektu nainštalujte knižnicu NextAuth.

npm install next-auth

Ďalej v /pages adresár, vytvorte nový priečinok a pomenujte ho api. Zmeňte adresár na api a vytvorte ďalší priečinok s názvom auth. V priečinku auth pridajte nový súbor a pomenujte ho [...nextauth].js a pridajte nasledujúce riadky kódu.

importovať NextAuth od"next-auth/next";
importovať GoogleProvider od"next-auth/providers/google";
exportpredvolená NextAuth({
 poskytovatelia:[
 GoogleProvider({
 clientId: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Tento kód konfiguruje Google ako poskytovateľa overenia. Funkcia NextAuth definuje objekt konfigurácie poskytovateľa Google, ktorý má dve vlastnosti: ID klienta a tajný kľúč klienta, ktorý inicializuje poskytovateľa.

Ďalej otvorte pages/_app.js súbor a vykonajte nasledujúce zmeny v kóde.

importovať'../styles/globals.css'
importovať { SessionProvider } od"ďalšie overenie/reakcia"
funkciuMyApp({ Component, pageProps: { session, ...pageProps } }) {
vrátiť (


 </SessionProvider>
 )
}
exportpredvolená MyApp

NextAuth's Poskytovateľ relácie komponent poskytuje funkcionalitu správy stavu overenia pre aplikáciu Next.js. Trvá to a relácie prop, ktorý obsahuje údaje o autentifikačnej relácii vrátené z rozhrania Google API, ktoré zahŕňa podrobnosti o používateľovi, ako je jeho ID, e-mail a prístupový token.

Obalením MyApp s komponentom SessionProvider sa sprístupní objekt autentifikačnej relácie s podrobnosťami o užívateľovi v celej aplikácii, čo umožňuje aplikácii pretrvávať a vykresľovať stránky na základe ich stavu autentifikácie.

Nakonfigurujte súbor index.js

Otvor pages/index.js súbor, odstráňte štandardný kód a pridajte kód nižšie, aby ste vytvorili prihlasovacie tlačidlo, ktoré používateľov nasmeruje na prihlasovaciu stránku.

importovať Hlava od'ďalší/hlava'
importovať štýlov od'../styles/Home.module.css'
importovať { useRouter } od'ďalší/smerovač';
exportpredvolenáfunkciuDomov() {
konšt router = useRouter();

vrátiť (





Vytvoriť ďalšiu aplikáciu<<span>/title></span><br> <meta name="<span">"description" content=<span>"Vygenerované vytvorením ďalšej aplikácie"</span> /> <br> <odkaz rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Vitajte 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 prihlásením <span>prihlásením</span>{<span>' ' </span>}<br> <k classname="{styles.code}"><span>s</span> vaším účtom Google<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Prihlásenie<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></k></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Tento kód používa háčik Next.js <strong>useRouter</strong> na spracovanie smerovania v rámci aplikácie definovaním objektu smerovača. Po kliknutí na prihlasovacie tlačidlo funkcia obsluhy zavolá metódu <strong>router.push</strong> na presmerovanie používateľa na prihlasovaciu stránku.</p> <h3 id="create-a-login-authentication-page">Vytvoriť overenie prihlásenia Strana</h3> <p>V adresári <strong>pages</strong> vytvorte nový súbor <strong>Login.js</strong> a potom pridajte nasledujúce riadky kódu.</p> <pre> <code><span>importovať</span> { useSession, signIn, signOut } <span>z</span> <span>"next-auth/react"</span><br><span>importovať</span> { useRouter } <span>z</span> <span>'next /router'</span>;<br><span>importovať</span> štýly <span>z</span> <span>'../styles/Login.module.css'</span><p><span>exportovať</span> <span>predvolená</span> <span><span>funkcia</span> < span>Prihlásenie</span>() {<br> <span>const</span> { <span>údaje</span>: relácia } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (relácia) {<br> <span>návrat</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Vytvoriť ďalšiu aplikáciu<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Podpísané < span>v <span>ako</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> Profil používateľa<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Odhlásiť sa<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>návrat</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Vytvoriť ďalšiu aplikáciu<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Nie ste prihlásení <span>prihlásení</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Podpísať <span>v</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> a <strong>signOut</strong> sú háčiky, ktoré poskytuje <strong>next-auth</strong>. Hák <strong>useSession</strong> sa používa na prístup k objektu relácie aktuálneho používateľa, keď sa používateľ prihlási a úspešne overí Google.</p> <p>To umožňuje súboru Next.js zachovať stav overenia a vykresliť podrobnosti o používateľovi na strane klienta aplikácie, v tomto prípade e-mailu.</p> <p>Navyše pomocou objektu relácie môžete jednoducho vytvoriť vlastné užívateľské profily pre vašu aplikáciu a uložiť údaje do databázy, napr. ako PostgreSQL. Môžete <span>prepojiť PostgreSQL databázu s aplikáciou Next.js pomocou Prisma</span>.</p> <p>Háčik na odhlásenie umožňuje používateľovi odhlásiť sa z aplikácie. Tento hák odstráni objekt relácie vytvorený počas procesu prihlásenia a používateľ bude odhlásený.</p> <p>Pokračujte a spustite vývojový server na aktualizujte zmeny a prejdite do svojej aplikácie Next.js spustenej v prehliadači, aby ste otestovali funkčnosť autentifikácie.</p> <pre> <code>npm run dev</code> </pre> <p>Okrem toho môžete <span>použiť Tailwind CSS s aplikáciou Next.js</span> na úpravu modelov autentifikácie.</p> <h2 id="authentication-using-nextauth"> Autentifikácia pomocou NextAuth  h2> </h2>
<p>NextAuth podporuje viacero autentifikačných služieb, ktoré je možné jednoducho integrovať do vašich aplikácií Next.js na spracovanie na strane klienta autentifikáciu.</p> <p>Okrem toho môžete integrovať databázu na ukladanie údajov vašich používateľov a prístupový token na implementáciu na strane servera autentifikáciu pre následné požiadavky na autentifikáciu, pretože NextAuth poskytuje podporu pre rôzne integrácie databáz.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></odkaz>