Skaitmeniniame amžiuje jūsų programų užtikrinimas nėra tik būtinybė – tai būtina. As Pasirinktinis interneto kūrimas vystosi, taip pat ir įrankius, kurie pagerina saugumą ir vartotojo patirtį.

„Nextauth.js“ yra švyturys kūrėjams, norintiems lengvai ir efektyviai įgyvendinti autentifikavimą. Nesvarbu, ar pirmą kartą pridedate autentifikavimą, ar atnaujinate, kad neatsiliktumėte nuo šiuolaikinės geriausios praktikos, šis tinklaraštis jus atliks žingsnis po žingsnio.

Kas yra „NextAuth“?

„NextAuth“ yra atvirojo kodo autentifikavimo sprendimas „NextJS Apps“. Jis pamažu kuriamas siūlyti sprendimus visoms rėmams ar bibliotekoms pritaikytoms interneto kūrimo sritims. Galite sužinoti daugiau apie išsamią informaciją „Authjs“ svetainėje.

„NextAuth“ galite laikyti tarpininku tarp savo programos ir patikrintų autentifikavimo sistemų. Taigi, užuot iš naujo išradę ratą, galite įtraukti šį sprendimą į savo ir toliau kurti savo programą.

Kodėl verta naudoti „NextAuth.js“ 5 versiją?

„Nextauth.js“ 5 versija pristato keletą patobulinimų, kurie daro tai idealiu pasirinkimu moderniam Žiniatinklio programos. Jis skirtas panaudoti naujausias „Next.js“ funkcijas, įskaitant programos maršrutizatorių, užtikrinant sklandų integraciją ir patobulintas maršruto parinkimo galimybes.

Kaip nustatyti projektą?

1 žingsnis: pradinė sąranka

Šiam vadovui naudosime naujausią „Next.js“ (v 15.1.6) versiją su „App“ maršrutizatoriumi. Pradėkite kurdami naują „Next.js“ projektą, naudodami šias komandas terminale:

„NPX Create-Next-App@“ naujausias „My-NextAuth-App“
CD „My-NextAuth-App“

Įdiekite „NextAuth.js“ savo projekte, kad pradėtumėte sąranką:

„NPM“ diegti „Next-Auth@Beta“

2 žingsnis: Saugumo aplinkos kintamųjų konfigūravimas

Sukurkite saugų automatinį_secret, kuris užšifruos žetonus ir sesijos duomenis naudodami šią komandą:

„NPX Auth Secret“

Pridėkite šią sugeneruotą paslaptį prie jūsų .env.local:

Auth_secret = your_generated_secret

3 žingsnis: „Google“ API kredencialų gavimas

Šiam vadovui naudosime „Google“ kaip teikėją, kad patvirtintume vartotojus. Norėdami naudoti „Google“ kaip teikėją, turite nustatyti kredencialus per „Google Cloud Console“:

• Sukurkite projektą „Google Cloud Console“.
• Eikite į kredencialus, spustelėkite „Sukurti kredencialus“ ir pasirinkite „OAuth kliento ID“.
• Konfigūruokite sutikimo ekraną naudodami reikiamą informaciją apie jūsų programą.
• Nustatykite įgaliotą peradresavimo URI kaip http: // localhost: 3000/API/Auth/Callback/Google, skirtą plėtrai.
  Nustatę juos, nukopijuokite „Google“ pateiktą kliento ID ir kliento paslaptį ir pridėkite juos prie .env.local:

„Google_client_id“ = jūsų_google_client_id
Google_client_secret = your_google_client_secret

4 veiksmas: „Nextauth.js“ konfigūravimas „Google“ autentifikavimui:

Norėdami nustatyti autentifikavimą naudojant „Google“, sukurkite naują failą pavadinimu Auth.js jūsų programos šaknyje. Šiame faile bus visos būtinos jūsų konfigūracijos Autentifikavimo teikėjai.

Atidarykite failą „Auth.js“ ir sukonfigūruokite „Nextauth.js“ naudoti „Google“ kaip autentifikavimo teikėją. Turėsite importuoti „NextAuth“ ir „GoogleProvider“ modulį iš „Next Auth“/„Providers“/„Google“. Štai kaip jį nustatyti:

Importuokite „NextAuth“ iš „Next-Auth“
Importuokite „GoogleProvider“ iš „Next Auth/Teikių/„ Google ““

Eksportuoti numatytąjį „NextAuth“ ({{{
teikėjai: (
„GoogleProvider“ ({{
„ClientId“: procesas.env.google_client_id,
„ClientSecret“: procesas.env.google_client_secret
})
)
Slaptas: procesas.env.auth_secret
})

5 žingsnis: pridėkite maršruto tvarkyklę:

Norėdami sklandžiai integruoti „NextAuth.js“, mums reikia API maršrutų, kuriuos naudos mūsų autentifikavimo funkcijos. Pridėsime jį: /app/api/auth/(…nextauth)/route.js

importuoti {tvarkytojai} iš ‘@/auth’
eksportuoti const {get, post} = tvarkytojai

6 žingsnis: Įdiekite saugomą komponentą

Sukurkite naują apsaugotą komponentą aplanke /komponentais, naudodami šį kodą:

„Naudokite klientą“;

Importuoti {naudojimas, signinas} iš „@/auth“;
Apsaugotos numatytosios funkcijos () {) {
const {duomenys: sesija, būsena} = naudojimas ({{{{{{{{{{
būtinas: tiesa,
onunauuthenticith () {
Signin (); // sukelia prisijungimą, jei ne autentifikuotas
}
});

if (būsena === „įkeliama“) {
grąžinti

;
}

grąžinti (

);
}

Šiame komponente, jei vartotojas nėra autentifikuotas (onunauthenticed), jis automatiškai suaktyvina „Signin“ funkciją, nukreipdamas vartotoją į prisijungimo ekraną. Tai užtikrina, kad tik autentifikuoti vartotojai gali pasiekti puslapį.

Kadangi tai yra kliento komponentas, mes turime suvynioti visus kliento komponentus „SessionProvider“ iš „Next Auth/React“. Tai leistų mums naudoti naudojimo kabliuką savo komponentuose.

Išvada

Atlikdami šiuos veiksmus, jūs sėkmingai įtraukėte „Nextauth.js“ į savo „Next.js“ programą, įgalindami „Google“ autentifikavimą jūsų vartotojams.

Ši sąranka padidina jūsų programos saugumą ir naudojimą. Judėdami į priekį galite į jį integruoti kitus pasirinktinius interneto kūrimo teikėjus, išplėsdami savo programos universalumą. Laimingas kodavimas!

Jei jums reikia papildomos pagalbos, galite susisiekti su mumis (El. Paštas apsaugotas). Mes suplanuosime nemokamą konsultacijų sesiją, kad ištirtume, kaip „Xavor“ gali jums padėti šiuo klausimu.