[MUSIC]
الآن بعد أن فهمنا حول OAuth 2 وكيف يدعم Facebook OAuth 2،
دعنا ننتقل إلى هذا التمرين حيث سنقوم بتكوين
تطبيق الخادم السريع الخاص بنا للاستفادة من Facebook كمزود OAuth 2 لخادمنا.
وفي الوقت نفسه لتطبيق العميل لدينا.
في هذا التمرين سنعتمد على جواز السفر الذي
قمنا بتهيئته بالفعل في طلبنا السريع.
سنقوم بتكوين استراتيجية جديدة للمصادقة مع Facebook
باستخدام وحدة عقدة الرمز المميز لجواز السفر Facebook.
للبدء في هذا التمرين،
انتقل إلى https//developers.facebook.com/apps.
الآن، هذا هو المكان الذي ستقوم بتسجيل تطبيق العميل، والذي هو في الأساس
الخادم الخاص بك، الخادم الإضافي، بمثابة تطبيق العميل لFacebook.
وبعد ذلك سنقوم بتسجيل تطبيق العميل هناك.
ثم الحصول على عقد من معرف التطبيق وسر التطبيق من الفيسبوك.
الآن من الواضح أنه غني عن القول أنك تحتاج إلى حساب Facebook
لكي تتمكن من تكوين هذا.
إذا لم يكن لديك حساب على Facebook ولا ترغب في القيام بهذا التمرين،
فلا ضرر في عدم القيام بهذا التمرين.
ولكن بالطبع للقيام بهذا التمرين OAuth 2،
تحتاج إلى حساب Facebook لتكوين موفر OAuth الخاص بك على Facebook.
حتى الذهاب إلى هذا الموقع،
developers.facebook.com/apps، ستلاحظ أنك سوف تحتاج
إلى تسجيل الدخول من أجل الاستمرار إذا لم يتم تسجيل الدخول من المتصفح الخاص بك.
الآن يمكنك أن ترى أنني قمت بالفعل بتكوين بعض التطبيقات هنا
واختبارها.
الآن، لإنشاء تطبيق جديد انقر على إضافة تطبيق جديد.
وبعد ذلك يمكنك توفير اسم تطبيقك.
حتى أستطيع أن أقول Confusion3، وبعد ذلك يمكننا توفير البريد الإلكتروني للاتصال.
ثم اتبع الإجراء لإنشاء تطبيقك الجديد هنا.
وبمجرد إنشاء التطبيق، ستلاحظ على الفور أن
هناك معرف التطبيق الذي تم إنشاؤه لتطبيقك.
ثم لهذا التطبيق معين.
لذلك إذا كنت تسير على لوحة القيادة، سترى
قطعتين من المعلومات التي تحتاجها حقا من أجل المضي قدما.
أحدهما هو معرف التطبيق، لذا تأكد من إنشاء نسخة من معرف التطبيق.
والثاني هو سر التطبيق.
لذلك، يمكنك كتابة على زر العرض هنا وبعد ذلك ستحصل على سر التطبيق.
سر هنا حتى تتمكن من رؤية هذين ليست سوى سلاسل ASCII.
لذا قم بعمل نسخة من هذا لأنك تحتاج إلى تكوين خادم الخبراء الخاص بك
وكذلك تطبيق العميل الخاص بك مع هاتين القطعتين من المعلومات.
وبمجرد أن تحصل على عقد من ذلك ثم
يمكننا المضي قدما في بقية التمرين.
ستحتاج إلى الانتقال إلى لوحة المعلومات الخاصة بك من التطبيق الخاص بك.
وفي الإعدادات، كما ترون، في الإعدادات الأساسية هنا
يمكنك فقط إضافة منصة موقع على شبكة الإنترنت هنا.
ثم قم بتوفير عنوان URL كـ https///localhost3443.
وحفظ التغييرات هنا إلى التطبيق الخاص بك هنا.
بعد إضافة في الموقع هنا انتقل إلى الإعدادات المتقدمة.
ثم انقر فوق نعم لنقول
التطبيق الأصلي أو سطح المكتب هنا ونقول نعم لذلك ثم قم بحفظ التغييرات.
وفي الإعداد الأساسي في مجالات التطبيق، اكتب في
https://localhost:3443 وحفظ التغييرات.
بعد ذلك، انتقل إلى تعليمات التمرين لهذا التمرين.
وسترى أن هناك ملف index.html
التي قدمتها في موارد التمرين.
تحميل هذا الملف index.html، ومن ثم نقله إلى المجلد العمومي الخاص بك.
لذلك دعونا تحميل هذا الملف index.html.
بعد ذلك، انتقل إلى مجلد ConfusionServer في المجلد العمومي،
ترى أن لدي بالفعل ملف index.html.
أنا ذاهب لاستبدال هذا مع ملف index.html تحميلها
التي حصلت عليها للتو.
لقد قمت بحفظ هذا على سطح المكتب الخاص بي.
لذلك أنا فقط ذاهب لسحب هذا index.html
ثم استبدال ملف index.html في المجلد العام من بلدي كونفوسيونسيرفر.
بعد ذلك، والذهاب إلى المحرر، دعونا فتح ملف index.html.
وإذا قمت بفتحه سترى أنني قمت بالفعل بتكوين بعض
شفرة جافا سكريبت هنا.
رمز جافا سكريبت هذا حصلت على عقد من الفيسبوك حيث أنها
تحدد كيف يمكنك تكوين تطبيق ديف باستخدام هذا.
لذلك، لقد نسخت هذا من تعليمات الفيسبوك. على
وجه الخصوص ستلاحظ أنه في هذا الملف index.html،
هناك هذا الحقل أبيد هنا.
ستقوم باستبدال حقل AppID هذا
بمعرف العميل الذي حصلت عليه عن طريق تسجيل تطبيقك على Facebook.
لذا، هنا، أقوم باستبدال معرف هذا العميل
بمعرف تطبيقي الذي قمت بتسجيله في Facebook هنا.
وتحتاج إلى القيام بنفس الخطوة مع التطبيق
الذي تقوم بالتسجيل في Facebook، مع معرف التطبيق الذي تحصل عليه من Facebook.
ثم قم بحفظ التغييرات إلى index.html.
هذه الصفحة index.html التي لدي هنا سوف
تخلق زر تسجيل الدخول على صفحة index.html، والتي عند النقر عليها سوف
تساعدنا على تسجيل الدخول إلى الفيسبوك ومن ثم الحصول على رمز وصول من الفيسبوك.
بعد ذلك، انتقل إلى مجلد ConfusionServer،
سنقوم بتثبيت وحدة عقدة الرمز المميز لجواز السفر Facebook.
حتى في نوع موجه npm تثبيت
Passport-Facebook-token
وتثبيت وحدة العقدة هذه.
وكما ترون أنا باستخدام الإصدار 3.3.0 في هذه الدورة.
العودة إلى المحرر، افتح config.js.
وفي config.js سأقوم بإضافة
خاصية تسمى «facebook» إلى ملف config.js الخاص بي.
وداخل هنا، وسوف
تكوين بلدي كلينتيد
و كلينتسيكريت.
الآن، سوف كلينتيد يكون بالضبط ما تحصل عليه من الفيسبوك.
هنا، وسر العميل كما رأيت عندما قمت بتسجيل طلبك.
يمكنك الحصول على سلسلة ثانية هناك حتى نسخ هذه السلسلة
ثم لصقها في كلينتسيكريت هنا.
تأكد الآن من لصق هذا كسلسلة هنا.
وبالمثل، لصق في كلينتسيكريت في ملف config.js الخاص بي.
لذا، فإن تكوين هذا هنا سيساعدني على استخدام هذين حيث أحتاج في شفرتي.
بعد ذلك، كما أدركنا، كلما قام المستخدم
بتسجيل الدخول ثم يحصل على رمز الوصول ويمرره إلى خادمنا السريع.
سيستخدم الخادم السريع هذا الرمز المميز للوصول ويذهب
ويجلب معلومات الملف من خادم Facebook 0.
وبعد ذلك، بمجرد أن يصل إلى معلومات الملف الشخصي، سيقوم خادمنا السريع
بإنشاء حساب مستخدم جديد في تطبيقنا.
واستخدم معرّف Facebook كمؤشر في حساب الاستخدام هذا.
لذلك لاستيعاب هذا،
سوف نذهب إلى ملف user.js حيث لدينا تعريف نموذجنا.
لذلك بالإضافة إلى الاسم الأول والاسم الأخير،
وسوف أضيف أيضا في حقل هنا يسمى FacebookID،
وهو من نوع سلسلة هنا.
سيقوم FacebookID بتخزين FacebookID
للمستخدم الذي تم تمريره في رمز الوصول.
في الخطوة التالية سوف تظهر لك كيفية تكوين هذا.
ثم نقوم بتكوين استراتيجية الفيسبوك لدينا باستخدام جواز السفر الفيسبوك رمزية..
عندما يمر المستخدم في رمز الوصول،
فإنك سوف تكون جلب الملف الشخصي ومن ثم إعداد حساب
لهذا المستخدم في خادمنا المحلي هنا، في خادمنا السريع هنا.
سنقوم بتهيئة الاسم الأول والاسم الأخير و FacebookID.
ولكن بالطبع لن يحتوي هذا الحساب الخاص على كلمة مرور أو
بالأحرى التجزئة المثبتة المرتبطة بهذا.
لأنه، إذا قام المستخدم بتسجيل الدخول باستخدام هذا الحساب، فسيتعين عليه استخدام
جزء تسجيل الدخول على Facebook الخاص به لتسجيل الدخول إلى تطبيقنا.
بعد ذلك سوف نذهب لمصادقة ملف dark.js.
لذلك هذا حيث قمنا بإعداد جميع
استراتيجياتنا المختلفة لمصادقة جواز السفر.
حتى هنا بالإضافة إلى استراتيجية jwt
والاستراتيجية المحلية التي قمت بتكوينها هنا،
اسمحوا لي إنشاء FacebookTokenStrategy هنا.
ثم قم بتعيين كلمة المرور المطلوبة - facebook-token.
وهذا سيعطينا استراتيجية جديدة يمكننا
تكوينها في وحدة جواز السفر لدينا هنا.
لذلك، النزول في التعليمات البرمجية هنا، هناك حق،
في نهاية هذا الملف، وسوف أقوم بإنشاء،
FacebookPassport.use ().
وهكذا هذا هو المكان الذي أود أن تحديد فاسيبوتوكينستراتيجيتي جديدة هنا.
وبعد ذلك سوف نحدد تفاصيل هذا
FacebookTokenStrategy، والحق في هذه المرحلة هنا.
لذلك، في هذا فاسيبوتوكينستاي، كيف يمكننا التعامل مع هذه المشكلة؟
اسمحوا لي فقط التفاف حول كلمة التفاف بحيث يمكنك رؤية التعليمات البرمجية الكاملة.
لذلك بالنسبة لـ FacebookTokenStrategy، سنبدأ بالقول أولاً.
الجزء الأول من فاسيبوتوكتوكينستاي يأخذ كلينتيد.
التي لدينا التكوين في Config.Facebook.Clientid هنا
، والعميل، سر،
والتي أيضا قمنا بتكوين في، لدينا ملف التكوين هنا.
لذلك نحن في طريقنا إلى توفير هذا كمعلمة الأولى لهذه الاستراتيجية هنا.
ثم المعلمة الثانية، هي حيث تتحدى
وظيفة رد الاتصال التي تأتي في هذه المرحلة.
وبالتالي فإن وظيفة رد الاتصال هنا يحصل على ثلاث قيم.
لذلك يحصل AccessStoken،
RefreshToken، الملف الشخصي،
واستدعاء الاتصال كما هو الحال هنا.
لذلك هذه هي المعلمات الأربعة التي تأتي في وظيفة رد الاتصال التي سنقوم
بتكوينها في هذه المرحلة.
لذلك اسمحوا لي أن المسافة البادئة هذا الرمز في بحيث يكون أكثر وضوحا قليلا لرؤية.
وداخل وظيفة رد الاتصال هذه التي أقوم بتكوينها هنا،
سأقول أولاً User.Findone.
لذلك سنحاول معرفة ما إذا كان هذا مستخدم Facebook معين
قد قام بتسجيل الدخول في وقت سابق حتى
يتم تكوين الحساب بالفعل، مع FacebookID.
الآن من أين نحصل على فيسبوكيد؟
لاحظ أننا نحصل على هذا الملف الشخصي للمستخدم،
القادمة إلى هنا، حتى تتمكن من رؤية أن هذا الملف الشخصي يأتي كمعلمة.
سيحمل هذا الملف الشخصي الكثير من المعلومات القادمة من Facebook التي
يمكننا استخدامها في تطبيقنا.
يتم توفير AccessStoken، بالطبع، إلى الخادم من قبل المستخدم.
لذلك، بمجرد أن نحاول العثور على مستخدم واحد على الأقل مع معرف ملف تعريف Facebook،
لذلك إذا كان هذا المستخدم موجودًا، فقد وجدنا بالفعل أن المستخدم قد قام
بتسجيل الدخول إلى حسابنا مسبقًا باستخدام نهج Facebook.
لذلك، في هذه الحالة يمكننا المضي قدما وإلا سنقوم بإنشاء مستخدم جديد.
لذا، فإن وظيفة رد الاتصال هنا سيكون هناك معلمتين،
الخطأ والمستخدم هنا.
وهذه وظيفة رد الاتصال كما سنرى،
حسنا داخل هنا سوف نتحقق لمعرفة ما إذا كان (err).
حتى إذا كان هذا يسبب خطأ، ثم بالطبع
ما نحن بحاجة إلى القيام به هو العودة القيام به (خطأ، خطأ).
لذلك هذا كما ترون هو وظيفة رد الاتصال التي تأتي
كمعلمة لهذه الوظيفة هنا، لذلك
سنقوم استدعاء القيام به مع الخطأ و false.
إذا لم يكن خطأ ثم
سنقول إذا (! خطأ
&& المستخدم! == null).
حتى إذا كان المستخدم ليس فارغًا، فهذا يعني أننا وجدنا مستخدمًا في النظام
الذي لم يكن في وقت سابق مع هذا FacebookID معين، لذلك بالنسبة للمستخدم،
كل ما نحتاج إلى القيام به هو العودة (null،) نظرًا
لعدم وجود خطأ هنا، ثم سنقوم بإرجاع قيمة المستخدم لهذا هنا.
مما يعني أنه إذا قام المستخدم بتسجيل الدخول مسبقًا باستخدام
نهج Facebook، فسيكون المستخدم قد تم إنشاؤه بالفعل.
وهكذا، سيتم العثور على هذا المستخدم ومن ثم نحن فقط تمرير مرة أخرى هذا المستخدم.
إذا لم يكن كذلك، انظر إن لم يكن الجزء هو الجزء الأكثر إثارة للاهتمام من هذا التمرين.
إذا لم يكن المستخدم موجودًا، فنحن بحاجة إلى إنشاء مستخدم جديد.
الآن لإنشاء المستخدم الجديد، وسوف نقول المستخدم،
= مستخدم جديد، وعندما نقوم بإنشاء مستخدم جديد،
أذكر أننا بحاجة إلى تمرير في اسم المستخدم.
سيتم الحصول على اسم المستخدم من الملف الشخصي، وسيكون لملف تعريف Facebook الذي
تم إرجاعه حقل يسمى اسم DisplayName.
وهذا هو الحقل الذي سأستخدمه لإنشاء مستخدم جديد هنا.
لذلك سنقوم بإنشاء مستخدم جديد مع تعيين اسم المستخدم
يساوي DisplayName، وبعد إنشاء المستخدم،
ثم
سنقول User.FacebookID، = profile.id.
لذا ارجع إلى كائن الملف الشخصي هذا هنا،
ثم ضع معرف Facebook الخاص بالمستخدم إلى معرف الملف الشخصي.
بحيث في وقت لاحق، إذا كان نفس المستخدم يسجل الدخول،
وهذا البحث سوف تكون قادرة على العثور على هذا المستخدم في قاعدة البيانات لدينا.
ثم
سنقول user.firstname
= profile.name.GivenName
لذا يحتوي الملف الشخصي على كائن الاسم هذا،
والذي يحتوي على اسم معين واسم عائلة مرتبط بهذا.
يتم إرجاع هذا من ملف تعريف المستخدم على Facebook.
وأيضا user.lastname سنقوم
بتعيينه إلى ملف التعريف. name.FamilyName.
وبعد ذلك، بمجرد أن نقوم بإعداد كل هذه سوف نقول user.save.
لذلك نحن حفظ التغييرات للمستخدم
ومن ثم هذا سيعود خطأ والمستخدم.
لذلك، فإنه سيعود خطأ إذا تعذر إنشاء المستخدم،
وإلا فإنه سيعود المستخدم الذي تم إنشاؤه هنا.
لذلك في هذه الحالة سوف نقول، إذا (err)،
ثم سوف يعود القيام به (err،
false) لأننا لم نتمكن من إنشاء المستخدم.
آخر، تم إنشاء المستخدم بنجاح،
لذلك سنعود إلى القيام به (null، المستخدم).
لذلك بغض النظر عن الحالة،
إذا كان المستخدم موجودًا، فستجد هذا المستخدم وترجع القيمة.
إذا لم يكن المستخدم موجودًا، فستقوم بإنشاء مستخدم جديد استنادًا إلى
ملف تعريف المستخدم على Facebook الذي حصلنا عليه.
ثم إضافة في المستخدم الجديد إلى موقع الخادم لدينا، في قاعدة البيانات.
لذلك هذه هي الاستراتيجية التي نقوم بتكوين
لجواز سفرنا، و FacebookTokenStrategy الجديد.
لذلك سيمكننا هذا من العثور على المستخدم.
حتى الآن بعد أن قمنا بتكوين تطبيقنا إما
لإنشاء مستخدم أو العثور على المستخدم استنادًا إلى معرف Facebook.
الخطوة الأخيرة هي بالطبع لإدخال
مسار جديد في ملف users.js.
حتى في ملف users.js سوف نتذكر أن لدينا مسار التسجيل الذي
يسمح للمستخدم للاشتراك في حساب محلي مع اسم المستخدم وكلمة المرور.
ثم لديك تسجيل الدخول الذي يسمح للمستخدم بتسجيل الدخول باستخدام اسم المستخدم وكلمة
المرور.
ولكن الآن، سنستخدم Facebook لتسجيل الدخول إلى المستخدم.
حتى في هذه الحالة سوف نقول، router.get،
ونقطة النهاية ستكون /facebook/token.
لذلك إذا أرسل المستخدم طلب الحصول على المستخدمين/facebook/token،
فسنقوم بمصادقة المستخدم باستخدام
المصادقة المستندة إلى Facebook OAuth 2.
حتى هنا، سوف نقول passport.authenticate،
ونحن في طريقنا إلى المصادقة باستخدام استراتيجية الفيسبوك رمزية.
أذكر أننا قد قمنا بالفعل بتكوين هذا في ملف authenticate.js لدينا،
لذلك سنقوم بتكوين جواز السفر مصادقة استراتيجية facebook-token
ثم وظيفة رد الاتصال التي تحصل req، الدقة هنا.
لذلك اسمحوا لي، تبديل كلمة التفاف هنا،
حتى تتمكن من رؤية أن هذا هو router.get على نقطة النهاية هذه هنا.
ثم هنا، وسوف تكوين هذا التطبيق.
لذلك، في هذه المرحلة، نود أن نقول، إذا (req.user)، لاحظ الآن أنه عندما ندعو
passport.authenticate مع استراتيجية الفيسبوك token.
هذا، إذا كان ناجحًا،
فسيكون قد تم تحميله في المستخدم في كائن الطلب.
لذلك بحلول الوقت الذي نأتي إلى هذه النقطة هنا بعد
تنفيذ passport.authenticate فيسبوك-توكين وير الأوسط،
سيكون لديك المستخدم تحميلها بالفعل في كائن الطلب.
حتى إذا كان هذا هو الحال، ثم، سوف نقول، سنقوم بإنشاء رمز مميز.
سنقوم بإنشاء رمز ويب JSON هنا، تمامًا مثل الطريقة التي
أنشأنا بها رمز ويب JSON عندما يقوم المستخدم بتسجيل الدخول هنا.
لذا، نحن ذاهبون إلى نسخ ذلك هنا.
Authenticate.getToken، لذلك هذا سوف يحصل لنا رمز ويب JSON.
لذلك أساسا، يقوم المستخدم بإرسال رمز الوصول إلى الخادم السريع،
يستخدم الخادم السريع AccessStoken للذهاب إلى Facebook
ثم جلب الملف الشخصي للمستخدم.
وإذا لم يكن المستخدم موجودًا، فسننشئ مستخدمًا جديدًا باستخدام معرف Facebook هذا.
وبعد ذلك، سيقوم خادمنا السريع
بإنشاء رمز ويب JSON ثم إرجاع رمز ويب JSON إلى عميلنا.
سيتعين على جميع عمليات الوصول اللاحقة من مستخدمنا تضمين
رمز ويب JSON هذا الذي قمنا بإرجاعه للتو باستخدام هذا الأسلوب.
لذلك في هذه المرحلة لم تعد بحاجة إلى رمز الوصول إلى Facebook بعد الآن.
يمكنك تجاهل الرمز المميز للوصول إلى Facebook في هذه المرحلة لأن
رمز ويب JSON هو الرمز الذي يحافظ على مصادقة المستخدمين نشطًا
لأي مدة يكون فيها رمز ويب JSON هذا نشطًا.
الآن بالإضافة إلى ذلك، بالطبع نحن بحاجة أيضا إلى القيام بهذه الخطوات هنا.
لذلك أنا فقط ذاهب لنسخ ذلك الجزء هنا.
لأنني سأفعل بالضبط نفس الشيء في هذه الحالة أيضا،
لذلك سنقوم لصق في هذا الرمز هنا.
لذلك سنقول StatusCode = 200، نوع رأس المحتوى،
وبعد ذلك سنقول res.json قمت بتسجيل الدخول بنجاح، وهذا كل شيء.
لذلك مع هذا النهج، كما ترون، الآن باستخدام مكالمة إلى نقطة النهاية هذه.
سيمر تطبيق المستخدم، العميل في هذه الحالة، في رمز الوصول إلى Facebook الذي حصل عليه للتو من Facebook.
ثم سيستخدم خادمنا السريع رمز الوصول إلى Facebook
للتحقق من المستخدم على Facebook.
وبعد ذلك إذا تم الاعتراف بالمستخدم من قبل Facebook ليكون مستخدمًا
شرعيًا، فسيعود الخادم السريع لدينا رمز JSON wed إلى عميلنا.
ثم يتم مصادقة عميلنا
ومن ثم يمكن المضي قدما في تنفيذ العمليات الأخرى
باستخدام رمز JSON wed المميز في رأس جميع رسائل الطلب. في
وقت لاحق، تماما كما فعلنا مع استراتيجية المصادقة المحلية، هذا كل شيء.
لذلك أكملنا جميع التحديثات على طلبنا، دعونا حفظ التغييرات.
الذهاب إلى محطة لدينا، دعونا بدء تشغيل الخادم هنا،
لذلك سنقول بداية نبم، والخادم هو قيد التشغيل والتشغيل.
ولاحظت أنني قد كتبت في منفذ P-A-S-S-S،
وبالتالي تسبب هذا في خطأ هنا.
لذلك لاحظ أن كم هو سهل لجعل الأخطاء.
لذلك اسمحوا لي أن أذهب وتصحيح ذلك ومن ثم العودة وإعادة تشغيل الخادم الخاص بي.
لذلك، عندما تواجه أخطاء مثل هذه، لا داعي للذعر.
ننظر حولنا لمعرفة أين المشكلة وغالبا ما
تكون مشكلة بسيطة من هذا القبيل من شأنها أن تسبب أخطاء بالنسبة لك.
مرة أخرى، والعودة إلى users.js
وترى أنه في ملف authenticate.js،
لقد تكوين هذا القول P-A-S-S-S المنفذ.
حتى في ملف authenticate.js، اسمحوا لي إصلاح ذلك إلى passsport
ثم حفظ التغييرات ثم إعادة تشغيل الخادم الخاص بي.
الآن، إعادة تشغيل الخادم الخاص بي، لذلك الخادم الخاص بي هو الآن قيد التشغيل.
عند هذه النقطة، انتقل إلى متصفح.
وفي المتصفح، اكتب https://localhost3443.
إذا حدث أن تم تخزين هذه الصفحة مؤقتًا هنا، فقد ترغب في إزالة ذاكرة التخزين المؤقت.
أو مجرد كتابة لوكالهوست: 3343/index.html،
وبعد ذلك ستلاحظ على الفور أنه في هذا index.html،
سترى هذا الزر يسمى زر تسجيل الدخول.
لذلك نحن ذاهبون إلى النقر على زر تسجيل الدخول هذا لتسجيل الدخول إلى الفيسبوك.
دعونا تسجيل الدخول وبعد ذلك سوف تأتي مع هذه الرسالة هنا.
إذا قمت بتسجيل الدخول بالفعل إلى Facebook في وقت سابق،
فسيطلب الإذن للمتابعة كمستخدم.
إذا لم يكن الأمر كذلك، فسيطلب منك تسجيل الدخول إلى Facebook باستخدام
ثم السماح لك بالمتابعة.
منذ أن قمت بتسجيل الدخول إلى Facebook في وقت سابق قليلاً، حتى
أتمكن من النقر فقط على متابعة.
الآن، افتح وحدة تحكم جافا سكريبت للمطورين في الأسفل هنا.
وفي وحدة تحكم جافا سكريبت، ترى مجموعة من الرسائل المطبوعة هنا.
ثم على وجه الخصوص،
افتح هذا الكائن الذي ستراه في وحدة تحكم جافا سكريبت.
وداخل هذا الكائن، سترى هذا الرد البديل هنا.
وهناك، سترى أداة الوصول موجودة هناك.
الآن، هذا هو الرد الذي يتم الحصول عليه من الفيسبوك أو
الخروج إلى خادم المصادقة من خلال التطبيق لدينا هنا.
وسأقوم ببساطة بنسخ هذا،
لأن هذا هو رمز الوصول الذي قدمه لنا Facebook.
الآن، أنا بحاجة إلى إعطاء رمز الوصول هذا إلى الخادم السريع الخاص بي من أجل
أن تذهب والتحقق من ملف التعريف الخاص بي، ومن ثم اسمحوا لي بتسجيل الدخول إلى هذا التطبيق.
لذلك أنا أفعل هذا بطريقة مشدودة
هنا ببساطة لأنني أردت أن تظهر لك كيف يأتي رمز الوصول هنا.
وننسخ رمز الوصول، ثم سآخذ هذا
واستخدم ساعي البريد لإرسال رمز الوصول هذا إلى خادم Express الخاص بي.
الآن، عند تصميم تطبيق ويب مثل Angular، أو
التطبيق الأيوني، أو تطبيق NativeScript، لا تحتاج إلى القيام بكل هذه الخطوات.
الآن، بشكل أساسي عندما يتم إرجاع رمز الوصول إلى تطبيق الويب الخاص بك، أو
تطبيق Angular، أو التطبيق الأيوني، أو تطبيق NativeScript،
عليك ببساطة التقاط رمز الوصول هذا هناك.
ثم ستقوم بتمرير رمز الوصول هذا إلى
خادم Express باستخدام XMLHttpRequest للحصول على المعلومات.
ولكن بما أنني أردت توضيح الخطوات يدويًا.
لذلك، أنا إعداد هذا index.html مع
رمز جافا سكريبت بسيط أن الفيسبوك يوفر لي.
حتى أتمكن من استرداد رمز التفويض هذا الذي حصلنا عليه من
Facebook.
لذلك اسمحوا لي بنسخ هذا الرمز المميز للتفويض.
الآن، سنذهب إلى ساعي البريد، ثم نحاول
معرفة كيف يمكننا الحصول على رمز ويب JSON من خادم Express الخاص بنا.
الآن، الذهاب إلى ساعي البريد، من ساعي البريد،
اسمحوا لي الآن أن أفعل طلب جيت إلى
لوكالهوست: 3443user'sfacebookToken.
وعندما أرسل هذا الطلب إلى هذه النقطة،
فإن التكوين الآخر الذي أحتاج إلى القيام به هنا هو
أنني بحاجة إلى تمرير رمز الوصول هذا الذي حصلت عليه للتو.
الآن، لتمرير رمز وصول في الرأس،
يمكنني تمريره كرأس تخويل عن طريق كتابة التفويض.
ولكن لاحظ أنه يجب كتابة القيمة كـ Beta برأس مال B في هذه الحالة،
ثم قم بلصق رمز الوصول هذا الذي حصلنا عليه من Facebook هنا.
لاحظ العاصمة B هنا،
وبعد ذلك يمكنك تمرير هذا إلى خادمنا.
ثم عند الرد من خادمنا،
سترى أنك قد حصلت على رمز ويب JSON من موقع الخادم الخاص بنا.
لذلك هذه هي إحدى الطرق التي تحصل فيها على رمز ويب JSON عن طريق تبادل
رمز الوصول الخاص بك من Facebook الذي حصلت عليه للتو مع خادم Express الخاص بك.
وسيذهب خادم Express الخاص
بك بدوره ويحصل على معلومات ملفك الشخصي من Facebook،
ثم ينشئ حسابًا خصيصًا لك،
ثم يعيد لك رمز ويب JSON إذا كان كل شيء ناجحًا.
طريقة أخرى لتمرير هذه المعلومات في الرأس،
يمكنك كتابة access_token كمفتاح.
وفي القيمة، يمكنك فقط كتابة
رمز الوصول مثل هذا هنا، وبعد ذلك يمكنك إرسال الطلب ونفس الشيء.
سيعود مرة أخرى رمز ويب JSON لك.
ثم يمكنك التقاط رمز ويب JSON، ثم الاستمرار في
بقية الوصول إلى الخادم السريع الخاص بك باستخدام رمز ويب JSON هذا.
النهج الثالث هو تضمين هذا في
عنوان URL نفسه كمعلمة استعلام.
النهج الثالث هو القول رمزية؟ access_token =
ثم قم بلصق رمز ويب JSON في معلمة الاستعلام هذه.
لا تستخدم علامات الاقتباس هنا، فقط رمز ويب JSON نفسه.
ثم أرسل الطلب إلى الخادم الخاص بك.
وبعد ذلك سيعود الخادم الخاص بك رمز ويب JSON المقابل.
لذلك ترى ثلاث طرق مختلفة يمكنك تحليلها في Facebook Access Token
الخاص بك إلى الخادم الخاص بك، ثم الحصول على رمز ويب JSON من خادمك.
وبعد ذلك، بقية هذه الخطوات المضي قدما تماما كما كان من قبل.
الآن لإقناعك أنه في الواقع تم إنشاء حساب جديد مع
ملف تعريف الفيسبوك لهذا المستخدم معين، دعونا نذهب إلى المحطة.
في المحطة، في نافذة محطة جديدة، سأبدأ تموج مونغو هنا.
حتى في تموج مونغو، اسمحوا لي أن أقول، استخدم الارتباك.
ثم سأقول، db.users.find () .prety ()،
ثم طباعة جميع المستخدمين المسجلين في النظام الخاص بي.
لاحظت أن المستخدمين الثلاثة التي قمنا بتكوينها في التدريبات السابقة
كلها هناك.
لاحظ بالإضافة إلى ذلك مستخدم رابع تمت إضافته للتو في.
ولاحظ أنه بالنسبة لهذا المستخدم بالذات، ليس لدينا التجزئة في المصدر حتى الآن،
ولكن بدلاً من ذلك يتم إعداد FacebookID لهذا
المستخدم، ويتم إعداد اسم المستخدم ليكون تلك القيمة، ويتم إعداد الاسم الأول هناك.
وأيضا كان يجب أن يتم إعداد الاسم الأخير هنا ولكن
أعتقد أن هناك خطأ صغير في التعليمات البرمجية الخاصة بي.
لذلك سأذهب وأتحقق من جزء اسم العائلة منه هناك.
الذهاب إلى authenticate.js.
دعني أرى إن كنت أخطأت هنا
ها نحن ذا
كتبت في اسم F-A-M-I-L-Y.
لذا كما ترى، حتى أنا لست حول ارتكاب الأخطاء.
لذلك يجب أن يكون هذا اسم العائلة هنا،
user.lastname الملف الشخصي.name.familyName هنا.
لذلك اسمحوا لي حفظ التغييرات، والآن يجب أن تعمل التعليمات البرمجية بشكل صحيح.
مرة أخرى العودة إلى المحطة،
ترى الآن أنه تم إنشاء مستخدم جديد مع ملف تعريف Facebook هنا.
الآن في أي وقت لاحق حاولت مصادقة نفسي باستخدام Facebook
هي نفس العملية.
حصلت على رمز الوصول من Facebook
ثم تحليل في رمز الوصول إلى الخادم السريع الخاص بي.
سيذهب خادمي السريع إلى Facebook، وجلب الملف الشخصي
ثم تحقق لمعرفة ما إذا كان المستخدم موجودًا بالفعل.
وفي تسجيل الدخول اللاحق الذي أقوم به باستخدام Facebook،
أجد أن هذا المستخدم معين موجود بالفعل في النظام.
لذلك، فإنه سيتم ببساطة المضي قدما وسيتم مصادقة المستخدم
ومن ثم سيصدر الخادم الإضافي رمز ويب JSON
لعميله ويمكننا المضي قدما من هذه النقطة فصاعدا تماما كما كان من قبل.
كما ترى، فإن إعداد المصادقة المستندة إلى OAuth 2 باستخدام
مزود خدمة OAuth 2 مثل Facebook ليس بهذه الصعوبة شريطة أن نحصل على
وحدة استراتيجية مصادقة Facebook المناسبة.
مثل رمز Passport Facebook المميز الذي يعتني بالفعل بالكثير من
العمل نيابة عنا ثم يمكننا من إعداد الخادم السريع لدينا
للتعامل مع مصادقة الطرف الثالث استنادًا إلى OAuth 2 من Facebook.
مع هذا، نكمل هذا التمرين.
في هذا التمرين، تعلمنا كيفية إجراء جميع مصادقة OAuth 2
باستخدام Facebook كمصادقة OAuth 2 المقدمة.
هذا هو الوقت المناسب لك لحفظ التغييرات التي قمت بها على
مستودع Git الخاص بك مع جواز سفر الرسالة Facebook.
[ موسيقى]