Această bibliotecă vă permite să integrați fără probleme autentificarea Google în aplicația dvs. Next.js, eliminând nevoia de a o dezvolta de la zero.

Integrarea unui sistem de autentificare securizat este un pas esențial de dezvoltare care nu numai că oferă un mediu sigur pentru utilizatori, ci și insuflă încredere în produsul dvs. Acest sistem asigură că datele lor sunt protejate și că numai persoanele autorizate pot accesa aplicația.

Construirea unei autentificări sigure de la zero poate fi un proces consumator de timp, care necesită un proces amănunțit înțelegerea protocoalelor și proceselor de autentificare, în special atunci când se gestionează diferite autentificări furnizorii.

Folosind NextAuth, vă puteți concentra asupra construirii caracteristicilor de bază. Citiți mai departe pentru a afla cum să integrați autentificarea socială Google în aplicația dvs. folosind NextAuth.

Cum funcționează NextAuth

NextAuth.js este o bibliotecă de autentificare open-source care simplifică procesul de adăugare

instagram viewer
autentificare și autorizare funcționalitatea aplicațiilor Next.js, precum și personalizarea fluxurilor de lucru de autentificare. Oferă o gamă largă de funcții, cum ar fi e-mail, autentificare fără parolă și suport pentru diverși furnizori de autentificare, cum ar fi Google, GitHub și altele.

La un nivel înalt, NextAuth acționează ca un middleware, facilitând procesul de autentificare între aplicația dvs. și furnizor. Sub capotă, atunci când un utilizator încearcă să se autentifice, este redirecționat către pagina de conectare a Google. După autentificarea cu succes, Google returnează o încărcătură utilă care include datele utilizatorului, cum ar fi numele și adresa de e-mail ale acestuia. Aceste date sunt folosite pentru a autoriza accesul la aplicație și resursele acesteia.

Folosind datele de încărcare utilă, NextAuth creează o sesiune pentru fiecare utilizator autentificat și stochează simbolul de sesiune într-un cookie securizat exclusiv HTTP. Indicatorul de sesiune este utilizat pentru a verifica identitatea utilizatorului și pentru a menține starea de autentificare a acestuia. Acest proces se aplică și altor furnizori cu mici variații în implementare.

Înregistrați-vă aplicația Next.js pe Consola pentru dezvoltatori Google

NextAuth oferă suport pentru serviciul de autentificare Google. Cu toate acestea, pentru ca aplicația dvs. să interacționeze cu API-urile Google și să permită utilizatorilor să se autentifice acreditările lor Google, va trebui să vă înregistrați aplicația pe consola pentru dezvoltatori Google și obține a ID client și Secretul clientului.

Pentru a face asta, navigați la Consola pentru dezvoltatori Google. Apoi, conectați-vă cu contul dvs. Google pentru a accesa consola. Odată autentificat, creați un nou proiect.

Pe pagina de prezentare generală a proiectului, selectați API-uri și servicii din lista de servicii din panoul de meniu din stânga și, în sfârșit, Acreditări opțiune.

Faceți clic pe Creați acreditări butonul pentru a genera ID-ul de client și Secretul clientului. Apoi, specificați tipul de aplicație din opțiunile date și apoi furnizați un nume pentru aplicația dvs.

După aceea, specificați adresa URL a rutei de acasă a aplicației dvs. și, în final, specificați URI-ul de redirecționare autorizat pentru aplicația dvs. Pentru acest caz, ar trebui să fie http://localhost: 3000/api/auth/callback/google așa cum este specificat de setările furnizorului Google NextAuth.

După înregistrarea cu succes, Google vă va furniza un cod de client și un secret de client pentru a le utiliza în aplicația dvs.

Configurați aplicația NextJS

Pentru a începe, creați un proiect Next.js local:

npx create-next-app next-auth-app

După finalizarea instalării, navigați la directorul de proiect nou creat și rulați această comandă pentru a porni serverul de dezvoltare.

npm run dev

Deschideți browserul și navigați la http://localhost: 3000. Acesta ar trebui să fie rezultatul așteptat.

Puteți găsi codul acestui proiect în documentul său Depozitul GitHub.

Configurarea fișierului .env

În folderul rădăcină al proiectului, creați un fișier nou și denumiți-l .env pentru a păstra ID-ul de client, Secretul și adresa URL de bază.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= „ID client”
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'secret'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

Adresa URL NextAUTH este utilizată pentru a specifica adresa URL de bază a aplicației dvs., care este utilizată pentru redirecționarea utilizatorilor după finalizarea autentificării.

Integrați NextAuth în aplicația dvs. Next.js

Mai întâi, instalați biblioteca NextAuth în proiectul dvs.

npm install next-auth

În continuare, în /pages director, creați un folder nou și denumiți-l api. Schimbați directorul în api folder și creați un alt folder numit auth. În folderul auth, adăugați un fișier nou și denumiți-l [...nextauth].js și adăugați următoarele linii de cod.

