Անգաղտնաբառ մուտքի իրականացում Next.js 13 նախագծում NextAuth.js-ի և Prisma-ի միջոցով

Այս հոդվածը կքննարկի այն քայլերը, որոնք անհրաժեշտ են Next.js նախագծում առանց գաղտնաբառի նույնականացումն իրականացնելու համար՝ օգտագործելով NextAuth.js գրադարանը: Բացի այդ, մենք կօգտագործենք Prisma-ն որպես մեր տվյալների բազայի ադապտեր՝ դրան հասնելու համար:

Առանց գաղտնաբառի նույնականացումը նորարարական մոտեցում է, որը վերացնում է ավանդական օգտագործողի անունների և գաղտնաբառերի համակցությունների անհրաժեշտությունը: Փոխարենը, այն առաջարկում է նույնականացման ավելի ապահով և օգտագործողի համար հարմար փորձ՝ օգտագործելով այլընտրանքային մեթոդներ, ինչպիսիք են էլփոստի կախարդական հղումները կամ SMS-ի միջոցով ուղարկված մեկանգամյա կոդերը:

Next.js-ը հանրաճանաչ React շրջանակ է վեբ հավելվածներ ստեղծելու համար, որը հայտնի է իր պարզությամբ և արդյունավետությամբ: Մենք կարող ենք հեշտությամբ ներառել առանց գաղտնաբառի նույնականացումը մեր նախագծի մեջ՝ ինտեգրելով NextAuth.js-ը՝ նույնականացման գրադարան, որը բացահայտորեն ստեղծված է Next.js-ի համար:

Բացի այդ, մենք կհիմնվենք Prisma-ի վրա՝ որպես մեր տվյալների բազայի ադապտեր: Prisma-ն ORM (Օբյեկտ-հարաբերական քարտեզագրում) գործիք է, որը պարզեցնում է տվյալների բազայի փոխազդեցությունները՝ տրամադրելով տիպային անվտանգ և ավտոմատ ստեղծվող հարցումների ստեղծող: Այն աջակցում է բազմաթիվ տվյալների բազաների, ներառյալ PostgreSQL, MySQL և SQLite, ինչը այն դարձնում է բազմակողմանի ընտրություն մեր իսկորոշման իրականացման համար:

Այս ուղեցույցի ընթացքում մենք կտրամադրենք քայլ առ քայլ հրահանգներ, թե ինչպես կարգավորել և կարգավորել առանց գաղտնաբառի նույնականացումը՝ օգտագործելով NextAuth.js-ը Next.js նախագծում: Մենք նաև ցույց կտանք, թե ինչպես կարելի է ինտեգրել Prisma-ն որպես մեր տվյալների բազայի ադապտեր՝ թույլ տալով անխափան հաղորդակցություն մեր հավելվածի և տվյալների բազայի միջև:

Այժմ մենք կուսումնասիրենք, թե ինչպես բարելավել մեր Next.js հավելվածի անվտանգությունն ու օգտատերերի փորձը՝ օգտագործելով առանց գաղտնաբառի նույնականացումը և NextAuth.js-ի և Prisma-ի հնարավորությունները: Եկեք սկսենք.

Ի՞նչ է անգաղտնաբառ մուտքը:

Անգաղտնաբառ մուտքը, ինչպես ենթադրում է անունը, նույնականացման մեթոդ է, որը վերացնում է ավանդական օգտագործողի անունների և գաղտնաբառերի համակցությունների անհրաժեշտությունը: Փոխարենը, այն օգտագործում է օգտատիրոջ ինքնությունը ստուգելու այլընտրանքային միջոցներ, ինչպիսիք են էլփոստի կախարդական հղումները կամ SMS-ի միջոցով ուղարկված մեկանգամյա կոդերը: Այս մոտեցումն առաջարկում է մի քանի առավելություններ ավանդական մուտքի մեթոդների համեմատ: Նախ, այն վերացնում է գաղտնաբառի հետ կապված խոցելիության ռիսկը, ինչպիսիք են թույլ գաղտնաբառերը կամ գաղտնաբառի վերօգտագործումը: Երկրորդ՝ այն հեշտացնում է օգտատերերի փորձը՝ վերացնելով բարդ գաղտնաբառերը հիշելու և մուտքագրելու անհրաժեշտությունը:

Անգաղտնաբառ մուտք գործելու համար՝ օգտագործելով էլփոստի կախարդական հղումներ կամ մեկանգամյա կոդեր, մեզ անհրաժեշտ է SMTP (Simple Mail Transfer Protocol) սերվեր:

SMTP սերվերը պատասխանատու է ինտերնետով նամակներ ուղարկելու համար: Անգաղտնաբառ նույնականացման համատեքստում սերվերը ուղարկում է կախարդական հղումները կամ մեկանգամյա կոդերը օգտվողի գրանցված էլ.փոստի հասցեին: Երբ օգտատերը սկսում է մուտքի գործընթացը, ստեղծվում և ուղարկվում է օգտվողին եզակի հղում կամ կոդ պարունակող նամակ: Այնուհետև օգտագործողը կարող է սեղմել հղման վրա կամ մուտքագրել կոդը՝ վավերացման գործընթացը ավարտելու համար: SMTP սերվերը հանդես է գալիս որպես միջնորդ հավելվածի և օգտատիրոջ էլփոստի ծառայության միջև՝ ապահովելով նույնականացման հաղորդագրությունների անվտանգ և հուսալի առաքում: Օգտագործելով SMTP սերվերը, մենք կարող ենք արդյունավետ կերպով իրականացնել առանց գաղտնաբառի մուտք և ապահովել նույնականացման անխափան փորձ մեր օգտատերերի համար:

Եկեք սկսենք:

Նախ, մենք պետք է ստեղծենք նոր Next.js նախագիծ: Դա անելու համար օգտագործեք հետևյալ հրամանը.

npx create-next-app@latest

Երբ ստեղծեք նոր Next.js նախագիծը, կարող եք նավարկել դեպի նոր ստեղծված նախագծի գրացուցակը:

Փոխելով գրացուցակը նախագծի մեջ, դուք կկարողանաք ուսումնասիրել տարբեր թղթապանակներ և ֆայլեր, որոնք կազմում են Next.js նախագծի կառուցվածքը:

Ծրագրի կառուցվածքը հասկանալը կարևոր է ձեր Next.js հավելվածի արդյունավետ զարգացման և կազմակերպման համար: Անդրադառնալով պաշտոնական փաստաթղթերին, դուք կարող եք օգտագործել լավագույն փորձը և ստանալ պատկերացումներ այն մասին, թե ինչպես կառուցել ձեր կոդը, կառավարել ստատիկ ակտիվները և ստեղծել բազմակի օգտագործման բաղադրիչներ.

Տեղադրելով մեր կախվածությունները

NextAuth.js-ի միջոցով մեր Next.js նախագծում առանց գաղտնաբառի նույնականացումը միացնելու համար մենք նախ պետք է տեղադրենք անհրաժեշտ կախվածությունները: Գործարկեք «yarn add next-auth nodemailer» հրամանը՝ մեր նախագծին ավելացնելու և NextAuth.js և nodemailer:

Մենք հատուկ օգտագործում ենք nodemailer-ը, քանի որ այն հանրաճանաչ և բազմակողմանի մոդուլ է Node.js-ում նամակներ ուղարկելու համար: Այն ապահովում է պարզ և հուսալի միջոց՝ էլեկտրոնային փոստով ուղարկելու կախարդական հղումները կամ միանվագ կոդերը, որոնք անհրաժեշտ են առանց գաղտնաբառի նույնականացման համար:

Հաջորդը, եկեք ինտեգրենք Prisma-ն որպես մեր տվյալների բազայի ադապտեր: Սկսեք տեղադրելով պահանջվող Prisma փաթեթները՝ օգտագործելով հրամանը.

yarn add @prisma/client @next-auth/prisma-adapter

Այս փաթեթները թույլ կտան անխափան հաղորդակցություն մեր Next.js հավելվածի և տվյալների բազայի միջև: Բացի այդ, մենք նաև պետք է տեղադրենք Prisma-ն որպես մշակողի կախվածություն՝ գործարկելով.

yarn add prisma --dev

Այս քայլը ապահովում է, որ մենք ունենք անհրաժեշտ գործիքներ՝ աշխատելու Prisma-ի և դրա ավտոմատ ստեղծվող հարցումների ստեղծողի հետ տվյալների բազայի փոխազդեցությունների համար:

Տեղադրելով այս կախվածությունները՝ մենք հիմք դրեցինք գաղտնաբառի նույնականացման իրականացման համար՝ օգտագործելով NextAuth.js և Prisma մեր Next.js նախագծում:

Կարգավորեք Prisma

Անհրաժեշտ է կարգավորել Prisma-ն և մուտք ունենալ դեպի SMTP սերվեր՝ էլփոստի ուղարկման համար՝ Next.js նախագծում առանց գաղտնաբառի նույնականացում օգտագործելու համար: Այս ձեռնարկը կուղղորդի ձեզ՝ օգտագործելով ձեր անձնական Gmail հաշիվը՝ նամակներ ուղարկելու համար: Հետևեք ստորև նշված քայլերին հաջող տեղադրման համար:

Նախ, ձեր նախագծի սկզբում ստեղծեք «prisma» թղթապանակ: Այս թղթապանակում կտեղավորվեն Prisma-ի հետ կապված ֆայլերը և կոնֆիգուրացիաները: Այնուհետև «prisma» թղթապանակում ստեղծեք նոր ֆայլ, որը կոչվում է «schema.prisma»: Սխեմայի ֆայլը սահմանում է ձեր տվյալների բազայի կառուցվածքը և ծառայում է որպես Prisma-ի ավտոմատ ստեղծվող կոդի նախագիծ:

Եթե ​​դուք նոր եք սխեմայի հայեցակարգում, մի անհանգստացեք: Սխեման սահմանում է ձեր տվյալների բազայի աղյուսակները, դաշտերը, հարաբերությունները և սահմանափակումները: Սխեման ստեղծելու համար կարող եք դիմել NextAuth.js-ի պաշտոնական փաստաթղթերին և պատճենել այնտեղ ներկայացված օրինակի սխեման: Այս սխեման մեկնարկային կետ է և կարող է հարմարեցվել ձեր դիմումի պահանջներին համապատասխան:

Հաջորդը, ձեր նախագծի սկզբում ստեղծեք «.env» ֆայլ: Այս ֆայլը կպահի ձեր միջավայրի փոփոխականները, ներառյալ ձեր SMTP սերվերի համար անհրաժեշտ կոնֆիգուրացիաները: «.env» ֆայլը համալրելու համար կարող եք պատճենել ստորև ներկայացված կոնֆիգուրացիաների օրինակները: Համոզվեք, որ մուտքագրեք ձեր Gmail հաշվի հավատարմագրերը և SMTP սերվերի կարգավորումները համապատասխան դաշտերում:

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

Հետևելով այս քայլերին՝ դուք կարգավորեք Prisma-ն և կկարգավորեք SMTP սերվերը՝ ձեր Gmail հաշվի միջոցով էլ. նամակներ ուղարկելու համար: Այս նախապատրաստական ​​աշխատանքները շատ կարևոր են՝ ձեր Next.js նախագծում առանց գաղտնաբառի նույնականացման հոսքը միացնելու համար:

Նշում

Դուք պետք է ստեղծեք հավելվածի գաղտնաբառ, եթե ձեր Google հաշվի համար միացրել եք երկգործոն նույնականացումը (2FA): Հավելվածի գաղտնաբառը հստակ գաղտնաբառ է, որը թույլ է տալիս մուտք գործել որոշակի հավելվածներ կամ սարքեր՝ չբացահայտելով ձեր հիմնական Google հաշվի գաղտնաբառը: Հավելվածի գաղտնաբառ ստեղծելու համար հետևեք ստորև ներկայացված հրահանգներին:

1. Գնացեք Google հաշվի կարգավորումների էջ՝ այցելելով https://myaccount.google.com/:

2. Անցեք «Անվտանգություն» ներդիրին:

3. Փնտրեք «2FA» բաժինը, ոլորեք ներքև և ընտրեք «App Passwords»:

4. Հնարավոր է, որ ձեզանից պահանջվի նորից մուտքագրել ձեր Google հաշվի գաղտնաբառը՝ անվտանգության ստուգման համար:

5. «Ընտրել հավելվածը» բացվող ցանկի տակ ընտրեք «Փոստ» կամ «Այլ (Պատվիրված անուն)»:

• Եթե «Փոստ» տարբերակը հասանելի է, ընտրեք այն:

• Եթե «Փոստ» տարբերակը հասանելի չէ, ընտրեք «Այլ (Պատվերով անուն)» և տրամադրեք հատուկ անուն նույնականացման համար:

6. Սեղմեք «Ստեղծել» կամ «Ստեղծել գաղտնաբառ» կոճակը:

7. Google-ը ձեզ համար կստեղծի հավելվածի եզակի գաղտնաբառ: Նշեք այս գաղտնաբառը, քանի որ մենք կօգտագործենք այն մեր հավելվածում՝ նամակներ ուղարկելու համար:

8. Օգտագործեք այս ստեղծված հավելվածի գաղտնաբառը ձեր Next.js հավելվածի SMTP սերվերի կազմաձևում: Փոխարինեք ձեր սովորական Gmail հաշվի գաղտնաբառը այս հավելվածի գաղտնաբառով:

Սա ապահովում է, որ նույնիսկ եթե 2FA-ն միացված է, ձեր հավելվածը կարող է ապահով նամակներ ուղարկել՝ օգտագործելով ձեր Gmail հաշիվը:

PostgreSQL՝ օգտագործելով Supabase

Նախքան շարունակելը, մենք պետք է համոզվենք, որ մեր նախագծի տվյալների բազան ճիշտ է գործում: Այս ցուցադրության համար խորհուրդ ենք տալիս օգտագործել Supabase PostgreSQL տվյալների բազան: Supabase նախագծի հետ սկսելու և PostgreSQL կապի URL-ը ստանալու համար հետևեք հետևյալ քայլերին.

1. Գնացեք supabase.io և մուտք գործեք ձեր հաշիվ կամ ստեղծեք նորը, եթե չունեք:

2. Երբ մուտք գործեք, դուք կուղղորդվեք դեպի Supabase վահանակ: Սեղմեք «Ստեղծել նոր նախագիծ»՝ նոր նախագիծ սկսելու համար:

3. Անվանեք ձեր նախագիծը և ընտրեք ձեր ընթացիկ վայրին ամենամոտ տարածաշրջանը: Հիշեք ձեր գաղտնաբառը, այն ձեզ ավելի ուշ պետք կգա:

4. Երբ ստեղծեք նախագիծը, ձեզ կտեղափոխեն ծրագրի վահանակ: Կտտացրեք «Տվյալների բազա» ձախ կողագոտում՝ տվյալների բազայի կարգավորումները մուտք գործելու համար:

5. «Տվյալների բազա» բաժնում դուք կգտնեք PostgreSQL կապի URL-ը: Այս URL-ը պարունակում է բոլոր անհրաժեշտ տեղեկությունները ձեր Supabase նախագծի տվյալների շտեմարանին միանալու համար, ինչպիսիք են հյուրընկալողը, նավահանգիստը, տվյալների բազայի անունը, օգտվողի անունը և գաղտնաբառը: Այն կցուցադրվի ձևաչափով՝ postgres://<username>:<password>@<host>:<port>/<database>

6. Պատճենեք PostgreSQL կապի URL-ը և ապահով պահեք այն: Այն ձեզ անհրաժեշտ կլինի՝ ձեր հավելվածի և Supabase տվյալների բազայի միջև կապ հաստատելու համար:

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

Այժմ եկեք համոզվենք, որ մենք ստեղծում ենք մեր Prisma հաճախորդը՝ գործարկելով հետևյալ հրամանը՝ «npx prisma generate»:

Prisma Client-ը տվյալների բազայի հաճախորդ է, որն ավտոմատ կերպով ստեղծվում է ձեր սխեմայի հիման վրա: Լռելյայնորեն, Prisma Client-ը ստեղծվում է «node_modules/.prisma/client» թղթապանակում, բայց դուք կարող եք [նշել հատուկ տեղադրություն, եթե անհրաժեշտ է](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path):

Հաջորդը, մենք կշարունակենք ստեղծել մեր նախնական միգրացիան: Գործարկեք հետևյալ հրամանը՝ «npx prisma migrate dev»: Դուք կարող եք յուրաքանչյուր միգրացիայի նկարագրական անուն տալ:

