Ապահովեք ձեր Next.js հավելվածը OAuth նույնականացման միջոցով՝ օգտագործելով Google-ը

OAuth-ը մուտքի պատվիրակման բաց ստանդարտ է, որը օգտատերերին թույլ է տալիս մուտք գործել իրենց ռեսուրսները (օրինակ՝ Google հաշիվը կամ Facebook պրոֆիլը) երրորդ կողմի հավելվածներին՝ առանց գաղտնաբառերը տրամադրելու: Այն ապահովում է անվտանգ և հարմար միջոց՝ ձեր Next.js հավելվածում օգտատերերին նույնականացնելու և լիազորելու համար:

Այս հոդվածում մենք կուսումնասիրենք, թե ինչպես կարելի է կիրառել OAuth-ը Next.js հավելվածում՝ օգտագործելով Google-ի նույնականացման հետ ինտեգրվելու օրինակը:

Ստեղծեք Google API նախագիծ՝

Սկսելու համար դուք պետք է ստեղծեք Google API նախագիծ Google Cloud Console-ում: Հետևեք այս քայլերին.

1. Գնացեք Google Cloud Console և մուտք գործեք ձեր Google հաշիվով:
2. Ստեղծեք նոր նախագիծ՝ սեղմելով վերևի բարում գտնվող «+ Նախագիծ» կոճակը:
3. Անվանեք ձեր նախագծին և սեղմեք «Ստեղծել»:
4. Երբ ձեր նախագիծը ստեղծվի, ընտրեք այն վերևի բարում գտնվող ծրագրի բացվող ցանկից:
5. Գնացեք «API-ներ և ծառայություններ» բաժինը և կտտացրեք «Հավատարմագրերը»:
6. Կտտացրեք «Ստեղծել հավատարմագրեր» կոճակը և ընտրեք «OAuth հաճախորդի ID»:
7. Որպես հավելվածի տեսակ ընտրեք «Վեբ հավելված»:
8. Ավելացրեք http://localhost:3000՝ որպես լիազորված JavaScript սկզբնաղբյուր և http://localhost:3000/api/auth/callback/google»՝ որպես լիազորված վերահղման URI:
9. Սեղմեք «Ստեղծել»՝ ձեր OAuth հաճախորդի ID-ն ստեղծելու համար:
10. Պատճենեք հաճախորդի ID-ն և հաճախորդի գաղտնիքը և պահեք դրանք ձեր Next.js հավելվածում հետագա օգտագործման համար:

Տեղադրեք անհրաժեշտ փաթեթները.

Հաջորդը, դուք պետք է տեղադրեք անհրաժեշտ փաթեթները՝ OAuth-ի ներդրման համար ձեր Next.js հավելվածում: Գործարկեք հետևյալ հրամանը ձեր տերմինալում.

npm install google-auth-library dotenv

Ստեղծեք Google-ի նույնականացման API երթուղի.

Ստեղծեք նոր API երթուղի ձեր Next.js հավելվածում, որը կկառավարի նույնականացման գործընթացը Google-ի հետ: Ստեղծեք նոր ֆայլ, որը կոչվում է google.js pages/api/auth գրացուցակում.

import { OAuth2Client } from 'google-auth-library';
import { serialize } from 'cookie';
import dotenv from 'dotenv';

dotenv.config();

const googleClient = new OAuth2Client(
  process.env.GOOGLE_CLIENT_ID,
  process.env.GOOGLE_CLIENT_SECRET,
  'http://localhost:3000/api/auth/callback/google',
);

export default async function handler(req, res) {
  const { code } = req.query;

  if (!code) {
    const url = googleClient.generateAuthUrl({
      access_type: 'offline',
      prompt: 'consent',
      scope: ['https://www.googleapis.com/auth/userinfo.profile'],
    });
    res.redirect(url);
  } else {
    const { tokens } = await googleClient.getToken(code);
    const user = await googleClient.verifyIdToken({
      idToken: tokens.id_token,
      audience: process.env.GOOGLE_CLIENT_ID,
    });
    const { name, email } = user.getPayload();
    const token = tokens.access_token;

    res.setHeader('Set-Cookie', serialize('token', token, { path: '/' }));
    res.redirect('/');
  }
}

Այս երթուղին կկարգավորի OAuth-ի նույնականացումը Google-ի հետ: Այն ստուգում է, արդյոք հարցումում կա code հարցման պարամետր, և եթե ոչ, այն ստեղծում է նույնականացման URL և օգտատիրոջը վերահղում դեպի Google մուտքի էջ: Եթե ​​օգտատերը թույլ է տալիս մուտք գործել, Google-ը օգտատիրոջը կվերահղի դեպի ձեր հավելվածը code պարամետրով: Ձեր Next.js հավելվածն այնուհետև կփոխանակի այս կոդը մուտքի նշանի հետ և կօգտագործի այն օգտատիրոջ իսկությունը հաստատելու համար:

Ստեղծեք պաշտպանված էջ.

Այժմ, երբ դուք իրականացրել եք OAuth նույնականացումը Google-ի հետ, կարող եք ստեղծել պաշտպանված էջ, որը մուտք գործելու համար պահանջում է նույնականացում: Ստեղծեք նոր ֆայլ, որը կոչվում է secret.js «էջեր» գրացուցակում.

import { parseCookies } from 'nookies';

export default function Secret({ user }) {
  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
      <p>Your email is {user.email}.</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { token } = parseCookies(context);
  
  if (!token) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  // verify the token and get user info
  // ...

  return {
    props: { user },
  };
}

Այս էջը կցուցադրի օգտատիրոջ անունը և էլ․ հասցեն, եթե դրանք վավերացված են։ Այն օգտագործում է getServerSideProps ֆունկցիան՝ ստուգելու համար, թե արդյոք օգտագործողը վավերացված է: Եթե ​​ոչ, այն վերահղում է օգտվողին մուտքի էջ: Եթե ​​օգտատերը վավերացված է, ապա այն առբերում է օգտատիրոջ տեղեկատվությունը և այն փոխանցում բաղադրիչին որպես հենարան:

Ավելացնել մուտքի կոճակ՝

Վերջապես, ձեր հավելվածին ավելացրեք մուտքի կոճակ, որը օգտվողին կվերահղորդի դեպի Google վավերացման API երթուղին: Ձեր pages/index.js ֆայլին ավելացրեք հետևյալ կոդը.

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to my app!</h1>
      <Link href="/api/auth/google"><a>Login with Google</a></Link>
    </div>
  );
}

Սա կցուցադրի «Մուտք Google-ով» կոճակը, որը սեղմելուց հետո օգտատերը կվերահղորդի դեպի Google վավերացման API երթուղին, որը դուք ստեղծել եք ավելի վաղ:

Եզրակացություն:

Ձեր Next.js հավելվածում OAuth նույնականացման իրականացումը հիանալի միջոց է ձեր օգտատերերի համար ապահովելու անվտանգ և հարմար միջոց երրորդ կողմի հավելվածները նույնականացնելու և թույլատրելու համար: Այս հոդվածում նկարագրված քայլերով դուք այժմ պետք է ունենաք աշխատանքային օրինակ, թե ինչպես կարելի է OAuth նույնականացումը Google-ի միջոցով իրականացնել ձեր Next.js հավելվածում:

Միացեք ինձ հետ սոցիալական ցանցում

✅ Github՝ https://github.com/surksharathi
✅ LinkedIn: https://www.linkedin.com/in/suraksha-singh-88350472/
✅ Twitter:https ://twitter.com/SurakshaSogaria