درباره آخرین تغییرات این کتابخانه احراز هویت همه چیز را بیاموزید.
احراز هویت یک جزء کلیدی در توسعه برنامه است. این به محافظت از داده های کاربر و جلوگیری از فعالیت های مخرب کمک می کند. به زبان ساده، اعتبار هویت کاربر را تعیین می کند و اطمینان می دهد که فقط کاربران مجاز می توانند به یک برنامه کاربردی و منابع آن دسترسی داشته باشند.
ایجاد یک سیستم احراز هویت سفارشی می تواند یک کار وقت گیر باشد و اینجاست که NextAuth.js به کار می آید. پشتیبانی از احراز هویت امن برای برنامه های ساخته شده با چارچوب Next.js را فراهم می کند.
NextAuth.js چیست؟
NextAuth.js یک کتابخانه سبک منبع باز است که از احراز هویت و پشتیبانی از مجوز برای برنامه های Next.js پشتیبانی می کند. این به توسعه دهندگان اجازه می دهد تا به سرعت و به راحتی احراز هویت و مجوز را برای برنامه های Next.js خود تنظیم کنند. ویژگی هایی مانند احراز هویت با چندین ارائه دهنده، ایمیل و احراز هویت بدون رمز عبور را فراهم می کند.
NextAuth.js چگونه در احراز هویت کار می کند؟
راه حل احراز هویت NextAuth.js یک API سمت کلاینت را ارائه می دهد که می توانید آن را در برنامه Next.js خود ادغام کنید. می توانید از آن برای احراز هویت کاربران با ارائه دهندگان ورود به سیستم مختلف که با آنها حساب ایجاد کرده اند استفاده کنید.
در زیر هود، کاربران به صفحه ورود به سیستم ارائه دهنده هدایت می شوند. پس از احراز هویت موفقیت‌آمیز، ارائه‌دهنده داده‌های جلسه را که حاوی بار کاربر است، برمی‌گرداند. سپس این بار می‌تواند دسترسی به برنامه و منابع آن را مجاز کند.
به روز رسانی ویژگی های جدید در NextAuth.js (v4)
در دسامبر 2022، NextAuth.js چهارمین نسخه خود را منتشر کرد. این نسخه نسبت به نسخه قبلی خود یعنی v3 با آپدیت ها و تغییرات جدید بهبود یافته است. تغییرات عمدتاً بر بهبود استفاده از کتابخانه در فرآیند احراز هویت متمرکز است.
1. به روز رسانی به useSession Hook
می توانید از قلاب useSession برای بررسی اینکه آیا کاربر وارد شده است یا خیر استفاده کنید. در این نسخه جدید، قلاب useSession یک شی را برمی‌گرداند که به لطف افزودن گزینه وضعیت، راه ساده‌تری برای آزمایش وضعیت‌ها ارائه می‌کند. کد زیر را ببینید:
import { useSession } from "next-auth/react"
export default function Component() {
const { data: session, status } = useSession()
if (status === "authenticated") {
return <p>Signed in as {session.user.email}</p>
}
return <p> Not signed in </p>
}
2. زمینه SessionProvider اجباری می شود
نسخه جدید چهار استفاده از زمینه SessionProvider را الزامی می کند. این بدان معنی است که شما باید برنامه خود را با ارائه دهنده useSession بپیچید. NextAuth.js توصیه می کند برنامه خود را در فایل _app.jsx قرار دهید.
علاوه بر این، متد clientMaxAge با refetchInterval جایگزین شده است. این کار واکشی دوره‌ای جلسه را در پس‌زمینه آسان‌تر می‌کند.
import { SessionProvider } from "next-auth/react"
export default function App({
Component, pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session} refetchInterval={5 * 60}>
<Component {...pageProps} /> </SessionProvider>
)
}
3. واردات ارائه دهندگان به صورت جداگانه
NextAuth.js چندین سرویس ارائه دهنده را ارائه می دهد که می توانید از آنها برای ورود به سیستم یک کاربر استفاده کنید. آنها عبارتند از:
- استفاده از ارائه دهندگان OAuth داخلی (مانند GitHub، Google).
- با استفاده از ارائه دهنده ایمیل
در این نسخه جدید، باید هر ارائه دهنده را به صورت جداگانه وارد کنید.
import GoogleProvider from "next-auth/providers/google"
import Auth0Provider from "next-auth/providers/auth0";
4. سایر تغییرات جزئی
- واردات سمت کلاینت به next-auth/react از next-auth/client تغییر نام داده است.
- تغییرات در آرگومان‌های روش‌های برگشت تماس: signIn({ کاربر، حساب، نمایه، ایمیل، اعتبارنامه }) جلسه ({ جلسه، نشانه، کاربر })jwt({ نشانه، کاربر، حساب، نمایه، isNewUser })
signIn({ user, account, profile, email, credentials })
session({ session, token, user })
jwt({ token, user, account, profile, isNewUser })
شروع کار با NextAuth.js در احراز هویت
برای ادغام NextAuth.js در برنامه های Next.js خود، مراحل زیر را دنبال کنید:
- با اجرای این دستور یک برنامه Next.js ایجاد کنید: npx create-next-app
- npm install next-auth را در ترمینال خود اجرا کنید تا NextAuth.js را در برنامه Next.js خود نصب کنید.
- از اسناد رسمی NextAuth.js دیدن کنید و ارائه دهنده/های مورد نظر خود را از لیست موارد پشتیبانی شده انتخاب کنید. سپس، یک حساب کاربری در کنسول توسعه دهنده ارائه دهنده/های انتخابی خود ایجاد کنید و برنامه Next.js خود را ثبت کنید.
- در کنسول توسعه دهنده ارائه دهنده/های انتخابی خود، URL مسیر خانه و URL تغییر مسیر برگشت به تماس را مشخص کنید، تغییرات را ذخیره کنید و ClientID و Client Secret را کپی کنید.
- در دایرکتوری ریشه برنامه Next.js، یک فایل env. ایجاد کنید تا Client ID و Client Secret را نگه دارید.
- در نهایت، در پوشه /pages/api، یک پوشه جدید به نام auth ایجاد کنید. در پوشه auth یک فایل جدید ایجاد کنید و نام آن را […nextauth].js بگذارید. در فایل ایجاد شده کد زیر را اضافه کنید. کد NextAuth.js API سمت کلاینت را با استفاده از ارائه دهنده Google نشان می دهد:
import GoogleProvider from "next-auth/providers/google";
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET
})
]
اکنون می توانید پیش بروید و یک صفحه احراز هویت بسازید. در اینجا یک رندر DOM برای یک مؤلفه ورود وجود دارد:
import React from 'react';
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) {
return (
<>
<p> Signed in as {session.user.email} </p>
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
<p> Not signed in </p>
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
UseSession Hook به شی جلسه کاربر فعلی دسترسی دارد. هنگامی که کاربر وارد سیستم می شود و توسط Google احراز هویت می شود، یک شی جلسه با بار کاربر برگردانده می شود. این به Next.js اجازه می‌دهد تا جزئیات کاربر را در سمت مشتری برنامه، برای این مورد ایمیل، ارائه دهد.
سیستم های احراز هویت سفارشی در مقابل راه حل های آماده استفاده مانند NextAuth.js
انتخاب بین ساخت یک سیستم احراز هویت سفارشی و ادغام یک راه حل احراز هویت آماده برای استفاده مانند NextAuth.js، در نظر گرفتن هزینه، پیچیدگی و امنیت هر راه حل مهم است.
اگر منابع و تخصص لازم برای توسعه یک سیستم احراز هویت سفارشی را دارید، این ممکن است بهترین روش برای شما باشد. با این حال، اگر به دنبال راه‌حلی هستید که پیاده‌سازی، ایمن و مقرون‌به‌صرفه باشد، NextAuth.js ممکن است انتخاب خوبی باشد. در نهایت، انتخاب به نیازها و ترجیحات شما بستگی دارد.