Prisma-ում միգրացիան մեթոդ է, որն օգտագործվում է ժամանակի ընթացքում ձեր տվյալների բազայի սխեմայի ճշգրտումները կառավարելու համար: Այն թույլ է տալիս փոփոխել ձեր տվյալների բազայի կառուցվածքը՝ առանց նախկինում գոյություն ունեցող տվյալների կորստի: Այս միգրացիաները շատ կարևոր են, քանի որ ապահովում են, որ ձեր տվյալների բազայի սխեման համընկնում է ձեր հավելվածի կարիքներին, երբ դրանք փոխվում են: Prisma-ի միգրացիոն գործիքի միջոցով դուք կարող եք հարմար տարբերակել, կիրառել և ետ բերել այս փոփոխությունները՝ հեշտացնելով թիմային աշխատանքը և պահպանելով տվյալների բազայի միասնական սխեման տարբեր միջավայրերում:

Այժմ, եթե մենք ստուգենք մեր տվյալների բազան, մենք կկարողանանք տեսնել մեր նախնական միգրացիայի փոփոխությունները, որոնք արտացոլված են տվյալների բազայի բաժնում:

Կատարելով նախնական միգրացիան, մենք փոփոխություններ ենք կատարել մեր տվյալների բազայի սխեմայի վրա, ինչպես սահմանված է միգրացիայի սկրիպտում:

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### Կարգավորում NextAuthJS-ը Prisma ադապտերով

Next.js հավելվածում NextAuthJS-ն օգտագործում է catch-all երթուղին, որը նաև հայտնի է որպես wildcard կամ backback երթուղի՝ նույնականացման հարցումները կառավարելու համար: Այս դինամիկ երթուղին սահմանվում է՝ օգտագործելով ֆայլերի վրա հիմնված երթուղային համակարգը Next.js-ում:

Ստեղծեք «**api**» անունով թղթապանակ ձեր «**app**» գրացուցակում: «**api**» պանակում ստեղծեք «**auth**» թղթապանակ: «**auth**» թղթապանակում ստեղծեք catch-all երթուղի, որը կոչվում է «**[...nextauth]**» որպես թղթապանակ: Վերջապես ստեղծեք «**route.ts**» ֆայլ catch-all route թղթապանակում և ավելացրեք հետևյալ կոդը:

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Catch-all երթուղու ֆայլում մենք ներմուծում ենք NextAuthJS գրադարանը և կարգավորում ենք նույնականացման տարբերակները, մատակարարները և կազմաձևերը: NextAuthJS-ն իրականացնում է մուտքային հարցումների վերլուծությունը, նույնականացնում է նույնականացման անհրաժեշտ գործողությունը և կատարում է համապատասխան տրամաբանությունը՝ ըստ նշված տարբերակների:

Տրամադրված կոդը կարգավորում է NextAuthJS-ը Prisma ադապտերով՝ էլփոստի մատակարարի միջոցով նույնականացման համար: Եկեք բացատրենք յուրաքանչյուր հայտարարություն.

1. Ներմուծում:

• PrismaAdapter և PrismaClient ներմուծված են համապատասխանաբար @next-auth/prisma-adapter և @prisma/client-ից: Դրանք օգտագործվում են NextAuthJS-ը Prisma-ի հետ ինտեգրվելու համար:

• NextAuth-ը ներմուծված է next-auth-ից և հանդիսանում է Next.js հավելվածներում նույնականացումը մշակելու հիմնական գրադարանը:

• EmailProvider-ը ներմուծված է next-auth/providers/email-ից և օգտագործվում է որպես էլփոստի վրա հիմնված նույնականացման մատակարար:

2. Prisma Setup:

• PrismaClient-ի օրինակը ստեղծվում է նոր PrismaClient()-ի միջոցով: Սա թույլ է տալիս հաղորդակցվել Prisma ORM-ի և հիմքում ընկած տվյալների բազայի հետ:

3. Նույնականացման ընտրանքներ.

• authOptions-ը օբյեկտ է, որը սահմանում է նույնականացման կոնֆիգուրացիան NextAuthJS-ում:

• adapter հատկությունը դրված է PrismaAdapter(prisma), որը NextAuthJS-ը միացնում է Prisma-ին օգտագործելով **PrismaAdapter`**:

• providers զանգվածը պարունակում է մեկ մատակարար **EmailProvider**: Այն կազմաձևված է էլեկտրոնային փոստի սերվերի անհրաժեշտ մանրամասներով և **from`** էլ. հասցեով:

4. NextAuth Handler:

• NextAuth ֆունկցիան կանչվում է authOptions-ով որպես արգումենտ` ստեղծելով նույնականացման մշակիչ:

• Ստացված մշակիչը վերագրվում է handler փոփոխականին:

5. Արտահանում:

• handler արտահանվում է որպես GET և POST` HTTP GET և POST հարցումներն աջակցելու համար:

Հիմա եկեք գործարկենք մեր սերվերը և փորձարկենք ֆունկցիոնալությունը: Նախ, գործարկեք զարգացման սերվերը՝ գործարկելով «yarn dev»: Հաջորդը, բացեք ձեր զննարկիչը և այցելեք «localhost:3000»՝ հավելվածը գործողության մեջ տեսնելու համար:

Նույնականացման գործառույթը ստուգելու համար այցելեք «localhost:3000/api/auth/signin»: Այստեղ դուք կզգաք NextAuthJS-ի կախարդանքը: NextAuthJS-ի հետ ընդգրկված տրված ձևանմուշը հնարավորություն է տալիս առանց գաղտնաբառի մուտքի գործընթաց: Փորձելու համար մուտքագրեք վավեր էլփոստի հասցե:

Նամակը ուղարկելուց հետո NextAuthJS-ը կզբաղվի կուլիսային գործընթացով: Նախ, այն կստեղծի և կուղարկի նամակ, որը պարունակում է մուտքի եզակի հղում դեպի տրամադրված էլ. Այս հղումը ծառայում է որպես օգտագործողի համար անվտանգ վավերացման նշան: Այնուհետև, երբ օգտատերը սեղմում է հղման վրա, NextAuthJS-ը կհաստատի նշանը և կհաստատի օգտատիրոջ իսկությունը:

Այս առանց գաղտնաբառի մուտքի հնարավորությունը բարձրացնում է անվտանգությունն ու օգտատերերի փորձը՝ վերացնելով գաղտնաբառերի անհրաժեշտությունը: Օգտագործողները կարող են արագ և ապահով մուտք գործել իրենց հաշիվներ՝ պարզապես սեղմելով էլփոստով ստացված հղման վրա: Այն հեշտացնում է մուտքի գործընթացը և նվազեցնում գաղտնաբառի հետ կապված խոցելիության ռիսկը:

Երբ օգտվողը կտտացնում է NextAuthJS-ի կողմից ստեղծված մուտքի էլ.փոստը և վավերացվում է, մի քանի գործողություններ են կատարվում կուլիսների հետևում՝ հեշտացնելու մուտքի անխափան փորձը:

1. Էլփոստի հղման վավերացում. Երբ օգտատերը սեղմում է մուտքի հղման վրա, NextAuthJS-ը վավերացնում է հղման մեջ ներկառուցված նույնականացման նշանը: Այս նշանն ապահովում է նույնականացման գործընթացի անվտանգությունն ու ամբողջականությունը:

2. Նույնականացման գործընթաց. նշանի հաջող վավերացումից հետո NextAuthJS-ը նույնականացնում է օգտատիրոջը և ավարտում է նույնականացման գործընթացը: Այն ստուգում է օգտատիրոջ ինքնությունը՝ հիմնվելով տրամադրված նշանի և կազմաձևված նույնականացման լրացուցիչ գործոնների վրա, ինչպիսիք են բազմագործոն նույնականացումը:

3. Սեսիայի ստեղծում. հաջող նույնականացումից հետո NextAuthJS-ը ստեղծում է նիստ օգտատիրոջ համար: Նիստը մշտական ​​վիճակ է, որը ներկայացնում է օգտատիրոջ իսկորոշման կարգավիճակը և թույլ է տալիս նրան մուտք գործել պաշտպանված ռեսուրսներ՝ առանց հետագա խնդրանքների համար նորից նույնականացման:

4. Թխուկներ. NextAuthJS-ը օգտատիրոջ դիտարկիչում տեղադրում է միայն HTTP-ով ապահով թխուկներ՝ աշխատաշրջանը կառավարելու համար: Այս թխուկները կարևոր դեր են խաղում օգտատիրոջ վավերացված վիճակի պահպանման գործում բազմաթիվ հարցումների դեպքում: Թխուկները սովորաբար ներառում են նիստի թխուկ և կամայականորեն թարմացման նշանային թխուկ՝ կախված նույնականացման կոնֆիգուրացիայից:

