ספרייה זו מאפשרת לך לשלב בצורה חלקה את האימות של Google ביישום Next.js שלך, ולבטל את הצורך לפתח אותו מאפס.

שילוב מערכת אימות מאובטחת הוא שלב פיתוח מכריע שלא רק מספק סביבה בטוחה למשתמשים אלא גם משרה אמון במוצר שלך. מערכת זו מבטיחה שהנתונים שלהם מוגנים ושרק אנשים מורשים יכולים לגשת לאפליקציה.

בניית אימות מאובטח מהיסוד עשויה להיות תהליך שלוקח זמן הדורש בדיקה יסודית הבנה של פרוטוקולים ותהליכי אימות, במיוחד בעת טיפול באימות שונה ספקים.

באמצעות NextAuth, אתה יכול להעביר את המיקוד שלך לבניית תכונות הליבה. המשך לקרוא כדי ללמוד כיצד לשלב התחברות חברתית של Google באפליקציה שלך באמצעות NextAuth.

איך NextAuth עובד

NextAuth.js היא ספריית אימות בקוד פתוח המפשטת את תהליך ההוספה אימות והרשאה פונקציונליות ליישומי Next.js וכן התאמה אישית של זרימות עבודה של אימות. הוא מספק מגוון תכונות כגון דואר אלקטרוני, אימות ללא סיסמה ותמיכה בספקי אימות שונים כגון Google, GitHub ועוד.

ברמה גבוהה, NextAuth פועלת בתור תוכנת ביניים, ומקלה על תהליך האימות בין האפליקציה שלך לספק. מתחת למכסה המנוע, כאשר משתמש מנסה להיכנס, הוא מופנה לדף הכניסה של גוגל. לאחר אימות מוצלח, גוגל מחזירה מטען שכולל את נתוני המשתמש, כגון השם וכתובת האימייל שלו. נתונים אלה משמשים כדי לאשר גישה לאפליקציה ולמשאביה.

instagram viewer

באמצעות נתוני המטען, NextAuth יוצר הפעלה עבור כל משתמש מאומת ומאחסן את אסימון ההפעלה בקובץ Cookie מאובטח של HTTP בלבד. אסימון ההפעלה משמש כדי לאמת את זהות המשתמש ולהמשיך את סטטוס האימות שלו. תהליך זה חל גם על ספקים אחרים עם שינויים קלים ביישום.

רשום את אפליקציית Next.js שלך ב-Google Developer Console

NextAuth מספקת תמיכה עבור שירות האימות של Google. עם זאת, כדי שהאפליקציה שלך תיצור אינטראקציה עם ממשקי API של Google ותאפשר למשתמשים לאמת איתם את אישורי Google שלהם, תצטרך לרשום את האפליקציה שלך במסוף המפתחים של Google וכן להשיג מזהה לקוח ו סוד הלקוח.

כדי לעשות זאת, נווט אל מסוף המפתחים של גוגל. לאחר מכן, היכנס עם חשבון Google שלך ​​כדי לגשת למסוף. לאחר הכניסה, צור פרויקט חדש.

בדף הסקירה הכללית של הפרויקט, בחר את ממשקי API ושירותים לשונית מרשימת השירותים בחלונית התפריט השמאלית ולבסוף, את אישורים אוֹפְּצִיָה.

הקלק על ה צור אישורים לחצן כדי ליצור את מזהה הלקוח וסוד הלקוח שלך. לאחר מכן, ציין את סוג היישום מהאפשרויות הנתונות ולאחר מכן ספק שם ליישום שלך.

לאחר מכן, ציין את כתובת האתר של המסלול הביתי של האפליקציה שלך ולבסוף ציין את URI ההפניה המאושרת עבור האפליקציה שלך. במקרה הזה, זה צריך להיות http://localhost: 3000/api/auth/callback/google כפי שצוין בהגדרות ספק Google של NextAuth.

