كيفية إعداد Twitter OAuth باستخدام Passport.js و ReactJS

ابدء

هذا برنامج تعليمي بسيط للمصادقة لإنشاء تطبيق ويب لمصادقة Twitter باستخدام Passport API. إنه مشروع جانبي عملت عليه لأغراض التعليم.

لقد قسمت هذا البرنامج التعليمي إلى قسمين. يركز الجزء الأول على بناء طرق المصادقة في الخلفية. يركز الجزء الثاني على بناء مكونات واجهة المستخدم في الواجهة الأمامية باستخدام React.

تك المكدس

  • جانب الخادم: Node.js و Express.js و API Passport Passport و MongoDB و
  • العميل: ReactJS

ما الذي سنبنيه؟

  • ينقر المستخدم على زر تسجيل الدخول الذي يعيد التوجيه إلى صفحة مصادقة Twitter OAuth.
  • بمجرد مصادقة OAuth بنجاح على Twitter ، سيتم إعادة توجيه المستخدم إلى الصفحة الرئيسية لتطبيق الويب.
المصادقة عبر جواز السفر - تويتر

Passport.js. تقدم واجهات برمجة التطبيقات للمصادقة لموفري خدمات OAuth الآخرين مثل Google و Facebook. على سبيل المثال ، اخترت استخدام Twitter كموفر خدمة OAuth.

ما هو OAuth؟

Open Authorization هو معيار لمنح تطبيق الويب الخاص بك الوصول إلى خدمة تسجيل دخول طرف ثالث مثل Twitter أو Facebook أو Google ، والتي تُرجع رمز OAuth. رمز OAuth هو بيانات اعتماد يمكن استخدامها من قبل تطبيق للوصول إلى واجهة برمجة تطبيقات خدمة خارجية.

في هذا المشروع ، أستخدم الوسيطة passport-twitter للتعامل مع مصادقة Twitter باستخدام OAuth 1.0 API ، لأنه يوفر الوقت ويعالج كل عملية المصادقة المعقدة خلف الكواليس.

ما هي نقاط نهاية الخادم؟

/ المصادقة / تويتر - المصادقة عبر تويتر جواز السفر

/ المصادقة / تسجيل الدخول / النجاح - إرجاع استجابة نجاح تسجيل الدخول مع معلومات المستخدم

/ مصادقة / تسجيل الدخول / فشل - إرجاع رسالة فشل تسجيل الدخول

/ auth / logout - تسجيل الخروج وإعادة التوجيه إلى صفحة العميل الرئيسية

/ auth / twitter / redirect - إعادة التوجيه إلى الصفحة الرئيسية في حالة نجاح تسجيل الدخول أو إعادة التوجيه إلى / auth / login / فشل في حالة الفشل

مخطط العمارة

فيما يلي نظرة عامة على المخطط الهندسي الذي سنذهب إليه بمزيد من التفاصيل.

مخطط العمارة

هيكل المشروع

قمت بفصل منطق الخادم والعميل في مجلدات مختلفة لتكون واضحة ونظيفة. يعمل الخادم الخاص بي على المضيف المحلي: 4000 ، بينما يعمل العميل على المضيف المحلي: 3000. (لا تتردد في تحديد المنفذ الخاص بك.)

| - مشروع مصادقة Twitter
| | - الخادم
| | | - index.js
| | | - package.json
| | - العميل
| | | - src
| | | | - index.jsx
| | | | - package.json

التنفيذ

الجزء 1: سجل تطبيقك كمزود OAuth على موقع تطبيق Twitter

أول الأشياء أولاً ، سجّل طلبك في Twitter Application Management. سيتم إصدار مفتاح عميل (API Key) وسر عميل (API Secret) يمكنك استخدامه في استراتيجية جواز السفر لاحقًا.

ستحتاج أيضًا إلى تكوين عنوان URL للاتصال. هذا هو عنوان URL الخاص برد الاتصال بعد مصادقة OAuth بنجاح.

لأغراض التنمية المحلية ، قمت بتخصيص عناوين URL الخاصة برد الاتصال لتكون عنوان URL الخاص بالعميل وهو المضيف المحلي: 3000.

https://developer.twitter.com/en/apps/create

