الآن بعد أن أكملنا تنفيذ
خادم REST API باستخدام Express و MongoDB في هذه الدورة،
فإن التفكير الفوري التالي الذي قد يحدث في عقلك هو،
نظرًا لأننا قمنا بالفعل بتطوير تطبيقات العميل في الدورات السابقة،
كيف يمكننا دمج الاثنين معًا بحيث يكون قادر على
التفاعل مع خادم REST API الكامل الذي قمنا بتطويره في هذه الدورة؟
إذن، هذا ما سندرسه في
هذه المحاضرة والممارسين اللذين يتابعان هذه المحاضرة.
لذلك، في نهاية هذا الدرس،
سيكون لديك React Client التي ستكون
قادرة على التواصل مع الخادم الذي قمت بتطويره للتو في
هذه الدورة وتكون قادرة
على دعم عرض جانب العميل الكامل للتطبيق بأكمله.
وبهذه الطريقة سوف نرى أننا قد وضعت
نهاية كاملة إلى نهاية
التطبيق من جانب العميل على طول الطريق إلى جانب الخادم في هذه الدورة.
لدمج العميل والخادم،
كما أدركنا أن خادمنا تم
تنفيذه بالفعل لدعم واجهة برمجة تطبيقات REST كاملة.
من جانب العميل،
سواء كان العميل الزاوي أو العميل
الأيوني أو عميل البرنامج النصي الأصلي،
فإنها تتفاعل جميعها مع الخادم باستخدام نقاط النهاية REST API.
لذلك، عندما يرسل العميل الطلب إلى الخادم عند نقطة نهاية REST API،
سيستجيب الخادم مع بيانات JSON المقابلة مرة أخرى إلى العميل.
يمكن للعميل بعد ذلك الاستفادة من بيانات JSON لعرض طرق العرض للمستخدم.
لذلك، بالنظر إلى هذا الفهم للتواصل بين العميل والخادم،
يجب أن يكون التكامل واضحًا إلى حد ما.
الآن بعد أن حصلنا على مصادقة المستخدم المضمنة في جانب الخادم الخاص بنا،
نحتاج إلى تحديث تطبيقات العميل الخاصة بنا
لتمكينهم من إجراء مصادقة المستخدم على جانب الخادم
عن طريق نشر معلومات تسجيل الدخول إلى الخادم ثم
الحصول على رمز المصادقة من
جانب الخادم وبعد ذلك التواصل مع الخادم
بما في ذلك رمز المصادقة في رأس رسائل الطلب.
لذلك، كل هذا يعني أننا بحاجة إلى إجراء تعديلات طفيفة
على كل من العميل والخادم بحيث يمكن للاثنين التواصل مع بعضها البعض.
أحد الجوانب التي لم أتعامل معها في التمرين سابقًا
هو كيفية تعامل الخادم مع معلمات الاستعلام التي تأتي من جانب العميل.
لذلك، كما أدركنا،
عندما يرسل جانب العميل طلبًا للحصول
على طبق مميز أو قائد مميز أو عرض ترويجي مميز،
رأينا أن عنوان URL يتضمن،
ميزة علامة استفهام الأطباق تساوي
الصواب في عنوان URL للطلب الذي يأتي من جانب العميل.
الآن، في البيانات على جانب الخادم،
رأينا بالفعل أن الطبق
أو الترويج أو القائد يتضمن العلم المميز بالفعل في بيانات JSON.
لذلك، عندما يأتي هذا الطلب إلى جانب الخادم،
فيجب أن يكون الخادم قادرًا على استخراج
معلمة الاستعلام هذه من الطلب الوارد ثم
القيام بشكل مناسب باستعلام
MongoDB ثم الحصول على النتائج فقط حيث يتم تعيين هذه العلامة المميزة إلى true.
لذلك، للقيام بذلك كما رأينا،
عنوان URL الذي يتم استخدامه لإرسال الطلب إلى الخادم هو،
علامة استفهام أطباق مائلة مميزة تساوي true.
لذا، هذه هي الطريقة التي سنقوم بتزويد معلمات الاستعلام إلى جانب الخادم الخاص بنا.
الآن بالإضافة إلى ذلك، عندما يتم تلقي هذه المعلومات على جانب الخادم،
والآن رأينا أنه في وقت سابق عندما فعلنا طلب الحصول على جانب الخادم،
قلنا ببساطة الأطباق تجد وبعد ذلك سوف نجد
جميع الأطباق ومن ثم إعادتها عندما
يتم إرسال طلب الحصول إلى طبق جهاز التوجيه الخط المائل .
وينطبق نفس المنطق على كل من جهاز التوجيه الترويجي وكذلك على جهاز التوجيه الزعيم.
الآن، عندما تقوم بتضمين معلمة استعلام مثل ذلك في عنوان URL،
كيف سيتمكن جانب الخادم من استخراج معلمة الاستعلام هذه؟
لذلك، هذا هو المكان،
عندما يحتوي الطلب الوارد على معلمة الاستعلام هذه المرفقة بعنوان URL الوارد،
سيقوم الخادم السريع بمعالجة ذلك تلقائيًا وتحويله إلى
كائن JSON يتم تحميله على رسالة طلب قادمة على جانب الخادم.
الآن، هذا متاح على جانب الخادم في شكل req.query.
لذا، سيتم تحويل معلمات الاستعلام التي تضمينها في عنوان URL إلى
كائنات JSON المقابلة مع مجموعة المعلومات كما
هو موضح هنا ثم تحميلها على كائن الطلب على جانب الخادم.
لذلك، باستخدام req.query على جانب الخادم،
سنكون قادرين على الحصول على معلمات الاستعلام هذه.
لذلك، عند إجراء طلب الحصول على جانب الخادم تقول
dishes.find ثم تقوم بتضمين req.query في البحث هناك.
وبالتالي، عندما يتم
الاستعلام عن MongoDB ثم
سيتم استخراج تلك السجلات فقط أو تلك الوثائق التي تم تعيين المميز لها إلى true من MongoDB وتوفيرها مرة أخرى
لنا داخل هذه الطريقة الحصول هنا ومن ثم يمكن إرجاعها إلى جانب العميل.
لذا، هذا بسيط مثل ذلك في التعامل مع معلمات الاستعلام على جانب الخادم الخاص بنا.
لذلك، هذا التحديث سوف نفعل لكل من جهاز التوجيه طبق، جهاز
التوجيه الترويجي، وجهاز التوجيه زعيم على جانب الخادم لدينا.
الجزء التالي هو،
بالطبع، مصادقة المستخدم.
لذلك، كما أدركنا،
على جانب الخادم لدينا بالفعل
نقاط نهاية واجهة برمجة تطبيقات REST التي هي مفيدة لمصادقة المستخدم،
ولا سيما عند إجراء مشاركة لشرطة
مائلة للمستخدمين تسجيل الدخول باستخدام اسم المستخدم وكلمة المرور،
ثم سوف تكون قادرة على مصادقة المستخدم على الخادم الجانب.
الآن، عندما تتم مصادقة المستخدم على جانب الخادم بنجاح،
فستتضمن رسالة الرد القادمة من جانب الخادم رمز
JSON Web Token في نص الرد الخاص برسالة الرد الواردة من جانب الخادم.
لذلك، على جانب العميل،
يجب أن نكون قادرين على استخراج هذا الرمز المميز ثم استخدام هذا الرمز المميز في وقت لاحق.
لذلك، عندما يتلقى العميل رسالة الرد من
جانب الخادم ويتم مصادقة المستخدم بنجاح على جانب الخادم،
ستحتوي رسالة الرد على رمز JSON Web Token،
الذي يجب استخراجه،
وبعد ذلك يجب على العميل تضمين JSON Web Token هذا
في لكل طلب صادر من جانب العميل.
يتم تحقيق ذلك عن طريق حفظ رمز JSON Web Token إلى التخزين المحلي.
بعد ذلك، لكل طلبات جلب نصدرها،
يمكننا إعداد رأس التفويض لاحتواء رمز JSON Web Token.
الآن، عملية الخروج واضحة إلى حد ما،
إذا قمنا بتدمير رمز JSON Web Token الذي لدينا على جانب
العميل، فلن يتمكن العميل من الوصول إلى الخادم.
لذا، فهي بسيطة مثل تدمير رمز
JSON Web Token على جانب العميل لتسجيل الخروج من هذا العميل.
لذلك، وبالنظر إلى هذا الفهم،
دعونا نرى الخطوات التي تشارك في
القيام مصادقة المستخدم على التعامل مع مصادقة المستخدم على جانب العميل.
لذا، للتعامل مع مصادقة المستخدم على جانب العميل،
سيقوم العميل بإرسال طلب نشر إلى نقطة نهاية تسجيل الدخول إلى شرطة مائلة للمستخدمين،
وسيحتوي نص طلب المشاركة على اسم المستخدم وكلمة المرور.
نحن نستخدم مصادقة تسجيل الدخول في هذه الحالة.
الآن، لمصادقة Facebook، مرة أخرى
، هذا إعداد مختلف لن أناقشه الآن.
ولكن نص الطلب كما ترى
للمصادقة المحلية سيحتوي على اسم المستخدم وكلمة المرور.
لذلك، عندما تتم مصادقة المستخدم بنجاح على جانب الخادم،
سيقوم الخادم بالرد مرة أخرى
على العميل من خلال تضمين رمز ويب JSON في رسالة الرد.
لذلك، عندما يتلقى العميل رسالة الرد من جانب الخادم،
فسيتعين على العميل التقاط رمز ويب JSON هذا ثم
حفظ JSON Web Token في التخزين المحلي على جانب العميل.
بعد ذلك، يجب على العميل تضمين هذا الرمز المميز في كل طلب صادر.
إذن، كيف يتم إنجاز ذلك على جانب العميل؟
أولا وقبل كل شيء، نحن بحاجة إلى حفظ JSON Web Token في التخزين المحلي.
الآن، يتم إنجاز ذلك داخل منشئ الإجراءات الذي يتعامل مع عملية تسجيل دخول المستخدم.
لذلك، عندما يتم النشر إلى الخادم من منشئ الحث من جانب العميل،
فإن رسالة الرد سوف تحتوي على الرمز المميز،
ويتم حفظ هذا الرمز المميز في منشئ الإجراءات الذي يعالج عملية تسجيل دخول المستخدم.
الآن بعد ذلك، عندما يتم أي طلب جلب،
ثم يمكننا بسهولة تعيين رأس التفويض في طلب الجلب الصادر.
الآن، بمجرد أن يقوم العميل بتسجيل الخروج،
سيتم تدمير رمز JSON Web Token على جانب العميل.
لذلك بعد ذلك، لن تحتوي الطلبات الصادرة على رمز
JSON Web Token بعد الآن لأن JSON Web Token غير موجود على جانب العميل.
وبالتالي، يفقد المستخدم المصادقة.
لذا، هذه هي الطريقة التي سنتعامل بها مع تسجيل الدخول وعملية الخروج على جانب العميل.
من خلال التواصل مع الخادم ثم الحصول على رمز ويب JSON
ثم تضمين رمز ويب JSON في كل طلب صادر.
الآن، مع هذا الفهم لكيفية تفاعل العميل والخادم،
دعونا ننتقل الآن إلى التدريبين التاليين.
أولا، سنقوم بتحديث جانب الخادم مع بعض الإضافات بحيث
يمكن أن تتكامل بشكل جيد مع جانب العميل لدينا.
بعد ذلك، سنقوم بتحديث جانب العميل أو بالأحرى سأعطيك
تطبيق عميل كامل الذي أخذته
من قوة رد الفعل السابقة وتكييفه، وتحديثه.
لذلك، سوف نتعامل مع كل من هذه في التدريبين المقبلين،
وفي نهاية ذلك سوف نفهم كيفية دمج العميل والخادم الخاص بك.