Šī bibliotēka ļauj nemanāmi integrēt Google autentifikāciju savā Next.js lietojumprogrammā, novēršot nepieciešamību to izstrādāt no nulles.

Drošas autentifikācijas sistēmas integrēšana ir būtisks attīstības solis, kas ne tikai nodrošina drošu vidi lietotājiem, bet arī veicina uzticību jūsu produktam. Šī sistēma nodrošina viņu datu aizsardzību un to, ka lietojumprogrammai var piekļūt tikai pilnvarotas personas.

Drošas autentifikācijas izveide no paša sākuma var būt laikietilpīgs process, kas prasa rūpīgu darbu izpratne par autentifikācijas protokoliem un procesiem, īpaši, strādājot ar dažādu autentifikāciju pakalpojumu sniedzēji.

Izmantojot NextAuth, varat koncentrēties uz galveno funkciju izveidi. Lasiet tālāk, lai uzzinātu, kā integrēt Google sociālo pieteikšanos savā lietojumprogrammā, izmantojot NextAuth.

Kā darbojas NextAuth

NextAuth.js ir atvērtā pirmkoda autentifikācijas bibliotēka, kas vienkāršo pievienošanas procesu autentifikācija un autorizācija funkcionalitāti Next.js lietojumprogrammām, kā arī autentifikācijas darbplūsmu pielāgošanu. Tas nodrošina virkni funkciju, piemēram, e-pastu, bezparoles autentifikāciju un atbalstu dažādiem autentifikācijas nodrošinātājiem, piemēram, Google, GitHub un citiem.

instagram viewer

Augstā līmenī NextAuth darbojas kā starpprogrammatūra, atvieglojot autentifikācijas procesu starp jūsu lietojumprogrammu un pakalpojumu sniedzēju. Zem pārsega, kad lietotājs mēģina pieteikties, viņš tiek novirzīts uz Google pierakstīšanās lapu. Pēc veiksmīgas autentifikācijas Google atgriež lietderīgo kravu, kas ietver lietotāja datus, piemēram, vārdu un e-pasta adresi. Šie dati tiek izmantoti, lai autorizētu piekļuvi lietojumprogrammai un tās resursiem.

Izmantojot lietderīgās slodzes datus, NextAuth izveido sesiju katram autentificētajam lietotājam un saglabā sesijas pilnvaru drošā tikai HTTP sīkfailā. Sesijas marķieris tiek izmantots, lai pārbaudītu lietotāja identitāti un saglabātu viņa autentifikācijas statusu. Šis process attiecas arī uz citiem pakalpojumu sniedzējiem ar nelielām atšķirībām ieviešanā.

Reģistrējiet savu Next.js lietojumprogrammu Google izstrādātāja konsolē

NextAuth nodrošina atbalstu Google autentifikācijas pakalpojumam. Tomēr, lai jūsu lietojumprogramma mijiedarbotos ar Google API un ļautu lietotājiem autentificēties ar viņu Google akreditācijas datus, jums būs jāreģistrē sava lietotne Google izstrādātāja konsolē un iegūt a Klienta ID un Klienta noslēpums.

Lai to izdarītu, dodieties uz Google izstrādātāja konsole. Pēc tam pierakstieties savā Google kontā, lai piekļūtu konsolei. Kad esat pieteicies, izveidojiet jaunu projektu.

Projekta pārskata lapā atlasiet API un pakalpojumi cilni pakalpojumu sarakstā kreisajā izvēlņu rūtī un visbeidzot Akreditācijas dati opciju.

Noklikšķiniet uz Izveidojiet akreditācijas datus pogu, lai ģenerētu savu klienta ID un klienta noslēpumu. Pēc tam no norādītajām opcijām norādiet lietojumprogrammas veidu un pēc tam norādiet lietojumprogrammas nosaukumu.

Pēc tam norādiet savas lietotnes mājas maršruta URL un visbeidzot norādiet savai lietojumprogrammai autorizēto novirzīšanas URI. Šajā gadījumā tam vajadzētu būt http://localhost: 3000/api/auth/callback/google kā norādīts NextAuth Google pakalpojumu sniedzēja iestatījumos.

