אימות הוא מרכיב מרכזי בפיתוח אפליקציות. זה עוזר להגן על נתוני המשתמש ולמנוע פעילויות זדוניות. במילים פשוטות, הוא קובע את האמינות של זהות המשתמש, ומבטיח שרק משתמשים מורשים יכולים לגשת לאפליקציה ולמשאביה.
יצירת מערכת אימות מותאמת אישית יכולה להיות משימה שגוזלת זמן, וכאן 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 hook כדי לבדוק אם משתמש מחובר או לא. בגרסה החדשה הזו, ה-useSession hook מחזיר אובייקט המספק דרך פשוטה יותר לבדוק מצבים, הודות להוספת אפשרות הסטטוס. ראה את הקוד למטה:
יְבוּא { useSession } מ"אישור הבא/תגובה"יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהרְכִיב() {
const { נתונים: session, status } = useSession()אם (סטָטוּס "מְאוּמָת") {
לַחֲזוֹר<ע>מחובר בתור {session.user.email}ע>
}
לַחֲזוֹר<ע> לא מחובר ע>
}
2. ההקשר של SessionProvider הופך לחובה
הגרסה החדשה ארבע מחייבת את השימוש בהקשר SessionProvider. משמעות הדבר היא שתצטרך לעטוף את האפליקציה שלך בספק useSession. NextAuth.js ממליצה לעטוף את האפליקציה שלך בתוך _app.jsx קוֹבֶץ.
בנוסף, שיטת clientMaxAge הוחלפה ב-refetchInterval. זה יקל על שליפת הפגישה מעת לעת ברקע.
יְבוּא { SessionProvider } מ"אישור הבא/תגובה"
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה({
Component, pageProps: { session, ...pageProps },
}) {
לַחֲזוֹר (
<SessionProviderמוֹשָׁב={מוֹשָׁב}retchInterval={5 * 60}>
<רְכִיב {...pageProps} />SessionProvider>
)
}
3. ייבוא ספקים בנפרד
NextAuth.js מספק מספר שירותי ספק שבהם אתה יכול להשתמש כדי להיכנס למשתמש. הם כוללים:
- שימוש בספקי OAuth מובנים (למשל GitHub, Google).
- שימוש בספק אימייל.
בגרסה החדשה הזו, עליך לייבא כל ספק בנפרד.
יְבוּא GoogleProvider מ"next-auth/providers/google"
יְבוּא Auth0Provider מ"next-auth/providers/auth0";4. שינויים מינוריים אחרים
- השם של הייבוא בצד הלקוח שונה ל-next-auth/react from next-auth/client.
- שינויים בארגומנטים של שיטות ההתקשרות חזרה:
כניסה ({ משתמש, חשבון, פרופיל, דוא"ל, אישורים })
הפעלה ({ הפעלה, אסימון, משתמש })
jwt({ token, user, account, profile, isNewUser })
תחילת העבודה עם NextAuth.js באימות
כדי לשלב את NextAuth.js ביישומי Next.js שלך, בצע את השלבים הבאים:
- צור יישום Next.js על ידי הפעלת הפקודה הזו: npx create-next-app
- לָרוּץ npm להתקין את next-auth במסוף שלך כדי להתקין את NextAuth.js ביישום Next.js שלך.
- בקר ב NextAuth.js תיעוד רשמי ובחר את הספק/ים המועדפים עליך מרשימת הנתמכים. לאחר מכן, צור חשבון במסוף המפתחים של הספק/ים שבחרת ורשום את אפליקציית Next.js שלך.
- במסוף המפתחים של הספק/ים שבחרת, ציין את כתובת האתר של מסלול הבית וה כתובת אתר להפניה חוזרת להתקשרות חוזרת, שמור את השינויים והעתק את מזהה לקוח ו סוד הלקוח.
- בספריית השורש של יישום Next.js, צור קובץ .env כדי להחזיק את מזהה לקוח ו סוד הלקוח.
- לבסוף, בספריית /pages/api, צור תיקיה חדשה בשם אישור. בתיקיית ה-auth, צור קובץ חדש ושמו [...nextauth].js. בקובץ שנוצר, הוסף את הקוד למטה. הקוד מציג את NextAuth.js API בצד הלקוח באמצעות ספק Google:
יְבוּא GoogleProvider מ"next-auth/providers/google";
ספקים: [
GoogleProvider({
זיהוי לקוח: תהליך.env.GOOGLE_CLIENT_ID,
סוד הלקוח: תהליך.env.GOOGLE_CLIENT_SECRET
})
]
כעת תוכל להמשיך ולבנות דף אימות התחברות. להלן עיבוד DOM עבור רכיב התחברות:
יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { useSession, signIn, signOut } מ"אישור הבא/תגובה"יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהרְכִיב() {
const { נתונים: session } = useSession()if (session) {
לַחֲזוֹר (
<>
<ע> מחובר בתור {session.user.email} ע>
<לַחְצָןבלחיצה={() => signOut()}>צאלַחְצָן>
)
}
לַחֲזוֹר (
<>
<ע> לא מחובר ע>
<לַחְצָןבלחיצה={() => signIn()}>כניסהלַחְצָן>
)
}
ה useSession Hook ניגש לאובייקט ההפעלה הנוכחי של המשתמש. ברגע שמשתמש נכנס ומאומת על ידי Google, מוחזר אובייקט הפעלה עם מטען המשתמש. זה מאפשר ל-Next.js להציג את פרטי המשתמש בצד הלקוח של האפליקציה, במקרה זה האימייל.
מערכות אימות מותאמות אישית לעומת פתרונות מוכנים לשימוש כגון NextAuth.js
בחירה בין בניית מערכת אימות מותאמת אישית לבין שילוב אימות מוכן לשימוש פתרון כגון NextAuth.js, חשוב לקחת בחשבון את העלות, המורכבות והאבטחה של כל אחד מהם פִּתָרוֹן.
אם יש לך את המשאבים והמומחיות לפתח מערכת אימות מותאמת אישית, זו עשויה להיות הגישה הטובה ביותר עבורך. עם זאת, אם אתה מחפש פתרון מחוץ לקופסה שקל ליישם, מאובטח וחסכוני אז NextAuth.js עשויה להיות בחירה טובה לשקול. בסופו של דבר, הבחירה תהיה תלויה בצרכים ובהעדפות שלך.
