Ši biblioteka leidžia sklandžiai integruoti „Google“ autentifikavimą į „Next.js“ programą, todėl nereikia kurti jos nuo nulio.

Saugios autentifikavimo sistemos integravimas yra esminis plėtros žingsnis, kuris ne tik užtikrina saugią aplinką vartotojams, bet ir skatina pasitikėjimą jūsų produktu. Ši sistema užtikrina, kad jų duomenys būtų apsaugoti ir prie programos galėtų prisijungti tik įgalioti asmenys.

Saugaus autentifikavimo kūrimas nuo pat pradžių gali būti daug laiko reikalaujantis procesas, kurį reikia kruopščiai atlikti autentifikavimo protokolų ir procesų supratimas, ypač atliekant skirtingus autentifikavimo būdus teikėjai.

Naudodami NextAuth galite sutelkti dėmesį į pagrindinių funkcijų kūrimą. Skaitykite toliau, kad sužinotumėte, kaip integruoti „Google“ socialinį prisijungimą prie programos naudojant „NextAuth“.

Kaip veikia NextAuth

NextAuth.js yra atvirojo kodo autentifikavimo biblioteka, kuri supaprastina pridėjimo procesą autentifikavimas ir autorizacija funkcionalumą Next.js programoms, taip pat pritaikyti autentifikavimo darbo eigas. Ji teikia daugybę funkcijų, tokių kaip el. paštas, autentifikavimas be slaptažodžio ir įvairių autentifikavimo paslaugų teikėjų, tokių kaip „Google“, „GitHub“ ir kt., palaikymas.

instagram viewer

Aukšto lygio „NextAuth“ veikia kaip tarpinė programinė įranga, palengvinanti jūsų taikomosios programos ir teikėjo autentifikavimo procesą. Po gaubtu, kai vartotojas bando prisijungti, jis nukreipiamas į „Google“ prisijungimo puslapį. Sėkmingai patvirtinus tapatybę, „Google“ grąžina naudingą krovinį, į kurį įeina vartotojo duomenys, pvz., vardas ir el. pašto adresas. Šie duomenys naudojami norint suteikti prieigą prie programos ir jos išteklių.

Naudodamas naudingos apkrovos duomenis, NextAuth sukuria seansą kiekvienam autentifikuotam vartotojui ir išsaugo seanso prieigos raktą saugiame tik HTTP slapuke. Seanso prieigos raktas naudojamas vartotojo tapatybei patikrinti ir jo autentifikavimo būsenai išsaugoti. Šis procesas taip pat taikomas kitiems teikėjams, kurių diegimas šiek tiek skiriasi.

Užregistruokite Next.js programą „Google Developer Console“.

„NextAuth“ palaiko „Google“ autentifikavimo paslaugą. Tačiau, kad jūsų programa sąveikautų su „Google“ API ir leistų naudotojams autentifikuoti jų „Google“ kredencialus, turėsite užregistruoti programą „Google“ kūrėjų pulte ir gauti a Kliento ID ir Kliento paslaptis.

Norėdami tai padaryti, eikite į Google Developer Console. Tada prisijunkite naudodami „Google“ paskyrą, kad pasiektumėte konsolę. Prisijungę sukurkite naują projektą.

Projekto apžvalgos puslapyje pasirinkite API ir paslaugos skirtuką iš paslaugų sąrašo kairiojoje meniu srityje ir galiausiai Įgaliojimai variantas.

Spustelėkite ant Sukurkite kredencialus mygtuką, kad sugeneruotumėte savo kliento ID ir kliento paslaptį. Tada nurodykite programos tipą iš pateiktų parinkčių ir pateikite programos pavadinimą.

Tada nurodykite savo programos pagrindinio maršruto URL ir galiausiai nurodykite įgaliotąjį programos peradresavimo URI. Šiuo atveju taip turėtų būti http://localhost: 3000/api/auth/callback/google kaip nurodyta NextAuth Google teikėjo nustatymuose.