לאחר רישום מוצלח, Google תספק לך מזהה לקוח וסוד לקוח לשימוש באפליקציה שלך.

הגדר את אפליקציית NextJS

כדי להתחיל, צור פרויקט Next.js באופן מקומי:

npx create-next-app next-auth-app

לאחר השלמת ההגדרה, נווט אל ספריית הפרויקט החדשה שנוצרה והפעל את הפקודה הזו כדי לסובב את שרת הפיתוח.

npm run dev

פתח את הדפדפן שלך ונווט אל http://localhost: 3000. זו צריכה להיות התוצאה הצפויה.

אתה יכול למצוא את הקוד של הפרויקט הזה בו מאגר GitHub.

הגדרת קובץ .env

בתיקיית השורש של הפרויקט שלך, צור קובץ חדש ושם לו .env כדי להחזיק את מזהה הלקוח, הסוד ואת כתובת האתר הבסיסית.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'זיהוי לקוח'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'סוֹד'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

כתובת ה-URL של NextAUTH משמשת לציון כתובת ה-URL הבסיסית של האפליקציה שלך, המשמשת להפניה מחדש של משתמשים לאחר השלמת האימות.

שלב את NextAuth ביישום Next.js שלך

ראשית, התקן את הספרייה של NextAuth בפרויקט שלך.

npm להתקין את next-auth

לאחר מכן, ב- /pages ספרייה, צור תיקיה חדשה ושמה לה API. שנה את הספרייה ל- API תיקייה, וצור תיקיה נוספת בשם אישור. בתיקיית אישור, הוסף קובץ חדש ושמו לו [...nextauth].js והוסיפו את שורות הקוד הבאות.

יְבוּא NextAuth מ"next-auth/next";
יְבוּא GoogleProvider מ"next-auth/providers/google";
יְצוּאבְּרִירַת מֶחדָל NextAuth({
 ספקים:[
 GoogleProvider({
 זיהוי לקוח: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

קוד זה מגדיר את Google כספק האימות. הפונקציה NextAuth מגדירה את אובייקט התצורה של ספק Google שמקבל שני מאפיינים: מזהה לקוח וסוד לקוח שמאתחל את הספק.

לאחר מכן, פתח את pages/_app.js קובץ ובצע את השינויים הבאים בקוד.

יְבוּא'../styles/globals.css'
יְבוּא { SessionProvider } מ"אישור הבא/תגובה"
פוּנקצִיָהMyApp({ Component, pageProps: { session, ...pageProps } }) {
לַחֲזוֹר (


 </SessionProvider>
 )
}
יְצוּאבְּרִירַת מֶחדָל MyApp

של NextAuth SessionProvider הרכיב מספק פונקציונליות ניהול מצב אימות לאפליקציית Next.js. זה לוקח א מוֹשָׁב prop המכיל את נתוני הפעלת האימות שהוחזרו מהממשק ה-API של Google הכולל פרטי משתמש כגון המזהה, האימייל ואסימון הגישה שלו.

על ידי עטיפת ה MyApp רכיב עם רכיב SessionProvider, אובייקט הפעלת האימות עם פרטי המשתמש זמין לאורך היישום, מה שמאפשר ליישום להתמיד ולעבד דפים על סמך מצב האימות שלהם.

הגדר את קובץ index.js

פתח את ה pages/index.js קובץ, מחק את קוד ה-boilerplate, והוסף את הקוד למטה כדי ליצור כפתור התחברות שמנתב משתמשים לדף התחברות.

יְבוּא רֹאשׁ מ'הבא/ראש'
יְבוּא סגנונות מ'../styles/Home.module.css'
יְבוּא { useRouter } מ'הבא/נתב';
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
const נתב = useRouter();

לַחֲזוֹר (





צור את האפליקציה הבאה<<span>/title></span><br> <meta name="<span">"description" content=<span>"נוצר על ידי יצירת האפליקציה הבאה"</span> /> <br> "icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> ברוכים הבאים אל <a href="<span">" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></main></p>
<p> </p>
<p classname="{styles.description}"><br> התחל על ידי כניסה <span>ל</span>{<span>' ' </span>}<br> <code classname="{styles.code}"><span>עם</span> חשבון Google שלך<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> כניסה<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></code></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>קוד זה משתמש בהוק Next.js <strong>useRouter</strong> כדי לטפל בניתוב בתוך היישום על ידי הגדרת אובייקט נתב. כאשר לוחצים על כפתור הכניסה, פונקציית המטפל קוראת לשיטת <strong>router.push</strong> כדי להפנות מחדש המשתמש לדף הכניסה.</p> <h3 id="create-a-login-authentication-page">צור אימות התחברות עמוד</h3> <p>בספריית <strong>דפים</strong>, צור קובץ חדש <strong>Login.js</strong>, ולאחר מכן הוסף את שורות הקוד הבאות.</p> <pre> <code><span>ייבוא</span> { useSession, signIn, signOut } <span>מ</span> <span>"next-auth/react"</span><br><span>ייבוא</span> { useRouter } <span>מ</span> <span>'next /router'</span>;<br><span>יבא</span> סגנונות <span>מ</span> <span>'../styles/Login.module.css'</span><p><span>ייצוא</span> <span>ברירת מחדל</span> <span><span>פונקציה</span> < span>התחברות</span>() {<br> <span>const</span> { <span>נתונים</span>: session } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (session) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">צור את האפליקציה הבאה<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> חתום < span>in <span>as</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> פרופיל משתמש<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> יציאה<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> <br> <span>החזרה</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">צור את האפליקציה הבאה<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> אינך מחובר <span>ל</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => כניסה()}>כניסה <span>ב</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> ו-<strong>signOut</strong> הם ווים המסופקים על ידי <strong>next-auth</strong>. ה-<strong>useSession</strong> משמש לגישה לאובייקט ההפעלה הנוכחי של המשתמש ברגע שמשתמש נכנס ומאומת בהצלחה על ידי Google.</p> <p>זה מאפשר ל-Next.js להתמיד במצב האימות ולספק את פרטי המשתמש בצד הלקוח של האפליקציה, במקרה זה, דוא"ל.</p> <p>יתרה מכך, באמצעות אובייקט ההפעלה, תוכל לבנות בקלות פרופילי משתמש מותאמים אישית עבור היישום שלך ולאחסן את הנתונים במסד נתונים כגון בתור PostgreSQL. אתה יכול <span>לחבר מסד נתונים PostgreSQL עם אפליקציית Next.js שלך באמצעות Prisma</span>.</p> <p>Hook היציאה מאפשר למשתמש לצאת מהאפליקציה. חיבור זה ימחק את אובייקט ההפעלה שנוצר במהלך תהליך הכניסה והמשתמש יתנתק.</p> <p>קדימה וסובב את שרת הפיתוח כדי עדכן את השינויים ועבור לאפליקציית Next.js שלך הפועלת בדפדפן כדי לבדוק את פונקציונליות האימות.</p> <pre> <code>npm run dev</code> </pre> <p>יתר על כן, אתה יכול <span>להשתמש ב-Tailwind CSS עם אפליקציית Next.js שלך</span> כדי לעצב את דגמי האימות.</p> <h2 id="authentication-using-nextauth"> אימות באמצעות NextAuth  h2> </h2>
<p>NextAuth תומך במספר שירותי אימות שניתן לשלב בקלות ביישומי Next.js שלך כדי לטפל בצד הלקוח אימות.</p> <p>בנוסף, אתה יכול לשלב מסד נתונים כדי לאחסן את נתוני המשתמשים שלך ואת אסימון הגישה ליישום בצד השרת אימות עבור בקשות אימות עוקבות מאחר ש-NextAuth מספק תמיכה באינטגרציות שונות של מסדי נתונים.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>