import NextAuth din„next-auth/next”;
import GoogleProvider din„next-auth/providers/google”;
exportMod implicit NextAuth({
 furnizori:[
 GoogleProvider({
 clientId: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Acest cod configurează Google ca furnizor de autentificare. Funcția NextAuth definește obiectul de configurare a furnizorului Google care are două proprietăți: un ID de client și un secret de client care inițializează furnizorul.

Apoi, deschideți pages/_app.js fișier și efectuați următoarele modificări la cod.

import„../styles/globals.css”
import { SessionProvider } din„următoarea autorizare/reacție”
funcţieMyApp({ Component, pageProps: { session, ...pageProps } }) {
întoarcere (


 </SessionProvider>
 )
}
exportMod implicit MyApp

NextAuth's SessionProvider componenta oferă funcționalitate de gestionare a stării de autentificare pentru aplicația Next.js. Este nevoie de o sesiune prop care conține datele sesiunii de autentificare returnate de API-ul Google, care include detalii despre utilizator, cum ar fi ID-ul, e-mailul și simbolul de acces.

Prin ambalarea MyApp componentă cu componenta SessionProvider, obiectul sesiunii de autentificare cu detaliile utilizatorului este disponibil în întreaga aplicație, permițând aplicației să persiste și să reda paginile pe baza stării lor de autentificare.

Configurați fișierul index.js

Deschide pages/index.js fișier, ștergeți codul standard și adăugați codul de mai jos pentru a crea un buton de conectare care direcționează utilizatorii către o pagină de conectare.

import Cap din„următorul/cap”
import stiluri din„../styles/Home.module.css”
import { useRouter } din„următorul/router”;
exportMod implicitfuncţieAcasă() {
const router = useRouter();

întoarcere (





Creați următoarea aplicație<<span>/title></span><br> <meta name="<span">"description" content=<span>"Generată de crearea următoarei aplicații"</span> /> <br> <link rel="<span">"pictogramă" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <principal classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Bun venit la <a href="<span>" https:>>Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></principal></p>
<p> </p>
<p classname="{styles.description}"><br> Începeți prin a vă conecta <span>în</span>{<span>' ' </span>}<br> <cod classname="{styles.code}"><span>cu</span> Contul dvs. Google<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Conectare<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></cod></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Acest cod folosește cârligul Next.js <strong>useRouter</strong> pentru a gestiona rutarea în cadrul aplicației prin definirea unui obiect router. Când se face clic pe butonul de conectare, funcția de gestionare apelează metoda <strong>router.push</strong> pentru a redirecționa utilizatorului la pagina de conectare.</p> <h3 id="create-a-login-authentication-page">Creați o autentificare de conectare Pagina</h3> <p>În directorul <strong>pagini</strong>, creați un nou fișier <strong>Login.js</strong>, apoi adăugați următoarele linii de cod.</p> <pre> <code><span>import</span> { useSession, signIn, signOut } <span>din</span> <span>„next-auth/react”</span><br><span>import</span> { useRouter } <span>din</span> <span>'next /router'</span>;<br><span>import</span> stiluri <span>din</span> <span>'../styles/Login.module.css'</span><p><span>export</span> <span>implicit</span> <span><span>funcție</span> < span>Autentificare</span>() {<br> <span>const</span> { <span>date</span>: sesiune } = useSession()<br> <span>const</span> router = useRouter();<br> <span>dacă</span> (sesiune) {<br> <span>întoarce</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Creează următoarea aplicație<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Semnat < span>în <span>ca</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profil'< /span>)}><br> Profil utilizator<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Deconectare<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>întoarce</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Creează următoarea aplicație<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Nu sunteți conectat <span>în</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Semnați <span>în</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>conectare</strong> și <strong>deconectare</strong> sunt cârlige furnizate de <strong>next-auth</strong>. Cârligul <strong>useSession</strong> este folosit pentru a accesa obiectul sesiunii curente de utilizator odată ce utilizatorul se conectează și este autentificat cu succes de către Google.</p> <p>Acest lucru permite Next.js să persiste starea de autentificare și să afișeze detaliile utilizatorului pe partea client a aplicației, în acest caz, e-mail.</p> <p>În plus, folosind obiectul sesiune, puteți crea cu ușurință profiluri de utilizator personalizate pentru aplicația dvs. și puteți stoca datele într-o bază de date precum ca PostgreSQL. Puteți <span>conecta o bază de date PostgreSQL la aplicația dvs. Next.js folosind Prisma</span>.</p> <p>Cârligul de deconectare permite unui utilizator să se deconecteze de la aplicație. Acest cârlig va șterge obiectul de sesiune creat în timpul procesului de conectare și utilizatorul va fi deconectat.</p> <p>Continuați și porniți serverul de dezvoltare pentru actualizați modificările și mergeți la aplicația dvs. Next.js care rulează în browser pentru a testa funcționalitatea de autentificare.</p> <pre> <code>npm run dev</code> </pre> <p>În plus, puteți <span>utiliza Tailwind CSS cu aplicația dvs. Next.js</span> pentru a stila modelele de autentificare.</p> <h2 id="authentication-using-nextauth"> Autentificare folosind NextAuth  h2> </h2>
<p>NextAuth acceptă mai multe servicii de autentificare care pot fi integrate cu ușurință în aplicațiile dvs. Next.js pentru a gestiona partea clientului autentificare.</p> <p>În plus, puteți integra o bază de date pentru a stoca datele utilizatorilor și jetonul de acces pentru a implementa partea serverului autentificare pentru solicitările de autentificare ulterioare, deoarece NextAuth oferă suport pentru diferite integrări de baze de date.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>