1. Session Cookie. նստաշրջանի թխուկը պարունակում է նստաշրջանի նույնացուցիչ (օրինակ՝ պատահականորեն ստեղծված տող), որը եզակի կերպով նույնականացնում է օգտատիրոջ նիստը: Այն օգնում է NextAuthJS-ին կապել հետագա հարցումները ճիշտ նստաշրջանի և օգտագործողի հետ:

2. CSRF Token Cookie. NextAuthJS-ը սահմանում է CSRF (Cross-Site Request Forgery) թխուկ՝ CSRF հարձակումներից պաշտպանվելու համար: CSRF նշանը եզակի արժեք է, որը ստեղծվել է NextAuthJS-ի կողմից և պահվում է թխուկում: Այն օգտագործվում է օգտատիրոջ կողմից ներկայացված հետագա հարցումների իսկությունը հաստատելու և ստուգելու համար: Երբ օգտվողը ներկայացնում է ձևեր կամ կատարում է զգայուն գործողություններ, CSRF նշանը ներառվում է հարցման վերնագրերում կամ մարմնի մեջ՝ համոզվելու համար, որ հարցումը ծագել է վավերացված օգտատիրոջ նիստից և ոչ թե վնասակար աղբյուրից:

3. Callback URL Cookie. NextAuthJS-ը սահմանում է հետ կանչի URL քուքի՝ պահելու սկզբնական URL-ը, որին օգտատերը փորձում էր մուտք գործել՝ նախքան նույնականացման հոսքին վերահղվելը: Այս թխուկը օգնում է NextAuthJS-ին վերահղել օգտատիրոջը դեպի ցանկալի էջը հաջող նույնականացումից հետո: Այն ապահովում է օգտատիրոջ սահուն փորձառություն՝ ընդհանուր վայրէջքի էջի փոխարեն օգտվողին անխափան վերադարձնելով իր նպատակակետին:

Օգտագործելով միայն HTTP-ով ապահով թխուկներ՝ NextAuthJS-ը երաշխավորում է, որ նույնականացման վիճակը մնա անվտանգ և անձեռնմխելի: Թխուկները գաղտնագրված են՝ կանխելով չարտոնված մուտքը կամ փոփոխումը չարագործների կողմից:

Հիանալի աշխատանք NextAuthJS-ը Prisma ադապտերի հետ հաջողությամբ ինտեգրելու ձեր Next.js հավելվածում: NextAuthJS-ի տրամադրած հեշտությամբ և հարմարվողականությամբ դուք այժմ ունեք հուսալի վավերացման համակարգ:

Այս ուղեցույցում օգտագործված կոդի համար ստուգեք ստորև հղված GitHub պահոցը՝ https://github.com/codelabsacademy/next-auth-guide:

Բայց ինչո՞ւ կանգ առնել այստեղ: Եթե ​​դուք կրքոտ եք վեբ մշակմամբ և ցանկանում եք զարգացնել ձեր հմտությունները, կարող եք դիմել մեր վեբ ծրագրավորման bootcamp-ին: Մեր bootcamp-ն առաջարկում է համապարփակ ուսուցման փորձ՝ զինելով ձեզ գիտելիքներով և գործնական հմտություններով, որոնք անհրաժեշտ են վեբ զարգացման դինամիկ աշխարհում առաջադիմելու համար:

Միանալով մեր bootcamp-ին, դուք ձեռք կբերեք գործնական փորձ առաջադեմ տեխնոլոգիաների հետ, կաշխատեք իրական աշխարհի նախագծերի վրա և կստանաք անհատականացված ուղեցույց ոլորտի փորձագետներից: Անկախ նրանից՝ սկսնակ եք, թե փորձառու ծրագրավորող, մեր ծրագիրը նախատեսված է ձեր վեբ մշակման հմտությունները հաջորդ մակարդակի հասցնելու համար:

Բաց մի թողեք այս հնարավորությունը՝ արագացնելու ձեր վեբ զարգացման ճանապարհորդությունը: Դիմեք մեր վեբ մշակման bootcamp-ին այսօր և բացեք ձեր ողջ ներուժը վեբ զարգացման հետաքրքիր ոլորտում: Եկեք միասին ստեղծենք զարմանալի թվային փորձառություններ և ձևավորենք համացանցի ապագան: