نحوه پیاده سازی احراز هویت در Next.js با Auth0 – Smashing Magazine

درباره نویسنده

مهندس سیستم از بوینس آیرس ، آرژانتین ، با 15+ سال تجربه در زمینه تولید نرم افزار. توسعه دهنده پشته کامل. سفیر Auth0. GitKraken
اطلاعات بیشتر در مورد Facundo

“احراز هویت” عبارت است از تأیید اعتبار اینکه کاربر همان شخصی باشد که ادعا می کند. ما این کار را معمولاً با پیاده سازی سیستم اطلاعات کاربری ، مانند کاربر / گذرواژه ، س questionsالات امنیتی یا حتی تشخیص چهره انجام می دهیم.

“مجوز” تعیین می کند که کاربر چه کاری می تواند انجام دهد (یا نمی تواند). اگر ما نیاز به تأیید اعتبار و مجوز در برنامه وب خود داشته باشیم ، به یک سیستم عامل یا ماژول امنیتی نیاز خواهیم داشت. ما می توانیم سیستم عامل خود را توسعه دهیم ، آن را پیاده سازی کرده و آن را حفظ کنیم. یا می توانیم از سیستم عامل های احراز هویت و مجوز موجود در بازار که به عنوان خدمات ارائه می شوند استفاده کنیم.

هنگام ارزیابی اینکه آیا بهتر است که ما سیستم عامل خود را ایجاد کنیم یا از سرویس شخص ثالث استفاده کنیم ، مواردی وجود دارد که باید آنها را در نظر بگیریم:

• طراحی و ایجاد سرویس های احراز هویت مهارت اصلی ما نیست. افرادی هستند که به طور ویژه در موضوعات امنیتی متمرکز شده اند و می توانند بسترهای بهتر و ایمنی از ما ایجاد کنند.
• ما می توانیم با اتکا به یک بستر احراز هویت موجود ، در وقت خود صرفه جویی کنیم و آن را صرف ارزش افزوده به محصولات و خدماتی کنیم که برای ما مهم است
• ما اطلاعات حساس را در پایگاه داده خود ذخیره نمی کنیم. ما آن را از تمام داده های موجود در برنامه های خود جدا می کنیم.
• ابزارهای ارائه شده خدمات شخص ثالث قابلیت استفاده و عملکرد آنها را بهبود بخشیده است ، که مدیریت کاربران برنامه خود را برای ما آسان تر می کند.

با در نظر گرفتن این عوامل ، می توان گفت که تکیه بر سیستم عامل های احراز هویت شخص ثالث می تواند آسان تر ، ارزان تر و حتی امن تر از ایجاد ماژول امنیتی خود باشد.

در این مقاله ، نحوه پیاده سازی احراز هویت و مجوز را در برنامه های Next.js با استفاده از یکی از محصولات موجود در بازار مشاهده خواهیم کرد: Auth0.

Auth0 چیست؟

به شما امکان می دهد به برنامه های توسعه یافته با استفاده از هر زبان برنامه نویسی یا فناوری ، امنیت را اضافه کنید.

“Auth0 یک راه حل انعطاف پذیر و منفی برای افزودن خدمات تأیید اعتبار و مجوز به برنامه های شماست.”

– و آریاس، auth0.com

Auth0 دارای چندین ویژگی جالب است ، مانند:

• ورود به سیستم تنها: به محض ورود به برنامه ای که از Auth0 استفاده می کند ، هنگام وارد کردن برنامه دیگری که از آن استفاده می کند ، مجبور نیستید دوباره اعتبارنامه خود را وارد کنید. به طور خودکار وارد همه آنها خواهید شد.
• ورود به سیستم اجتماعی: با استفاده از نمایه شبکه اجتماعی دلخواه خود احراز هویت کنید.
• احراز هویت چند عاملی؛
• چند پروتکل استاندارد مجاز هستند ، مانند OpenID Connect ، JSON Web Token یا OAuth 2.0.
• گزارشگری و ابزارهای تحلیلی.

یک طرح رایگان وجود دارد که می توانید با استفاده از آن امنیت برنامه های وب خود را تأمین کنید ، و حداکثر 7000 کاربر فعال ماهانه را تحت پوشش قرار دهید. با افزایش میزان کاربران ، پرداخت را شروع خواهید کرد.

