<\/span><\/h3>\n\u0160iam vadovui naudosime naujausi\u0105 \u201eNext.js\u201c (v 15.1.6) versij\u0105 su \u201eApp\u201c mar\u0161rutizatoriumi. Prad\u0117kite kurdami nauj\u0105 \u201eNext.js\u201c projekt\u0105, naudodami \u0161ias komandas terminale:<\/p>\n
\u201eNPX Create-Next-App@\u201c naujausias \u201eMy-NextAuth-App\u201c<\/strong><\/em>
CD \u201eMy-NextAuth-App\u201c<\/strong><\/em><\/p>\n\u012ediekite \u201eNextAuth.js\u201c savo projekte, kad prad\u0117tum\u0117te s\u0105rank\u0105:<\/p>\n
\u201eNPM\u201c diegti \u201eNext-Auth@Beta\u201c<\/strong><\/em><\/p>\n<\/span>2 \u017eingsnis: Saugumo aplinkos kintam\u0173j\u0173 konfig\u016bravimas<\/strong><\/span><\/span><\/h3>\nSukurkite saug\u0173 automatin\u012f_secret, kuris u\u017e\u0161ifruos \u017eetonus ir sesijos duomenis naudodami \u0161i\u0105 komand\u0105:<\/p>\n
\u201eNPX Auth Secret\u201c<\/strong><\/em><\/p>\nPrid\u0117kite \u0161i\u0105 sugeneruot\u0105 paslapt\u012f prie j\u016bs\u0173 .env.local:<\/p>\n
Auth_secret = your_generated_secret<\/strong><\/em><\/p>\n<\/span>3 \u017eingsnis: \u201eGoogle\u201c API kredencial\u0173 gavimas<\/strong><\/span><\/span><\/h3>\n\u0160iam vadovui naudosime \u201eGoogle\u201c kaip teik\u0117j\u0105, kad patvirtintume vartotojus. Nor\u0117dami naudoti \u201eGoogle\u201c kaip teik\u0117j\u0105, turite nustatyti kredencialus per \u201eGoogle Cloud Console\u201c:<\/p>\n
\n- Sukurkite projekt\u0105 \u201eGoogle Cloud Console\u201c.<\/li>\n
- Eikite \u012f kredencialus, spustel\u0117kite \u201eSukurti kredencialus\u201c ir pasirinkite \u201eOAuth kliento ID\u201c.<\/li>\n
- Konfig\u016bruokite sutikimo ekran\u0105 naudodami reikiam\u0105 informacij\u0105 apie j\u016bs\u0173 program\u0105.<\/li>\n
- Nustatykite \u012fgaliot\u0105 peradresavimo URI kaip http: \/\/ localhost: 3000\/API\/Auth\/Callback\/Google, skirt\u0105 pl\u0117trai.
Nustat\u0119 juos, nukopijuokite \u201eGoogle\u201c pateikt\u0105 kliento ID ir kliento paslapt\u012f ir prid\u0117kite juos prie .env.local:<\/li>\n<\/ul>\n\u201eGoogle_client_id\u201c = j\u016bs\u0173_google_client_id<\/strong><\/em>
Google_client_secret = your_google_client_secret<\/strong><\/em><\/p>\n<\/span>4 veiksmas: \u201eNextauth.js\u201c konfig\u016bravimas \u201eGoogle\u201c autentifikavimui:<\/strong><\/span><\/span><\/h3>\nNor\u0117dami nustatyti autentifikavim\u0105 naudojant \u201eGoogle\u201c, sukurkite nauj\u0105 fail\u0105 pavadinimu Auth.js j\u016bs\u0173 programos \u0161aknyje. \u0160iame faile bus visos b\u016btinos j\u016bs\u0173 konfig\u016bracijos Autentifikavimo teik\u0117jai<\/strong>.<\/p>\nAtidarykite fail\u0105 \u201eAuth.js\u201c ir sukonfig\u016bruokite \u201eNextauth.js\u201c naudoti \u201eGoogle\u201c kaip autentifikavimo teik\u0117j\u0105. Tur\u0117site importuoti \u201eNextAuth\u201c ir \u201eGoogleProvider\u201c modul\u012f i\u0161 \u201eNext Auth\u201c\/\u201eProviders\u201c\/\u201eGoogle\u201c. \u0160tai kaip j\u012f nustatyti:<\/p>\n
Importuokite \u201eNextAuth\u201c i\u0161 \u201eNext-Auth\u201c<\/strong><\/em>
Importuokite \u201eGoogleProvider\u201c i\u0161 \u201eNext Auth\/Teiki\u0173\/\u201e Google \u201c\u201c<\/strong><\/em><\/p>\nEksportuoti numatyt\u0105j\u012f \u201eNextAuth\u201c ({{{<\/strong><\/em>
teik\u0117jai: (<\/strong><\/em>
\u201eGoogleProvider\u201c ({{<\/strong><\/em>
\u201eClientId\u201c: procesas.env.google_client_id,<\/strong><\/em>
\u201eClientSecret\u201c: procesas.env.google_client_secret<\/strong><\/em>
})<\/strong><\/em>
)<\/strong><\/em>
Slaptas: procesas.env.auth_secret<\/strong><\/em>
})<\/strong><\/em><\/p>\n<\/span>5 \u017eingsnis: prid\u0117kite mar\u0161ruto tvarkykl\u0119:<\/strong><\/span><\/span><\/h3>\nNor\u0117dami skland\u017eiai integruoti \u201eNextAuth.js\u201c, mums reikia API mar\u0161rut\u0173, kuriuos naudos m\u016bs\u0173 autentifikavimo funkcijos. Prid\u0117sime j\u012f: \/app\/api\/auth\/(\u2026nextauth)\/route.js<\/em><\/p>\nimportuoti {tvarkytojai} i\u0161 ‘@\/auth’<\/strong><\/em>
eksportuoti const {get, post} = tvarkytojai<\/strong><\/em><\/p>\n<\/span>6 \u017eingsnis: \u012ediekite saugom\u0105 komponent\u0105<\/strong><\/span><\/span><\/h3>\nSukurkite nauj\u0105 apsaugot\u0105 komponent\u0105 aplanke \/komponentais, naudodami \u0161\u012f kod\u0105:<\/p>\n
\u201eNaudokite klient\u0105\u201c;<\/strong><\/em><\/p>\nImportuoti {naudojimas, signinas} i\u0161 \u201e@\/auth\u201c;<\/strong><\/em>
Apsaugotos numatytosios funkcijos () {) {<\/strong><\/em>
const {duomenys: sesija, b\u016bsena} = naudojimas ({{{{{{{{{{<\/strong><\/em>
b\u016btinas: tiesa,<\/strong><\/em>
onunauuthenticith () {<\/strong><\/em>
Signin (); \/\/ sukelia prisijungim\u0105, jei ne autentifikuotas<\/strong><\/em>
}<\/strong><\/em>
});<\/strong><\/em><\/p>\n if (b\u016bsena === \u201e\u012fkeliama\u201c) {<\/strong><\/em>
gr\u0105\u017einti <\/p>\n \u200b\u200b\u012ek\u0117limas\u2026 <\/p>\n
;<\/strong><\/em>
}<\/strong><\/em><\/p>\n gr\u0105\u017einti (<\/strong><\/em>
<\/p>\n<\/strong><\/em>
<\/p>\n<\/span> apsaugotas puslapis <\/span><\/h1>\n<\/strong><\/em>
<\/p>\n Sveiki, {session.user.name}! <\/p>\n
<\/strong><\/em>
<\/div>\n<\/strong><\/em>
);<\/strong><\/em>
}<\/strong><\/em><\/p>\n\u0160iame komponente, jei vartotojas n\u0117ra autentifikuotas (onunauthenticed), jis automati\u0161kai suaktyvina \u201eSignin\u201c funkcij\u0105, nukreipdamas vartotoj\u0105 \u012f prisijungimo ekran\u0105. Tai u\u017etikrina, kad tik autentifikuoti vartotojai gali pasiekti puslap\u012f.<\/p>\n
Kadangi tai yra kliento komponentas, mes turime suvynioti visus kliento komponentus \u201eSessionProvider\u201c i\u0161 \u201eNext Auth\/React\u201c. Tai leist\u0173 mums naudoti naudojimo kabliuk\u0105 savo komponentuose.<\/p>\n
<\/span>I\u0161vada<\/span><\/span><\/h2>\nAtlikdami \u0161iuos veiksmus, j\u016bs s\u0117kmingai \u012ftrauk\u0117te \u201eNextauth.js\u201c \u012f savo \u201eNext.js\u201c program\u0105, \u012fgalindami \u201eGoogle\u201c autentifikavim\u0105 j\u016bs\u0173 vartotojams.<\/p>\n
\u0160i s\u0105ranka padidina j\u016bs\u0173 programos saugum\u0105 ir naudojim\u0105. Jud\u0117dami \u012f priek\u012f galite \u012f j\u012f integruoti kitus pasirinktinius interneto k\u016brimo teik\u0117jus, i\u0161pl\u0117sdami savo programos universalum\u0105. Laimingas kodavimas!<\/p>\n
Jei jums reikia papildomos pagalbos, galite susisiekti su mumis (El. Pa\u0161tas apsaugotas)<\/span><\/strong>. Mes suplanuosime nemokam\u0105 konsultacij\u0173 sesij\u0105, kad i\u0161tirtume, kaip \u201eXavor\u201c gali jums pad\u0117ti \u0161iuo klausimu.<\/p>\n<\/p><\/div>\n