Sėkmingai užsiregistravus, „Google“ suteiks jums kliento ID ir kliento paslaptį, kurią galėsite naudoti programoje.

Nustatykite „NextJS“ programą

Norėdami pradėti, sukurkite Next.js projektą vietoje:

npx Create-next-app next-ath-app

Baigę sąranką eikite į naujai sukurtą projekto katalogą ir paleiskite šią komandą, kad suaktyvintumėte kūrimo serverį.

npm paleisti dev

Atidarykite naršyklę ir eikite į http://localhost: 3000. Tai turėtų būti laukiamas rezultatas.

Šio projekto kodą galite rasti jame GitHub saugykla.

.env failo nustatymas

Savo projekto šakniniame aplanke sukurkite naują failą ir pavadinkite jį .env turėti savo kliento ID, paslaptį ir pagrindinį URL.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= „kliento ID“
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'paslaptis'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

„NextAUTH“ URL naudojamas nurodyti pagrindinį jūsų programos URL, kuris naudojamas naudotojams peradresuoti pasibaigus autentifikavimui.

Integruokite NextAuth į savo Next.js programą

Pirmiausia į savo projektą įdiekite NextAuth biblioteką.

npm įdiegti kitą autentifikavimą

Toliau, į /pages kataloge, sukurkite naują aplanką ir pavadinkite jį api. Pakeiskite katalogą į api aplanką ir sukurkite kitą aplanką, pavadintą aut. Autentavimo aplanke pridėkite naują failą ir pavadinkite jį [...nextauth].js ir pridėkite šias kodo eilutes.