الجزء 2: إعداد خادم Express لمصادقة Twitter

اخترت Express.js لإعداد الخادم على الواجهة الخلفية. Express.js هو إطار تطبيق ويب لـ Node.js والذي صمم لإنشاء واجهات برمجة التطبيقات.

| - الخادم
| | - التكوين
| | | - keys.js
| | | - جواز السفر - setup.js
| - | - النماذج
| | | - user-model.js
| | - الطرق
| | | - المصادقة-route.js
| | - index.js
| | - package.json

تثبيت npm صريح لتثبيت خادم صريح. يعمل الخادم على http: // localhost: 4000.

index.js هو نقطة الدخول لجميع نقاط نهاية الخادم.

/routes/auth-routes.js يحتوي على كافة نقاط النهاية للمصادقة.

يحتوي /config/keys.js على جميع مفاتيح مستهلك Twitter API وتكوينات قاعدة البيانات. يمكنك نسخها ووضع المفاتيح الخاصة بك.

الجزء 3: طرق مصادقة الإعداد

سابقًا في قسم "ما هي نقاط نهاية الخادم؟" ، حددنا نقاط نهاية المصادقة على Twitter API.

/ المصادقة / تويتر - المصادقة عبر تويتر جواز السفر
/ المصادقة / تسجيل الدخول / النجاح - إرجاع استجابة نجاح تسجيل الدخول مع معلومات المستخدم
/ مصادقة / تسجيل الدخول / فشل - إرجاع رسالة فشل تسجيل الدخول
/ auth / logout - الخروج وإعادة التوجيه إلى صفحة العميل الرئيسية
/ auth / twitter / redirect - إعادة التوجيه إلى الصفحة الرئيسية في حالة نجاح تسجيل الدخول أو / auth / login / فشل في حالة الفشل

دعونا نضعها موضع التنفيذ.

/routes/auth-routes.js

في index.js ، طرق الاستيراد / طرق المصادقة ،

npm تثبيت cors - دعم متصفح الأصل

الجزء 4: إعداد استراتيجية Twitter باستخدام Passport API

Passport API هو برنامج وسيط نستخدمه للمصادقة عبر Twitter OAuth. يقوم Passport API بمصادقة تسجيل الدخول خلف الكواليس حتى لا تحتاج إلى معالجة المنطق المعقد. كما أن لديها استراتيجيات مصادقة مختلفة (مثل GoogleStrategy و FacebookStrategy). في المثال الخاص بي ، اخترت استخدام TwitterStrategy لتسجيل الدخول عبر حساب Twitter.

الجزء 5: إعداد وتوصيل قاعدة البيانات

عندما يقوم النظام بمصادقة المستخدم بنجاح من خلال PassportAPI ، سوف يحتاج إلى تخزين المستخدم في قاعدة بيانات حتى يتمكن من استرداد معلومات المستخدم هذه إلى العميل.

مخطط العمارة

أنا أستخدم MongoDB لتخزين معلومات تسجيل دخول المستخدم.

الجزء 5.1 - اشترك في mlab واتبع التعليمات هنا: https://mlab.com/

الجزء 5.2 - إضافة بيانات اعتماد MongoDB في keys.js

الجزء 5.3 - تأسيس اتصال MongoDB باستخدام النمس

npm تثبيت النمس لربط MongoDB.

