تمكنك هذه المكتبة من دمج مصادقة Google بسلاسة في تطبيق Next.js الخاص بك ، مما يلغي الحاجة إلى تطويره من البداية.

يعد دمج نظام مصادقة آمن خطوة تطوير مهمة لا توفر فقط بيئة آمنة للمستخدمين ولكنها تغرس أيضًا الثقة في منتجك. يضمن هذا النظام حماية بياناتهم وأن الأفراد المصرح لهم فقط هم من يمكنهم الوصول إلى التطبيق.

يمكن أن يكون إنشاء مصادقة آمنة من الألف إلى الياء عملية تستغرق وقتًا طويلاً وتتطلب إجراءً شاملاً فهم بروتوكولات وعمليات المصادقة ، خاصة عند التعامل مع المصادقة المختلفة مقدمي.

باستخدام NextAuth ، يمكنك تحويل تركيزك إلى بناء الميزات الأساسية. تابع القراءة لمعرفة كيفية دمج تسجيل الدخول الاجتماعي من Google في تطبيقك باستخدام NextAuth.

كيف يعمل NextAuth

NextAuth.js هي مكتبة مصادقة مفتوحة المصدر تبسط عملية الإضافة المصادقة والتخويل وظائف تطبيقات Next.js بالإضافة إلى تخصيص سير عمل المصادقة. يوفر مجموعة من الميزات مثل البريد الإلكتروني والمصادقة بدون كلمة مرور ودعم مختلف موفري المصادقة مثل Google و GitHub والمزيد.

على مستوى عالٍ ، يعمل NextAuth كبرنامج وسيط ، مما يسهل عملية المصادقة بين التطبيق والموفر. تحت الغطاء ، عندما يحاول المستخدم تسجيل الدخول ، تتم إعادة توجيهه إلى صفحة تسجيل الدخول في Google. عند المصادقة الناجحة ، تقوم Google بإرجاع حمولة تتضمن بيانات المستخدم ، مثل الاسم وعنوان البريد الإلكتروني. تُستخدم هذه البيانات للسماح بالوصول إلى التطبيق وموارده.

instagram viewer

باستخدام بيانات الحمولة ، ينشئ NextAuth جلسة لكل مستخدم مصادق عليه ويخزن الرمز المميز للجلسة في ملف تعريف ارتباط HTTP آمن فقط. يتم استخدام الرمز المميز للجلسة للتحقق من هوية المستخدم واستمرار حالة المصادقة الخاصة به. تنطبق هذه العملية أيضًا على مقدمي الخدمات الآخرين مع اختلافات طفيفة في التنفيذ.

قم بتسجيل تطبيق Next.js الخاص بك على Google Developer Console

يوفر NextAuth دعمًا لخدمة مصادقة Google. ومع ذلك ، لكي يتفاعل تطبيقك مع Google APIs ويسمح للمستخدمين بالمصادقة باستخدام بيانات اعتماد Google الخاصة بهم ، ستحتاج إلى تسجيل تطبيقك على وحدة تحكم مطوري Google و الحصول على معرف العميل و سر العميل.

للقيام بذلك ، انتقل إلى وحدة تحكم مطوري Google. بعد ذلك ، قم بتسجيل الدخول باستخدام حساب Google الخاص بك للوصول إلى وحدة التحكم. بمجرد تسجيل الدخول ، قم بإنشاء مشروع جديد.

في صفحة نظرة عامة على المشروع ، حدد ملف واجهات برمجة التطبيقات والخدمات علامة التبويب من قائمة الخدمات في جزء القائمة الأيسر وأخيرًا ملف أوراق اعتماد خيار.

اضغط على إنشاء بيانات الاعتماد زر لإنشاء معرّف العميل وسر العميل. بعد ذلك ، حدد نوع التطبيق من الخيارات المحددة ثم أدخل اسمًا للتطبيق الخاص بك.

بعد ذلك ، حدد عنوان URL للمسار الرئيسي لتطبيقك وحدد أخيرًا URI المعتمد لإعادة التوجيه لتطبيقك. في هذه الحالة ، يجب أن يكون http://localhost: 3000 / api / auth / callback / google كما هو محدد بواسطة إعدادات مزود Google في NextAuth.