نکته جالب دیگر در مورد Auth0 این است که ما یک Next.js SDK موجود برای استفاده در برنامه ما. با استفاده از این کتابخانه که مخصوص Next.js ایجاد شده است ، می توانیم به راحتی به Auth0 API متصل شویم.

Auth0 SDK برای Next.js

همانطور که قبلاً اشاره کردیم ، Auth0 SDK متمرکز Next.js را ایجاد کرده و آن را حفظ می کند ، در میان سایر SDK های موجود برای اتصال به API با استفاده از زبانهای مختلف برنامه نویسی. ما فقط باید بارگیری کنیم بسته NPM، برخی از جزئیات مربوط به حساب و اتصال Auth0 خود را پیکربندی کنید ، و ما باید کار خود را ادامه دهیم.

این SDK به ما ابزارهایی برای پیاده سازی احراز هویت و مجوز با هر دو روش سمت کلاینت و سمت سرور ، با استفاده از API Routes در قسمت پشتی و React Context با React Hooks در جلو می دهد.

بیایید ببینیم که برخی از آنها در مثال Next.js چگونه کار می کند.

مثال Next.js برنامه با استفاده از Auth0

بیایید به مثال قبلی پلت فرم ویدئویی خود برگردیم و یک برنامه کوچک ایجاد کنیم تا نحوه استفاده از Auth0 Next.js SDK را نشان دهد. ما راه اندازی خواهیم کرد ورود جهانی Auth0. ما چند URL ویدیوی YouTube خواهیم داشت. آنها در زیر یک بستر احراز هویت پنهان می شوند. فقط کاربران ثبت نام شده قادر به مشاهده لیست فیلم ها از طریق برنامه وب ما هستند.

توجه داشته باشید: این مقاله بر روی پیکربندی و استفاده از Auth0 در برنامه Next.js شما متمرکز است. ما به جزئیاتی مانند سبک CSS یا استفاده از پایگاه داده وارد نخواهیم شد. اگر می خواهید کد کامل برنامه نمونه را مشاهده کنید ، می توانید به اینجا بروید این مخزن GitHub.

حساب Auth0 ایجاد کرده و جزئیات برنامه را پیکربندی کنید

اول از همه ، ما باید یک حساب Auth0 با استفاده از ایجاد کنیم صفحه ثبت نام.

پس از آن ، بیایید به داشبورد Auth0. قابل اعتماد و متخصص برنامه های کاربردی و یک برنامه جدید از نوع ایجاد کنید [“Regular Web Applications”].

حالا بیایید سراغ تنظیمات برگه برنامه و در زیر URI های برنامه بخش ، جزئیات زیر را پیکربندی کرده و تغییرات را ذخیره کنید:

• URL های برگشت تماس مجاز است: اضافه کردن http://localhost:3000/api/auth/callback
• URL های خروج مجاز است: اضافه کردن http://localhost:3000/

با این کار ، ما در حال پیکربندی URL هستیم که می خواهیم بعد از ورود کاربران به سایت ما (Callback) ، و URL که بعد از ورود کاربران به سیستم آنها هدایت می شویم (Logout) ، هدایت شوند. وقتی نسخه نهایی برنامه خود را در سرور میزبان مستقر می کنیم ، باید URL های تولید را اضافه کنیم.

Auth0 Dashboard دارای پیکربندی ها و تنظیمات بسیاری است که می توانیم برای پروژه های خود اعمال کنیم. ما می توانیم نوع احراز هویت مورد استفاده خود ، صفحه ورود به سیستم / ثبت نام ، داده هایی را که برای کاربران درخواست می کنیم تغییر دهیم ، ثبت نام های جدید را فعال یا غیرفعال کنیم ، پایگاه داده کاربران را تنظیم کنیم و غیره.

برنامه Next.js ایجاد کنید

برای ایجاد یک برنامه کاملاً جدید Next.js ، ما استفاده خواهیم کرد ایجاد برنامه بعدی، که همه چیز را به طور خودکار برای شما تنظیم می کند. برای ایجاد پروژه ، اجرا کنید:

npx create-next-app [name-of-the-app]

یا