"يوفر تطبيق Mongoose حلاً مباشرًا ومخططًا لنموذج بيانات التطبيق الخاص بك. ويتضمن ذلك إنشاء تطبيقات مدمجة وتصحيح الأخطاء وإنشاء الاستعلام. "(https://mongoosejs.com/)

الجزء 5.4 - إنشاء نموذج كائن مستخدم يمثل ملف تعريف المستخدم في سجل قاعدة البيانات

/models/user-model.js

الجزء 6: حفظ وجلب المستخدم من قاعدة بيانات

بمجرد مصادقة Passport API بنجاح عبر Twitter OAuth ، يحفظ خادمنا معلومات المستخدم إلى MongoDB. إذا كان هذا المستخدم موجودًا بالفعل ، فإن النظام ببساطة يعثر على المستخدم الحالي من قاعدة البيانات ويعيد المستخدم إلى العميل. يتم كل ذلك باستخدام واجهات برمجة تطبيقات النمس.

/config/passport-setup.js

الجزء 7: استخدام جلسة العميل لتخزين جلسة ملف تعريف الارتباط

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

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

بعد تسجيل الدخول بنجاح ، يتم تعيين ملفات تعريف الارتباط في المتصفح. افتح DevTools ، انتقل إلى التطبيق | بسكويت.

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

لدعم جلسات تسجيل الدخول ، سيقوم Passport بتسلسل مثيل المستخدم وإلغاء تسلسله من وإلى الجلسة.

/config/passport-setup.js

هنا هو index.js النهائي باستخدام جلسة ملف تعريف الارتباط.

اخترت استخدام ملف تعريف ارتباط الجلسة كوسيط لتخزين بيانات الجلسة على العميل.

npm $ تثبيت ملف تعريف الارتباط جلسة

أيضا ، استخدم ملف تعريف الارتباط في index.js

app.use (cookieSession ({
  الاسم: "الجلسة" ،
  مفاتيح: [/ * مفاتيح سرية * /] ،
  الحد الأقصى: 24 * 60 * 60 * 1000 // ستنتهي الجلسة بعد 24 ساعة
}))

يعمل passport.session () كبرنامج وسيط لتغيير كائن req وتغيير قيمة المستخدم المشفرة الموجودة حاليًا باسم sig (من ملف تعريف ارتباط العميل) إلى كائن مستخدم.

خطوة اختيارية:

قمت بتخصيص المضيف المحلي: 4000 / الجذر URL لإظهار رسالة النجاح إذا تسجيل الدخول بشكل صحيح وإلا تظهر رسالة فاشلة.

الخطوة التالية: العميل - إعداد صفحة تسجيل الدخول وصفحة الخروج باستخدام React

لقد قمت ببناء مكونات الواجهة الأمامية باستخدام React و React Router لإعداد الروابط.

صفحة تسجيل الدخول وصفحة الخروج

وظائف

تحتوي الصفحة على رأس الصفحة الرئيسية وزر تسجيل الدخول / الخروج. في البداية ، ستعرض الصفحة رسالة "ترحيب" و "تسجيل الدخول". بمجرد قيام المستخدم بالمصادقة عبر مصادقة twitter ، سيعرض اسم المستخدم وزر "تسجيل الخروج".

إعداد العميل

زبون
| - src
| | - المكونات
| | | - Header.jsx
| | | - Homepage.jsx
| | - App.js
| | - AppRouter.js
| | - index.js
| | - index.css
| | - serviceWorker.js
| - package.json

تحديد مكونات واجهة المستخدم

مكونات واجهة المستخدم
  • الصفحة الرئيسية: حاوية تعرض معلومات الترحيب والمستخدم. المكالمات / مصادقة / تسجيل الدخول / نقطة النهاية النجاح. إذا نجحت نقطة النهاية ، فسيتم تخزين معلومات المستخدم في كائن المستخدم وسيتم ضبط حالة المصادقة. تعرض الصفحة رسالة مفادها "لقد قمت بتسجيل الدخول بنجاح". إذا فشلت نقطة النهاية ، فلن تتم المصادقة على المستخدم ، وتعرض الصفحة "مرحبًا".
  • العنوان: إنه يعالج الملاحة. عندما تتم مصادقة المستخدم ، سيتم تغيير "تسجيل الدخول" إلى "تسجيل الخروج". يتم تمرير حالة المصادقة لأسفل من HomePage كـ prop.

التنفيذ

HomePage.jsx: حاوية تعرض معلومات الترحيب والمستخدم

Header.jsx - مكون التنقل

أخيرًا ، قم بإعداد Route الذي ينتقل إلى HomePage في AppRouter.jsx و App.jsx

شكرا جزيلا لقراءة هذا بلوق وظيفة. آمل أن تجد أنه من المفيد.

المشروع بأكمله متاح على Github: https://github.com/leannezhang/twitter- مصادقة

إذا كان لديك أي تعليقات أو تعليقات ، فلا تتردد في التعليق أدناه أو الاتصال بي.

تويتر: @ ليانغز

مواد القراءة

  • مثال على جواز السفر
  • جواز سفر تويتر
  • جواز السفر جوجل API تعليمي