importuoti KitasAuth iš"kitas autorius / kitas";
importuoti GoogleProvider iš"next-auth/providers/google";
eksportuotinumatytas NextAuth({
 teikėjai:[
 GoogleProvider ({
 kliento ID: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 kliento paslaptis: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Šis kodas sukonfigūruoja „Google“ kaip autentifikavimo teikėją. Funkcija NextAuth apibrėžia „Google“ teikėjo konfigūracijos objektą, kuris turi dvi ypatybes: kliento ID ir kliento paslaptį, kuri inicijuoja teikėją.

Tada atidarykite pages/_app.js failą ir atlikite šiuos kodo pakeitimus.

importuoti„../styles/globals.css“
importuoti { SessionProvider } iš"kitas autorius / reaguoti"
funkcija„MyApp“.({ Component, pageProps: { session, ...pageProps } }) {
grąžinti (


 </SessionProvider>
 )
}
eksportuotinumatytas „MyApp“.

NextAuth's SessionProvider komponentas suteikia autentifikavimo būsenos valdymo funkciją programai Next.js. Tam reikia a sesija pasiūlymas, kuriame yra autentifikavimo seanso duomenys, grąžinti iš „Google“ API, įskaitant naudotojo informaciją, pvz., ID, el. pašto adresą ir prieigos raktą.

Apvyniojus „MyApp“. komponentas su SessionProvider komponentu, autentifikavimo seanso objektas su vartotojo informacija tampa prieinamas visoje programoje, leidžianti programai išlikti ir pateikti puslapius pagal jų autentifikavimo būseną.

Sukonfigūruokite failą index.js

Atidaryk pages/index.js failą, ištrinkite pagrindinį kodą ir pridėkite toliau esantį kodą, kad sukurtumėte prisijungimo mygtuką, nukreipiantį vartotojus į prisijungimo puslapį.

importuoti Galva iš'kitas/galva'
importuoti stiliai iš„../styles/Home.module.css“
importuoti { useRouter } iš'kitas/maršrutizatorius';
eksportuotinumatytasfunkcijaNamai() {
konst maršrutizatorius = useRouter();

grąžinti (





Sukurti kitą programą<<span>/title></span><br> <meta name="<span">"description" content=<span>"Sukurta kuriant kitą programą"</span> /> <br> <nuoroda rel="<span">"piktograma" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Sveiki atvykę į <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> Pradėkite <span>prisiregistravę</span>{<span>'' </span>}<br> <kodas classname="{styles.code}"><span>su</span> „Google“ paskyra<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Prisijungti<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></kodas></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Šis kodas naudoja Next.js <strong>useRouter</strong> kabliuką, kad tvarkytų maršrutą programoje apibrėžiant maršruto parinktuvo objektą. Spustelėjus prisijungimo mygtuką, tvarkyklės funkcija iškviečia metodą <strong>router.push</strong>, kad peradresuotų vartotoją į prisijungimo puslapį.</p> <h3 id="create-a-login-authentication-page">Sukurti prisijungimo autentifikavimą Puslapis</h3> <p>Kataloge <strong>puslapiai</strong> sukurkite naują failą <strong>Login.js</strong>, tada pridėkite šias kodo eilutes.</p> <pre> <code><span>importuoti</span> { useSession, signIn, signOut } <span>iš</span> <span>"next-ath/react"</span><br><span>importuoti</span> { useRouter } <span>iš</span> <span>"kitas" /router'</span>;<br><span>importuoti</span> stilius <span>iš</span> <span>'../styles/Login.module.css'</span><p><span>eksportuoti</span> <span>numatytoji</span> <span><span>funkcija</span> < span>Prisijungimas</span>() {<br> <span>const</span> { <span>duomenys</span>: sesija } = useSession()<br> <span>const</span> maršrutizatorius = useRouter();<br> <span>if</span> (sesija) {<br> <span>grįžti</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Kurti kitą programą<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Pasirašyta < span>į <span>kaip</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> Vartotojo profilis<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Atsijungti<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> <br> <span>grįžti</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Kurti kitą programą<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Jūs nesate <span>prisijungę</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Prisijungti <span>į</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> ir <strong>signOut</strong> yra kabliukai, kuriuos teikia <strong>next-auth</strong>. Kabliukas <strong>useSession</strong> naudojamas norint pasiekti dabartinį naudotojo seanso objektą, kai vartotojas prisijungia ir sėkmingai jį patvirtina „Google“.</p> <p>Tai leidžia Next.js išlaikyti autentifikavimo būseną ir pateikti išsamią vartotojo informaciją programos kliento pusėje, šiuo atveju paštu.</p> <p>Be to, naudodami seanso objektą, galite lengvai sukurti pritaikytus vartotojo profilius savo programai ir saugoti duomenis duomenų bazėje, pvz. kaip PostgreSQL. Galite <span>sujungti PostgreSQL duomenų bazę su programa Next.js naudodami Prisma</span>.</p> <p>Prisijungimo kabliukas leidžia vartotojui atsijungti nuo programos. Šis kabliukas ištrins prisijungimo proceso metu sukurtą seanso objektą, o vartotojas bus atjungtas.</p> <p>Eikite į priekį ir pakeiskite kūrimo serverį į atnaujinkite pakeitimus ir pereikite prie naršyklėje veikiančios programos Next.js, kad patikrintumėte autentifikavimo funkciją.</p> <pre> <code>npm paleisti dev</code> </pre> <p>Be to, galite <span>naudoti Tailwind CSS su programa Next.js</span>, kad nustatytumėte autentifikavimo modelių stilių.</p> <h2 id="authentication-using-nextauth"> Autentifikavimas naudojant NextAuth  h2> </h2>
<p>NextAuth palaiko kelias autentifikavimo paslaugas, kurias galima lengvai integruoti į Next.js programas, kad būtų galima apdoroti kliento pusę autentifikavimas.</p> <p>Be to, galite integruoti duomenų bazę, kurioje saugomi naudotojų duomenys, ir prieigos prieigos raktą, kad įdiegtumėte serverio pusę autentifikavimas vėlesnėms autentifikavimo užklausoms, nes „NextAuth“ palaiko įvairias duomenų bazių integracijas.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></nuoroda>