See teek võimaldab teil integreerida Google'i autentimise sujuvalt oma Next.js-i rakendusse, välistades vajaduse seda nullist arendada.

Turvalise autentimissüsteemi integreerimine on oluline arendusetapp, mis mitte ainult ei paku kasutajatele turvalist keskkonda, vaid sisendab ka usaldust teie toote vastu. See süsteem tagab, et nende andmed on kaitstud ja rakendusele pääsevad juurde ainult volitatud isikud.

Turvalise autentimise loomine algusest peale võib olla aeganõudev protsess, mis nõuab põhjalikku uurimist autentimisprotokollide ja -protsesside mõistmine, eriti erinevate autentimiste käsitlemisel pakkujad.

NextAuthi abil saate keskenduda põhifunktsioonide loomisele. Lugege edasi, et saada teavet selle kohta, kuidas integreerida NextAuthi abil oma rakendusse Google'i sotsiaalne sisselogimine.

Kuidas NextAuth töötab

NextAuth.js on avatud lähtekoodiga autentimise teek, mis lihtsustab lisamise protsessi autentimine ja autoriseerimine funktsionaalsust Next.js rakendustele ning autentimise töövoogude kohandamist. See pakub mitmesuguseid funktsioone, nagu e-post, paroolita autentimine ja tugi erinevatele autentimisteenuse pakkujatele, nagu Google, GitHub ja palju muud.

instagram viewer

Kõrgel tasemel toimib NextAuth vahevarana, hõlbustades teie rakenduse ja teenusepakkuja vahelist autentimisprotsessi. Kapoti all, kui kasutaja proovib sisse logida, suunatakse ta Google'i sisselogimislehele. Eduka autentimise korral tagastab Google kasuliku koormuse, mis sisaldab kasutaja andmeid, nagu tema nimi ja e-posti aadress. Neid andmeid kasutatakse rakendusele ja selle ressurssidele juurdepääsu lubamiseks.

Kasuliku koormuse andmeid kasutades loob NextAuth iga autentitud kasutaja jaoks seansi ja salvestab seansimärgi turvalises HTTP-küpsises. Seansimärki kasutatakse kasutaja identiteedi kontrollimiseks ja tema autentimisoleku säilitamiseks. See protsess kehtib ka teiste pakkujate puhul, mille juurutamine on veidi erinev.

Registreerige oma Next.js rakendus Google'i arendajakonsoolis

NextAuth toetab Google'i autentimisteenust. Kuid selleks, et teie rakendus suhtleks Google'i API-dega ja võimaldaks kasutajatel autentida nende Google'i mandaadid, peate registreerima oma rakenduse Google'i arendajakonsoolis ja saada a Kliendi ID ja Kliendi saladus.

Selleks navigeerige saidile Google'i arendajakonsool. Järgmisena logige konsoolile juurdepääsuks oma Google'i kontoga sisse. Pärast sisselogimist looge uus projekt.

Valige projekti ülevaatelehel API-d ja teenused vasakpoolsel menüüpaanil olevast teenuste loendist vahekaarti ja lõpuks Mandaat valik.

Klõpsake nuppu Loo mandaadid nuppu, et luua oma kliendi ID ja kliendi saladus. Järgmiseks määrake antud valikute hulgast rakenduse tüüp ja seejärel andke oma rakendusele nimi.

Seejärel määrake oma rakenduse kodumarsruudi URL ja lõpuks määrake oma rakenduse jaoks volitatud ümbersuunamise URI. Sel juhul peaks see olema http://localhost: 3000/api/auth/callback/google nagu on määratud NextAuthi Google'i pakkuja seadetes.

Pärast edukat registreerimist annab Google teile rakenduses kasutamiseks kliendi ID ja kliendi saladuse.

Seadistage rakendus NextJS

Alustamiseks looge Next.js projekt kohapeal:

npx create-next-app next-auth-app

Pärast häälestuse lõpetamist liikuge äsja loodud projektikataloogi ja käivitage see käsk arendusserveri käivitamiseks.

npm käivita dev

Avage brauser ja navigeerige saidile http://localhost: 3000. See peaks olema oodatud tulemus.

Selle projekti koodi leiate sellest GitHubi hoidla.

Env-faili seadistamine

Looge oma projekti juurkaustas uus fail ja pange sellele nimi .env et hoida oma kliendi ID-d, saladust ja põhi-URL-i.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= "kliendi ID"
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'saladus'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

NextAUTH URL-i kasutatakse teie rakenduse baas-URL-i määramiseks, mida kasutatakse kasutajate ümbersuunamiseks pärast autentimise lõpetamist.

Integreerige NextAuth oma Next.js-i rakendusse

Esmalt installige oma projekti NextAuthi teek.

npm install next-auth

Järgmisena /pages kataloogi, looge uus kaust ja andke sellele nimi api. Muutke kataloogiks api kaust ja looge uus kaust nimega aut. Lisage autentimiskaustas uus fail ja pange sellele nimi [...nextauth].js ja lisage järgmised koodiread.