Pēc veiksmīgas reģistrācijas Google nodrošinās jums klienta ID un klienta noslēpumu, ko izmantot jūsu lietotnē.

Iestatiet NextJS lietojumprogrammu

Lai sāktu, izveidojiet Next.js projektu lokāli:

npx Create-next-app next-auth-app

Kad iestatīšana ir pabeigta, dodieties uz jaunizveidoto projektu direktoriju un palaidiet šo komandu, lai atvērtu izstrādes serveri.

npm palaist dev

Atveriet pārlūkprogrammu un dodieties uz http://localhost: 3000. Tam vajadzētu būt gaidītajam rezultātam.

Jūs varat atrast šī projekta kodu tajā GitHub repozitorijs.

.env faila iestatīšana

Sava projekta saknes mapē izveidojiet jaunu failu un piešķiriet tam nosaukumu .env lai saglabātu savu klienta ID, noslēpumu un pamata URL.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'klienta ID'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'noslēpums'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

NextAUTH URL tiek izmantots, lai norādītu jūsu lietojumprogrammas pamata URL, kas tiek izmantots lietotāju novirzīšanai pēc autentifikācijas pabeigšanas.

Integrējiet NextAuth savā Next.js lietojumprogrammā

Vispirms savā projektā instalējiet NextAuth bibliotēku.

npm instalēt nākamo autorizāciju

Tālāk, sadaļā /pages direktorijā, izveidojiet jaunu mapi un piešķiriet tai nosaukumu api. Mainiet direktoriju uz api mapi un izveidojiet citu mapi ar nosaukumu aut. Autentēšanas mapē pievienojiet jaunu failu un piešķiriet tam nosaukumu [...nextauth].js un pievienojiet šādas koda rindas.