عند التسجيل الناجح ، ستزودك Google بمعرف العميل وسر العميل لاستخدامهما في تطبيقك.

قم بإعداد تطبيق NextJS

للبدء ، أنشئ مشروع Next.js محليًا:

npx create-next-app next-auth-app

بعد اكتمال الإعداد ، انتقل إلى دليل المشروع الذي تم إنشاؤه حديثًا وقم بتشغيل هذا الأمر لتدوير خادم التطوير.

npm تشغيل dev

افتح المستعرض الخاص بك وانتقل إلى http://localhost: 3000. يجب أن تكون هذه هي النتيجة المتوقعة.

يمكنك العثور على رمز هذا المشروع في ملف مستودع جيثب.

إعداد ملف .env

في المجلد الجذر لمشروعك ، أنشئ ملفًا جديدًا وقم بتسميته .env للاحتفاظ بمعرف العميل والسرية وعنوان URL الأساسي.

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 تثبيت المصادقة التالية

بعد ذلك ، في /pages الدليل ، قم بإنشاء مجلد جديد وقم بتسميته api. قم بتغيير الدليل إلى ملف api مجلد ، وإنشاء مجلد آخر يسمى المصادقة. في مجلد المصادقة ، أضف ملفًا جديدًا وقم بتسميته [... nextauth] .js وأضف سطور التعليمات البرمجية التالية.

يستورد NextAuth من"المصادقة التالية / التالية";
يستورد GoogleProvider من"المصادقة التالية / الموفرون / google";
يصدّرتقصير NextAuth ({
 الموفرون: [
 GoogleProvider ({
 معرف العميل: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID ،
 سر العميل: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET ،
 }),
 ]
});

يعمل هذا الرمز على تكوين Google كموفر المصادقة. تحدد وظيفة NextAuth كائن تهيئة موفر Google الذي يأخذ خاصيتين: معرف العميل وسر العميل الذي يقوم بتهيئة الموفر.

بعد ذلك ، افتح ملف الصفحات / _app.js ملف وقم بإجراء التغييرات التالية على الكود.

يستورد"../styles/globals.css"
يستورد {SessionProvider} من"المصادقة / التفاعل التالي"
وظيفةتطبيقي({مكون ، pageProps: {جلسة ،... pageProps}}) {
يعود (


 </SessionProvider>
 )
}
يصدّرتقصير تطبيقي

NextAuth ل مقدم الجلسة يوفر المكون وظيفة إدارة حالة المصادقة لتطبيق Next.js. انه يأخذ حصة الخاصية التي تحتوي على بيانات جلسة المصادقة التي يتم إرجاعها من واجهة برمجة تطبيقات Google والتي تتضمن تفاصيل المستخدم مثل المعرف والبريد الإلكتروني ورمز الوصول.

عن طريق التفاف تطبيقي المكون مع المكون SessionProvider ، يتم توفير كائن جلسة المصادقة مع تفاصيل المستخدم في جميع أنحاء التطبيق ، مما يمكّن التطبيق من الاستمرار وعرض الصفحات بناءً على حالة المصادقة الخاصة بهم.

قم بتكوين ملف index.js

افتح ال الصفحات / index.js ملف ، واحذف الرمز المعياري ، وأضف الرمز أدناه لإنشاء زر تسجيل دخول يوجه المستخدمين إلى صفحة تسجيل الدخول.