importida JärgmineAuth alates"next-auth/next";
importida GoogleProvider alates"next-auth/providers/google";
eksportidavaikimisi NextAuth({
 pakkujad:[
 GoogleProvider({
 kliendi ID: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

See kood konfigureerib Google'i autentimise pakkujaks. Funktsioon NextAuth määrab Google'i pakkuja konfiguratsiooniobjekti, mis võtab enda alla kaks atribuuti: kliendi ID ja kliendi saladus, mis lähtestab pakkuja.

Järgmisena avage pages/_app.js faili ja tehke koodis järgmised muudatused.

importida"../styles/globals.css"
importida { Session Provider } alates"järgmine autentimine/reageerimine"
funktsiooniMinuApp({ Component, pageProps: { session, ...pageProps } }) {
tagasi (


 </SessionProvider>
 )
}
eksportidavaikimisi MinuApp

NextAuth's Seansipakkuja komponent pakub rakendusele Next.js autentimisoleku haldusfunktsiooni. See võtab a istungil prop, mis sisaldab Google'i API-lt tagastatud autentimisseansi andmeid, mis hõlmavad kasutaja üksikasju, nagu nende ID, e-posti aadress ja juurdepääsuluba.

Pakkides MinuApp komponendiga SessionProvider, tehakse kättesaadavaks autentimisseansi objekt koos kasutaja üksikasjadega kogu rakenduse ulatuses, võimaldades rakendusel püsida ja renderdada lehti nende autentimisoleku põhjal.

Seadistage fail index.js

Ava pages/index.js faili, kustutage standardkood ja lisage allolev kood, et luua sisselogimisnupp, mis suunab kasutajad sisselogimislehele.

importida Pea alates'järgmine/pea'
importida stiilid alates'../styles/Home.module.css'
importida { useRouter } alates'järgmine/ruuter';
eksportidavaikimisifunktsiooniKodu() {
konst ruuter = userRouter();

tagasi (





Loo järgmine rakendus<<span>/title></span><br> <meta name="<span">"description" content=<span>"Loodud järgmise rakenduse loomisega"</span> /> <br> <link rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Tere tulemast <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> Alustamiseks logige <span>sisse</span>{<span>'' </span>}<br> <kood classname="{styles.code}"><span>koos</span> teie Google'i kontoga<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Logi sisse<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></kood></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>See kood kasutab konksu Next.js <strong>useRouter</strong>, et hallata rakenduses marsruutimist, määratledes ruuteri objekti. Kui klõpsate sisselogimisnupul, kutsub töötleja funktsioon ümbersuunamiseks meetodi <strong>router.push</strong> kasutaja sisselogimislehele.</p> <h3 id="create-a-login-authentication-page">Loo sisselogimise autentimine Lehekülg</h3> <p>Looge kataloogis <strong>pages</strong> uus fail <strong>Login.js</strong>, seejärel lisage järgmised koodiread.</p> <pre> <code><span>import</span> { useSession, signIn, signOut } <span>alates</span> <span>"next-auth/react"</span><br><span>import</span> { useRouter } <span>from</span> <span>'next /ruuter'</span>;<br><span>impordi</span> stiilid <span>kohast</span> <span>'../styles/Login.module.css'</span><p><span>eksport</span> <span>vaikeseade</span> <span><span>funktsioon</span> < span>Sisselogimine</span>() {<br> <span>const</span> { <span>andmed</span>: seanss } = useSession()<br> <span>const</span> ruuter = userRouter();<br> <span>if</span> (session) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Loo järgmine rakendus<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Allkirjastatud < span>in <span>as</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> ruuter.push(<span>'/Profiil'< /span>)}><br> Kasutaja profiil<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Logi välja<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> <br> <span>tagasi</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Loo järgmine rakendus<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Te pole <span>sisse logitud</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Logi sisse <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> ja <strong>signOut</strong> on konksud, mida pakub <strong>next-auth</strong>. Konksu <strong>useSession</strong> kasutatakse praegusele kasutajaseansi objektile juurde pääsemiseks, kui kasutaja logib sisse ja on edukalt autentinud Google.</p> <p>See võimaldab Next.js-il säilitada autentimisoleku ja renderdada kasutaja andmed rakenduse kliendi poolel, antud juhul e-posti teel.</p> <p>Lisaks saate seansiobjekti kasutades hõlpsasti luua oma rakenduse jaoks kohandatud kasutajaprofiile ja salvestada andmed andmebaasi, näiteks kui PostgreSQL. Saate <span>ühendada PostgreSQL-i andmebaasi rakendusega Next.js, kasutades Prismat</span>.</p> <p>Väljalogimise konks võimaldab kasutajal rakendusest välja logida. See konks kustutab sisselogimisprotsessi käigus loodud seansiobjekti ja kasutaja logitakse välja.</p> <p>Minge edasi ja keerake arendusserver üles värskendage muudatusi ja minge brauseris töötavasse Next.js rakendusse, et testida autentimisfunktsiooni.</p> <pre> <code>npm run dev</code> </pre> <p>Lisaks saate <span>kasutada Tailwind CSS-i koos rakendusega Next.js</span> autentimismudelite kujundamiseks.</p> <h2 id="authentication-using-nextauth"> Autentimine NextAuthi abil  h2> </h2>
<p>NextAuth toetab mitut autentimisteenust, mida saab hõlpsasti integreerida teie Next.js-i rakendustesse kliendipoolseks haldamiseks autentimine.</p> <p>Lisaks saate integreerida oma kasutajate andmete salvestamiseks andmebaasi ja serveripoolse juurutamiseks juurdepääsuloa autentimine järgnevate autentimistaotluste jaoks, kuna NextAuth pakub tuge erinevatele andmebaaside integreerimisele.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>