imports NākamaisAuth no"next-ath/next";
imports GoogleProvider no"next-auth/providers/google";
eksportētnoklusējuma NextAuth({
 pakalpojumu sniedzēji:[
 GoogleProvider({
 klienta ID: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 klienta noslēpums: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Šis kods konfigurē Google kā autentifikācijas nodrošinātāju. Funkcija NextAuth definē Google nodrošinātāja konfigurācijas objektu, kurā ir divi rekvizīti: klienta ID un klienta noslēpums, kas inicializē nodrošinātāju.

Pēc tam atveriet pages/_app.js failu un veiciet šādas izmaiņas kodā.

imports"../styles/globals.css"
imports { SessionProvider } no"next-ath/react"
funkcijuMyApp({ Component, pageProps: { session, ...pageProps } }) {
atgriezties (


 </SessionProvider>
 )
}
eksportētnoklusējuma MyApp

NextAuth's SessionProvider komponents nodrošina autentifikācijas stāvokļa pārvaldības funkcionalitāti lietotnei Next.js. Tas aizņem a sesija prop, kas satur autentifikācijas sesijas datus, kas atgriezti no Google API, kas ietver lietotāja informāciju, piemēram, ID, e-pastu un piekļuves pilnvaru.

Iesaiņojot MyApp komponents ar SessionProvider komponentu, ir pieejams autentifikācijas sesijas objekts ar lietotāja informāciju visā lietojumprogrammā, ļaujot lietojumprogrammai saglabāt un renderēt lapas, pamatojoties uz to autentifikācijas stāvokli.

Konfigurējiet failu index.js

Atveriet pages/index.js failu, izdzēsiet standarta kodu un pievienojiet tālāk norādīto kodu, lai izveidotu pieteikšanās pogu, kas novirza lietotājus uz pieteikšanās lapu.

imports Galva no"nākamais/galva"
imports stilus no"../styles/Home.module.css"
imports { useRouter } no'next/router';
eksportētnoklusējumafunkcijuMājas() {
konst maršrutētājs = useRouter();

atgriezties (





Izveidot nākamo lietotni<<span>/title></span><br> <meta name="<span">"description" content=<span>"Izveidots, izveidojot nākamo lietotni"</span> /> <br> <saite rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Laipni lūdzam <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> Sāciet darbu, <span>pierakstoties</span>{<span>' ' </span>}<br> <kods classname="{styles.code}"><span>ar</span> jūsu Google kontu<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Pieteikšanās<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></kods></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Šis kods izmanto Next.js <strong>useRouter</strong> āķi, lai apstrādātu maršrutēšanu lietojumprogrammā, definējot maršrutētāja objektu. Kad tiek noklikšķināts uz pieteikšanās pogas, apdarinātāja funkcija izsauc metodi <strong>router.push</strong>, lai novirzītu. lietotājam uz pieteikšanās lapu.</p> <h3 id="create-a-login-authentication-page">Izveidot pieteikšanās autentifikāciju Lapa</h3> <p>Katalogā <strong>lapas</strong> izveidojiet jaunu failu <strong>Login.js</strong>, pēc tam pievienojiet šādas koda rindiņas.</p> <pre> <code><span>importēt</span> { useSession, signIn, signOut } <span>no</span> <span>"next-auth/react"</span><br><span>importēt</span> { useRouter } <span>no</span> <span>'next /router'</span>;<br><span>importēt</span> stilus <span>no</span> <span>'../styles/Login.module.css'</span><p><span>eksportēt</span> <span>noklusējuma</span> <span><span>funkcija</span> < span>Pieteikšanās</span>() {<br> <span>const</span> { <span>data</span>: sesija } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (sesija) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Izveidot nākamo lietotni<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Parakstīts < span>in <span>kā</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> Lietotāja profils<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Izrakstīties<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> <br> <span>atgriezties</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Izveidot nākamo lietotni<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Jūs neesat pierakstījies <span>pierakstījies</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}> Pierakstīties <span>iekšā</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> un <strong>signOut</strong> ir āķi, ko nodrošina <strong>next-ath</strong>. Āķis <strong>useSession</strong> tiek izmantots, lai piekļūtu pašreizējā lietotāja sesijas objektam, kad lietotājs pierakstās un ir veiksmīgi autentificēts Google.</p> <p>Tas ļauj Next.js saglabāt autentifikācijas stāvokli un renderēt lietotāja informāciju lietotnes klienta pusē, šajā gadījumā e-pasts.</p> <p>Turklāt, izmantojot sesijas objektu, varat viegli izveidot pielāgotus lietotāju profilus savai lietojumprogrammai un saglabāt datus datubāzē, piemēram, kā PostgreSQL. Varat <span>savienot PostgreSQL datu bāzi ar savu Next.js lietojumprogrammu, izmantojot Prisma</span>.</p> <p>Izrakstīšanās āķis ļauj lietotājam izrakstīties no lietojumprogrammas. Šis āķis izdzēsīs pierakstīšanās procesa laikā izveidoto sesijas objektu, un lietotājs tiks izrakstīts.</p> <p>Turpiniet un pagrieziet izstrādes serveri, lai atjauniniet izmaiņas un pārejiet uz savu Next.js lietojumprogrammu, kas darbojas pārlūkprogrammā, lai pārbaudītu autentifikācijas funkcionalitāti.</p> <pre> <code>npm palaist dev</code> </pre> <p>Turklāt varat <span>izmantot Tailwind CSS ar savu Next.js lietotni</span>, lai veidotu autentifikācijas modeļu stilu.</p> <h2 id="authentication-using-nextauth"> Autentifikācija, izmantojot NextAuth  h2> </h2>
<p>NextAuth atbalsta vairākus autentifikācijas pakalpojumus, kurus var viegli integrēt jūsu Next.js lietojumprogrammās, lai strādātu klienta pusē. autentifikācija.</p> <p>Turklāt varat integrēt datu bāzi, lai saglabātu savu lietotāju datus, un piekļuves pilnvaru, lai ieviestu servera puses autentifikācija turpmākajiem autentifikācijas pieprasījumiem, jo ​​NextAuth nodrošina dažādu datu bāzu integrāciju atbalstu.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></saite>