yarn create next-app [name-of-the-app]

برای شروع سرور توسعه به صورت محلی و دیدن سایت تازه ایجاد شده در مرورگر خود ، به پوشه جدیدی که ایجاد کرده اید بروید:

cd [name-of-the-app]

و اجرا:

npm run dev

یا

yarn dev

Auth0 Next.js SDK را نصب و پیکربندی کنید

بیایید Auth0 Next.js SDK را در برنامه خود نصب کنیم:

npm install @auth0/nextjs-auth0

یا

yarn add @auth0/nextjs-auth0

حال ، در پرونده env.local (یا منوی متغیرهای محیط بستر میزبانی خود) ، اجازه دهید این متغیرها را اضافه کنیم:

AUTH0_SECRET="[A 32 characters secret used to encrypt the cookies]"
AUTH0_BASE_URL="http://localhost:3000"
AUTH0_ISSUER_BASE_URL="https://[Your tenant domain. Can be found in the Auth0 dashboard under settings]"
AUTH0_CLIENT_ID="[Can be found in the Auth0 dashboard under settings]"
AUTH0_CLIENT_SECRET="[Can be found in the Auth0 dashboard under settings]"

اگر گزینه های پیکربندی بیشتری می خواهید ، می توانید نگاهی به اسناد بیندازید.

مسیر Dynamic API را ایجاد کنید

Next.js راهی برای ایجاد API های بدون سرور ارائه می دهد: مسیرهای API. با استفاده از این ویژگی ، ما می توانیم کدی ایجاد کنیم که در هر درخواست کاربر به مسیرهایمان اجرا شود. ما می توانیم مسیرهای ثابت را تعریف کنیم ، مانند /api/index.js. اما ما همچنین می توانیم داشته باشیم مسیرهای API پویا، به همراه پارامترهایی که می توانیم از آنها در کد مسیرهای API خود استفاده کنیم /api/blog/[postId].js.

بیایید پرونده را ایجاد کنیم /pages/api/auth/[...auth0].js، که یک مسیر API پویا خواهد بود. در داخل فایل ، اجازه دهید فایل را وارد کنیم handleAuth روش از Auth0 SDK ، و نتیجه را صادر کنید:

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

این مسیرهای زیر را ایجاد و مدیریت می کند:

• /api/auth/login
  برای انجام ورود یا ثبت نام با Auth0.
• /api/auth/logout
  برای خارج شدن کاربر.
• /api/auth/callback
  برای هدایت کاربر پس از ورود موفقیت آمیز.
• /api/auth/me
  برای دریافت اطلاعات پروفایل کاربر

و این قسمت سمت سرور برنامه ما خواهد بود. اگر می خواهیم وارد برنامه خود شویم یا برای یک حساب جدید ثبت نام کنیم ، باید از آن بازدید کنیم http://localhost:3000/api/auth/login. ما باید در برنامه خود پیوندی به آن مسیر اضافه کنیم. برای خروج از سایت ما نیز همین: پیوندی را به اضافه کنید http://localhost:3000/api/auth/logout.

م Userلفه UserProvider را اضافه کنید

برای مدیریت وضعیت احراز هویت کاربر در جبهه برنامه وب ما ، می توانیم استفاده کنیم UserProvider م componentلفه React ، موجود در Auth0 Next.js SDK. این ملفه استفاده می کند واکنش به متن درونی

اگر می خواهید به حالت احراز هویت کاربر در یک جز access دسترسی پیدا کنید ، باید آن را با یک بسته بندی کنید UserProvider جزء.

<UserProvider>
  <Component {...props} />
</UserProvider>

اگر می خواهیم به همه صفحات برنامه خود دسترسی پیدا کنیم ، باید این م componentلفه را به pages/_app.js فایل. pages/_app.js React را نادیده می گیرد App جزء. این یک ویژگی است که Next.js برای شخصی سازی برنامه ما در معرض دید قرار می دهد. می توانید در این باره بیشتر بخوانید اینجا.

import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

ما یک قلاب React داریم useUser که به حالت احراز هویت در معرض UserProvider. برای مثال می توانیم از آن برای ایجاد نوعی صفحه خوش آمد گویی استفاده کنیم. بیایید کد را تغییر دهیم pages/index.js فایل:

import { useUser } from "@auth0/nextjs-auth0";

export default () => {
 const { user, error, isLoading } = useUser();

 if (isLoading) return <div>Loading...</div>;

 if (error) return <div>{error.message}</div>;

 if (user) {
   return (
     <div>
       <h2>{user.name}</h2>
       <p>{user.email}</p>
       <a href="https://smashingmagazine.com/api/auth/logout">Logout</a>
     </div>
   );
 }
 return <a href="http://smashingmagazine.com/api/auth/login">Login</a>;
};

user شی شامل اطلاعات مربوط به هویت کاربر است. اگر شخصی که از این صفحه بازدید می کند وارد سیستم نشود (الف نداریم) user شی available موجود) ، ما پیوندی به صفحه ورود به سیستم نمایش خواهیم داد. اگر کاربر از قبل احراز هویت شده باشد ، ما نمایش می دهیم user.name و user.email خصوصیات موجود در صفحه و پیوند خروج از سیستم.

بیایید یک فایل videos.js با لیستی از سه URL ویدیوی YouTube ایجاد کنیم که فقط برای افراد ثبت شده قابل مشاهده خواهد بود. برای اینکه فقط به کاربران وارد شده اجازه مشاهده این صفحه را بدهیم ، ما استفاده خواهیم کرد withPageAuthRequired روش از SDK.

import { withPageAuthRequired } from "@auth0/nextjs-auth0";

export default () => {
 return (
   <div>
     <a href="https://www.youtube.com/watch?v=5qap5aO4i9A">LoFi Music</a>
     <a href="https://www.youtube.com/watch?v=fEvM-OUbaKs">Jazz Music</a>
     <a href="https://www.youtube.com/watch?v=XULUBg_ZcAU">Piano Music</a>
   </div>
 );
};

export const getServerSideProps = withPageAuthRequired();

توجه داشته باشید که برنامه وب ما به هر شخص اجازه می دهد تا با استفاده از بستر Auth0 در حساب خود ثبت نام کند. همانطور که ما در حال پیاده سازی ورود جهانی هستیم ، کاربر همچنین می تواند از یک حساب Auth0 موجود دوباره استفاده کند.

ما می توانیم صفحه ثبت نام خود را ایجاد کنیم تا جزئیات بیشتری درباره کاربر درخواست کنیم یا اطلاعات پرداخت را اضافه کنیم تا ماهانه برای خدمات ما صورتحساب شود. همچنین می توانیم از روش های در معرض SDK برای مدیریت مجوز به صورت خودکار استفاده کنیم.

نتیجه

در این مقاله ، نحوه ایمن سازی برنامه های Next.js با استفاده از Auth0 ، یک بستر تأیید اعتبار و مجوز ، را مشاهده کردیم. ما در مقایسه با ایجاد بستر امنیتی خود ، مزایای استفاده از سرویس شخص ثالث را برای تأیید اعتبار برنامه های وب خود ارزیابی می کنیم. ما یک نمونه برنامه Next.js ایجاد کردیم و آن را با استفاده از Auth0 free plan و Auth0 Next.js SDK ایمن کردیم.

اگر می خواهید یک برنامه Auth0 به عنوان مثال در استفاده کنید Vercel، شما می توانید آن را انجام دهید اینجا.

خواندن و منابع بیشتر

• Auth0 Next.js SDK مخزن GitHub ، Auth0 ، GitHub
• “راهنمای نهایی برای احراز هویت Next.js با Auth0، “Sandrino Di Mattia ، وبلاگ Auth0
  در برنامه نمونه ما ، از رندر سمت سرور با مسیرهای API و رویکرد بدون سرور استفاده کردیم. اگر از Next.js برای یک سایت ثابت یا یک سرور سفارشی برای میزبانی برنامه خود استفاده می کنید ، در این مقاله جزئیات مربوط به نحوه پیاده سازی احراز هویت وجود دارد.
• “تجربه جدید ورود جهانی، ”ورود جهانی Auth0 ، اسناد Auth0
• “ورود جهانی متمرکز در مقابل ورود به سیستم جاسازی شده، ”ورود جهانی Auth0 ، اسناد Auth0

(vf، yk، he)