يستورد رأس من"التالي / الرأس"
يستورد الأنماط من"../styles/Home.module.css"
يستورد {useRouter} من"التالي / جهاز التوجيه";
يصدّرتقصيروظيفةبيت() {
مقدار ثابت جهاز التوجيه = useRouter () ،

يعود (





إنشاء التطبيق التالي <<span> / title> </span> <br> <meta name="<span"> "description"  content = <span> "تم إنشاؤه عن طريق إنشاء التطبيق التالي"  span> /> <br>  "icon" </span> 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}"></button> onClick = { () => router.push (<span> '/ Login' </span>)}> تسجيل الدخول <<span> / button> </span> <br> <<span> / p> </span> <br> < <span> / main> </span> </span></code></span></span></p>  <p> <code> <<span> / div> </span> <br>) <br>} <br> </code> </p>  <p> تستخدم هذه الشفرة خطاف Next.js <strong> useRouter </strong> لمعالجة التوجيه داخل التطبيق من خلال تعريف كائن جهاز التوجيه. عند النقر على زر تسجيل الدخول ، تستدعي وظيفة المعالج طريقة <strong> router.push </strong> لإعادة التوجيه المستخدم في صفحة تسجيل الدخول.  p> </p>
<h3 id="create-a-login-Authentication-page"> إنشاء مصادقة تسجيل الدخول الصفحة </h3> <p> في دليل <strong> pages </strong> ، أنشئ ملفًا جديدًا <strong> Login.js </strong> ، ثم أضف سطور التعليمات البرمجية التالية.  p> </p>
<pre> <code> <span> استيراد  span> {useSession ، تسجيل الدخول ، تسجيل الدخول} <span> من  span> <span> "المصادقة التالية / التفاعل"  span> <br> <span> استيراد  span> {useRouter} <span> من  span> <span> "التالي / router '</span> ؛ <br> <span> استيراد  span> أنماط <span> من  span> <span> '../styles/Login.module.css' </span> <p> <span> تصدير  span> <span> افتراضي  span> <span> <span> وظيفة  span> < span> تسجيل الدخول  span> () </span> {<br> <span> const </span> {<span> data </span>: session} = useSession () <br> <span> const </span> router = useRouter ()؛ <br> <span> إذا  span> (جلسة) {<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> {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>  {<br> تسجيل الخروج () <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}"></button> onClick = {() => تسجيل الدخول ()}> تسجيل <span> في  span> <<span> / button> </span> <br> <<span> / div> </span> <br> <<span> / div> </span> < br />) <br>}    <p> <strong> useSession </strong> و <strong> تسجيل الدخول  strong> و <strong> تسجيل الخروج  strong> عبارة عن أدوات ربط يتم توفيرها بواسطة <strong> next-auth </strong>. يتم استخدام خطاف <strong> useSession </strong> للوصول إلى كائن جلسة المستخدم الحالية بمجرد أن يقوم المستخدم بتسجيل الدخول والمصادقة عليه بنجاح Google. </strong></strong></p> <p> يسمح هذا لـ Next.js بالاستمرار في حالة المصادقة وعرض تفاصيل المستخدم على جانب العميل من التطبيق ، وفي هذه الحالة ، البريد الإلكتروني.  p> </p>
<p> علاوة على ذلك ، باستخدام كائن الجلسة ، يمكنك بسهولة إنشاء ملفات تعريف مستخدم مخصصة لتطبيقك وتخزين البيانات في قاعدة بيانات مثل مثل PostgreSQL. يمكنك <span> توصيل قاعدة بيانات PostgreSQL بتطبيق Next.js باستخدام Prisma </span>. </p> <p> يسمح خطاف تسجيل الخروج للمستخدم بتسجيل الخروج من التطبيق. سيؤدي هذا الخطاف إلى حذف كائن الجلسة الذي تم إنشاؤه أثناء عملية تسجيل الدخول وسيتم تسجيل خروج المستخدم.  p> </p>
<p> انطلق وقم بتدوير خادم التطوير إلى حدِّث التغييرات وتوجه إلى تطبيق Next.js الذي يعمل على المتصفح لاختبار وظيفة المصادقة.  p> </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>
<p> بالإضافة إلى ذلك ، يمكنك دمج قاعدة بيانات لتخزين بيانات المستخدمين ورمز الوصول لتنفيذ جانب الخادم المصادقة لطلبات المصادقة اللاحقة حيث يوفر NextAuth دعمًا لعمليات تكامل مختلفة لقاعدة البيانات.  p> </p></span></p></span></span>
</h2>
</div> </h1>
</div> </span></code></p></span></button>
</div></span>
</h2>
</div>
</h1>
</div></span></span></span></span></span></p></span></span></span></span></span></span></span></code></pre>