Cloud Firestore Web Codelab

1. نظرة عامة

الأهداف

في هذا الدرس التطبيقي حول التعليمات البرمجية، ستنشئ تطبيق ويب لتوصيات المطاعم مدعومًا من Cloud Firestore .

img5.png

ما ستتعلمه

  • قراءة البيانات وكتابتها إلى Cloud Firestore من تطبيق الويب
  • استمع إلى التغييرات في بيانات Cloud Firestore في الوقت الفعلي
  • استخدم مصادقة Firebase وقواعد الأمان لتأمين بيانات Cloud Firestore
  • اكتب استعلامات Cloud Firestore المعقدة

ماذا ستحتاج

قبل البدء بهذا الدرس التطبيقي حول الترميز، تأكد من تثبيت ما يلي:

  • npm الذي يأتي عادةً مع Node.js - يوصى باستخدام Node 16+
  • محرر IDE/النصوص الذي تختاره، مثل WebStorm أو VS Code أو Sublime

2. إنشاء وإعداد مشروع Firebase

إنشاء مشروع Firebase

  1. في وحدة تحكم Firebase ، انقر فوق إضافة مشروع ، ثم قم بتسمية مشروع Firebase FriendlyEats .

تذكر معرف المشروع لمشروع Firebase الخاص بك.

  1. انقر فوق إنشاء مشروع .

يستخدم التطبيق الذي سنقوم بإنشائه بعض خدمات Firebase المتوفرة على الويب:

  • مصادقة Firebase للتعرف على المستخدمين بسهولة
  • Cloud Firestore لحفظ البيانات المنظمة على السحابة والحصول على إشعار فوري عند تحديث البيانات
  • استضافة Firebase لاستضافة أصولك الثابتة وخدمتها

بالنسبة لهذا الدرس التطبيقي المحدد حول التعليمات البرمجية، قمنا بالفعل بتكوين استضافة Firebase. ومع ذلك، بالنسبة لـ Firebase Auth وCloud Firestore، سنرشدك خلال عملية تكوين الخدمات وتمكينها باستخدام وحدة تحكم Firebase.

تمكين المصادقة المجهولة

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

ستحتاج إلى تمكين تسجيل الدخول المجهول.

  1. في وحدة تحكم Firebase، حدد موقع قسم البناء في شريط التنقل الأيمن.
  2. انقر فوق "المصادقة" ، ثم انقر فوق علامة التبويب "طريقة تسجيل الدخول " (أو انقر هنا للانتقال مباشرة إلى هناك).
  3. قم بتمكين موفر تسجيل الدخول المجهول ، ثم انقر فوق "حفظ" .

img7.png

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

تمكين سحابة Firestore

يستخدم التطبيق Cloud Firestore لحفظ واستقبال معلومات وتقييمات المطعم.

ستحتاج إلى تمكين Cloud Firestore. في قسم الإنشاء بوحدة تحكم Firebase، انقر فوق Firestore Database . انقر فوق إنشاء قاعدة بيانات في جزء Cloud Firestore.

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

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      //
      // WARNING: These rules are insecure! We will replace them with
      // more secure rules later in the codelab
      //
      allow read, write: if request.auth != null;
    }
  }
}

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

3. احصل على نموذج التعليمات البرمجية

انسخ مستودع GitHub من سطر الأوامر:

git clone https://github.com/firebase/friendlyeats-web

من المفترض أن يتم استنساخ نموذج التعليمات البرمجية في دليل 📁 friendlyeats-web . من الآن فصاعدًا، تأكد من تشغيل جميع أوامرك من هذا الدليل:

cd friendlyeats-web/vanilla-js

قم باستيراد تطبيق البداية

باستخدام IDE (WebStorm، Atom، Sublime، Visual Studio Code...) لفتح أو استيراد دليل 📁 friendlyeats-web . يحتوي هذا الدليل على رمز البداية لبرنامج Codelab الذي يتكون من تطبيق توصيات المطاعم الذي لم يعمل بعد. سنجعله فعالاً خلال هذا الدرس التطبيقي حول التعليمات البرمجية، لذا ستحتاج إلى تعديل التعليمات البرمجية في هذا الدليل قريبًا.

4. قم بتثبيت واجهة سطر أوامر Firebase

تتيح لك واجهة سطر أوامر Firebase (CLI) خدمة تطبيق الويب الخاص بك محليًا ونشر تطبيق الويب الخاص بك على استضافة Firebase.

  1. قم بتثبيت واجهة سطر الأوامر (CLI) عن طريق تشغيل الأمر npm التالي:
npm -g install firebase-tools
  1. تحقق من تثبيت واجهة سطر الأوامر (CLI) بشكل صحيح عن طريق تشغيل الأمر التالي:
firebase --version

تأكد من أن إصدار Firebase CLI هو v7.4.0 أو إصدار أحدث.

  1. قم بتخويل Firebase CLI عن طريق تشغيل الأمر التالي:
firebase login

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

  1. تأكد من وصول سطر الأوامر إلى الدليل المحلي لتطبيقك.
  2. قم بربط تطبيقك بمشروع Firebase الخاص بك عن طريق تشغيل الأمر التالي:
firebase use --add
  1. عند المطالبة، حدد معرف المشروع الخاص بك، ثم قم بإعطاء مشروع Firebase الخاص بك اسمًا مستعارًا.

يكون الاسم المستعار مفيدًا إذا كانت لديك بيئات متعددة (الإنتاج، والتجهيز، وما إلى ذلك). ومع ذلك، بالنسبة لهذا الدرس التطبيقي حول التعليمات البرمجية، فلنستخدم الاسم default .

  1. اتبع التعليمات المتبقية في سطر الأوامر الخاص بك.

5. قم بتشغيل الخادم المحلي

نحن على استعداد لبدء العمل فعليًا على تطبيقنا! لنقم بتشغيل تطبيقنا محليًا!

  1. قم بتشغيل أمر Firebase CLI التالي:
firebase emulators:start --only hosting
  1. يجب أن يعرض سطر الأوامر الاستجابة التالية:
hosting: Local server: http://localhost:5000

نحن نستخدم محاكي Firebase Hosting لخدمة تطبيقنا محليًا. يجب أن يكون تطبيق الويب متاحًا الآن من http://localhost:5000 .

  1. افتح تطبيقك على http://localhost:5000 .

يجب أن تشاهد نسختك من FriendlyEats التي تم ربطها بمشروع Firebase الخاص بك.

لقد اتصل التطبيق تلقائيًا بمشروع Firebase الخاص بك وقام بتسجيل دخولك بصمت كمستخدم مجهول.

img2.png

6. اكتب البيانات إلى Cloud Firestore

في هذا القسم، سنكتب بعض البيانات إلى Cloud Firestore حتى نتمكن من ملء واجهة المستخدم الخاصة بالتطبيق. يمكن القيام بذلك يدويًا عبر وحدة تحكم Firebase ، ولكننا سنفعل ذلك في التطبيق نفسه لإظهار الكتابة الأساسية لـ Cloud Firestore.

نموذج البيانات

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

img3.png

وفي وقت لاحق، سنقوم بتخزين كل تقييم في مجموعة فرعية تسمى ratings ضمن كل مطعم.

img4.png

إضافة المطاعم إلى Firestore

كائن النموذج الرئيسي في تطبيقنا هو مطعم. لنكتب بعض التعليمات البرمجية التي تضيف مستند مطعم إلى مجموعة restaurants .

  1. من الملفات التي قمت بتنزيلها، افتح scripts/FriendlyEats.Data.js .
  2. ابحث عن الوظيفة FriendlyEats.prototype.addRestaurant .
  3. استبدل الدالة بأكملها بالكود التالي.

FriendlyEats.Data.js

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

يضيف الكود أعلاه مستندًا جديدًا إلى مجموعة restaurants . تأتي بيانات المستند من كائن JavaScript عادي. نقوم بذلك عن طريق الحصول أولاً على مرجع لمجموعة restaurants Cloud Firestore ثم add البيانات.

دعونا نضيف المطاعم!

  1. ارجع إلى تطبيق FriendlyEats في متصفحك وقم بتحديثه.
  2. انقر فوق إضافة بيانات وهمية .

سيقوم التطبيق تلقائيًا بإنشاء مجموعة عشوائية من كائنات المطاعم، ثم يقوم باستدعاء وظيفة addRestaurant الخاصة بك. ومع ذلك، لن تتمكن بعد من رؤية البيانات في تطبيق الويب الفعلي الخاص بك لأننا ما زلنا بحاجة إلى تنفيذ استرداد البيانات (القسم التالي من الدرس التطبيقي حول التعليمات البرمجية).

إذا انتقلت إلى علامة التبويب Cloud Firestore في وحدة تحكم Firebase، فمن المفترض أن تشاهد الآن مستندات جديدة في مجموعة restaurants !

img6.png

تهانينا، لقد قمت للتو بكتابة البيانات إلى Cloud Firestore من تطبيق ويب!

في القسم التالي، ستتعرف على كيفية استرداد البيانات من Cloud Firestore وعرضها في تطبيقك.

7. عرض البيانات من Cloud Firestore

ستتعرف في هذا القسم على كيفية استرداد البيانات من Cloud Firestore وعرضها في تطبيقك. الخطوتان الرئيسيتان هما إنشاء استعلام وإضافة مستمع لقطة. سيتم إخطار هذا المستمع بجميع البيانات الموجودة التي تطابق الاستعلام وسيتلقى التحديثات في الوقت الفعلي.

أولاً، لنقم بإنشاء الاستعلام الذي سيخدم قائمة المطاعم الافتراضية التي لم تتم تصفيتها.

  1. ارجع إلى الملف scripts/FriendlyEats.Data.js .
  2. ابحث عن الوظيفة FriendlyEats.prototype.getAllRestaurants .
  3. استبدل الدالة بأكملها بالكود التالي.

FriendlyEats.Data.js

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

في الكود أعلاه، نقوم بإنشاء استعلام يقوم باسترداد ما يصل إلى 50 مطعمًا من مجموعة المستوى الأعلى المسماة restaurants ، والتي يتم ترتيبها حسب متوسط ​​التقييم (حاليًا كلها صفر). بعد أن أعلنا عن هذا الاستعلام، نقوم بتمريره إلى طريقة getDocumentsInQuery() المسؤولة عن تحميل البيانات وعرضها.

سنفعل ذلك عن طريق إضافة مستمع لقطة.

  1. ارجع إلى الملف scripts/FriendlyEats.Data.js .
  2. ابحث عن الوظيفة FriendlyEats.prototype.getDocumentsInQuery .
  3. استبدل الدالة بأكملها بالكود التالي.

FriendlyEats.Data.js

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

في الكود أعلاه، سيؤدي query.onSnapshot إلى تشغيل رد الاتصال الخاص به في كل مرة يحدث فيها تغيير في نتيجة الاستعلام.

  • في المرة الأولى، يتم تشغيل رد الاتصال مع مجموعة النتائج الكاملة للاستعلام - أي مجموعة restaurants بأكملها من Cloud Firestore. ثم يقوم بتمرير جميع المستندات الفردية إلى وظيفة renderer.display .
  • عندما يتم حذف مستند، change.type يساوي تمت removed . لذا، في هذه الحالة، سنستدعي دالة تزيل المطعم من واجهة المستخدم.

الآن بعد أن قمنا بتنفيذ كلتا الطريقتين، قم بتحديث التطبيق وتحقق من أن المطاعم التي شاهدناها سابقًا في وحدة تحكم Firebase أصبحت الآن مرئية في التطبيق. إذا أكملت هذا القسم بنجاح، فسيقوم تطبيقك الآن بقراءة البيانات وكتابتها باستخدام Cloud Firestore!

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

img5.png

8. احصل على بيانات ().

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

سنرغب في تنفيذ طريقة يتم تشغيلها عندما ينقر المستخدم على مطعم معين في تطبيقك.

  1. ارجع إلى ملف scripts/FriendlyEats.Data.js الخاص بك.
  2. ابحث عن الوظيفة FriendlyEats.prototype.getRestaurant .
  3. استبدل الدالة بأكملها بالكود التالي.

FriendlyEats.Data.js

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

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

img1.png

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

9. فرز البيانات وتصفيتها

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

فيما يلي مثال لاستعلام بسيط لجلب جميع مطاعم Dim Sum :

var filteredQuery = query.where('category', '==', 'Dim Sum')

كما يوحي اسمها، فإن الطريقة where() ستجعل استعلامنا يقوم بتنزيل أعضاء المجموعة الذين تفي حقولهم بالقيود التي وضعناها فقط. في هذه الحالة، سيتم فقط تنزيل المطاعم التي تكون category Dim Sum .

في تطبيقنا، يمكن للمستخدم ربط عدة عوامل تصفية لإنشاء استعلامات محددة، مثل "بيتزا في سان فرانسيسكو" أو "المأكولات البحرية في لوس أنجلوس مرتبة حسب الشعبية".

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

  1. ارجع إلى ملف scripts/FriendlyEats.Data.js الخاص بك.
  2. ابحث عن الوظيفة FriendlyEats.prototype.getFilteredRestaurants .
  3. استبدل الدالة بأكملها بالكود التالي.

FriendlyEats.Data.js

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

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

قم بتحديث تطبيق FriendlyEats في متصفحك، ثم تأكد من أنه يمكنك التصفية حسب السعر والمدينة والفئة. أثناء الاختبار، سترى أخطاء في وحدة تحكم JavaScript في متصفحك والتي تبدو كما يلي:

The query requires an index. You can create it here: https://console.firebase.google.com/project/project-id/database/firestore/indexes?create_composite=...

ترجع هذه الأخطاء إلى أن Cloud Firestore يتطلب فهارس لمعظم الاستعلامات المركبة. يؤدي طلب الفهارس في الاستعلامات إلى إبقاء Cloud Firestore سريعًا على نطاق واسع.

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

10. نشر الفهارس

إذا لم نرغب في استكشاف كل مسار في تطبيقنا واتباع كل رابط من روابط إنشاء الفهرس، فيمكننا بسهولة نشر العديد من الفهارس مرة واحدة باستخدام Firebase CLI.

  1. في الدليل المحلي الذي تم تنزيله لتطبيقك، ستجد ملف firestore.indexes.json .

يصف هذا الملف جميع الفهارس المطلوبة لجميع المجموعات الممكنة من المرشحات.

firestore.indexes.json

{
 "indexes": [
   {
     "collectionGroup": "restaurants",
     "queryScope": "COLLECTION",
     "fields": [
       { "fieldPath": "city", "order": "ASCENDING" },
       { "fieldPath": "avgRating", "order": "DESCENDING" }
     ]
   },

   ...

 ]
}
  1. انشر هذه الفهارس باستخدام الأمر التالي:
firebase deploy --only firestore:indexes

وبعد بضع دقائق، ستصبح الفهارس الخاصة بك نشطة وستختفي رسائل الخطأ.

11. كتابة البيانات في المعاملة

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

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

ولحسن الحظ، يوفر Cloud Firestore وظيفة المعاملات التي تتيح لنا إجراء عمليات قراءة وكتابة متعددة في عملية ذرية واحدة، مما يضمن بقاء بياناتنا متسقة.

  1. ارجع إلى ملف scripts/FriendlyEats.Data.js الخاص بك.
  2. ابحث عن الوظيفة FriendlyEats.prototype.addRating .
  3. استبدل الدالة بأكملها بالكود التالي.

FriendlyEats.Data.js

FriendlyEats.prototype.addRating = function(restaurantID, rating) {
  var collection = firebase.firestore().collection('restaurants');
  var document = collection.doc(restaurantID);
  var newRatingDocument = document.collection('ratings').doc();

  return firebase.firestore().runTransaction(function(transaction) {
    return transaction.get(document).then(function(doc) {
      var data = doc.data();

      var newAverage =
          (data.numRatings * data.avgRating + rating.rating) /
          (data.numRatings + 1);

      transaction.update(document, {
        numRatings: data.numRatings + 1,
        avgRating: newAverage
      });
      return transaction.set(newRatingDocument, rating);
    });
  });
};

في الكتلة أعلاه، نقوم بتشغيل معاملة لتحديث القيم الرقمية لـ avgRating و numRatings في مستند المطعم. وفي الوقت نفسه، نضيف rating الجديد إلى مجموعة ratings الفرعية.

12. قم بتأمين بياناتك

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

  1. في قسم الإنشاء بوحدة تحكم Firebase، انقر فوق Firestore Database .
  2. انقر فوق علامة التبويب "القواعد" في قسم Cloud Firestore (أو انقر هنا للانتقال مباشرة إلى هناك).
  3. استبدل الإعدادات الافتراضية بالقواعد التالية، ثم انقر على نشر .

firestore.rules

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data) 
      && (key in request.resource.data) 
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys()) 
                    && unchanged("name");
      
      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

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

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

بدلاً من استخدام وحدة تحكم Firebase، يمكنك استخدام واجهة سطر أوامر Firebase لنشر القواعد في مشروع Firebase الخاص بك. يحتوي ملف firestore.rules الموجود في دليل العمل الخاص بك بالفعل على القواعد المذكورة أعلاه. لنشر هذه القواعد من نظام الملفات المحلي لديك (بدلاً من استخدام وحدة تحكم Firebase)، يمكنك تشغيل الأمر التالي:

firebase deploy --only firestore:rules

13. الاستنتاج

في هذا الدرس التطبيقي حول التعليمات البرمجية، تعلمت كيفية إجراء عمليات القراءة والكتابة الأساسية والمتقدمة باستخدام Cloud Firestore، بالإضافة إلى كيفية تأمين الوصول إلى البيانات باستخدام قواعد الأمان. يمكنك العثور على الحل الكامل في مستودع Quickstarts-js .

لمعرفة المزيد حول Cloud Firestore، قم بزيارة الموارد التالية:

14. [اختياري] قم بالتنفيذ من خلال التحقق من التطبيق

يوفر Firebase App Check الحماية من خلال المساعدة في التحقق من صحة ومنع حركة المرور غير المرغوب فيها إلى تطبيقك. في هذه الخطوة، ستؤمن الوصول إلى خدماتك عن طريق إضافة التحقق من التطبيق باستخدام reCAPTCHA Enterprise .

أولاً، ستحتاج إلى تمكين App Check وreCaptcha.

تمكين reCaptcha المؤسسة

  1. في وحدة التحكم السحابية، ابحث عن reCaptcha Enterprise وحدده ضمن الأمان.
  2. قم بتمكين الخدمة كما هو مطلوب، ثم انقر فوق "إنشاء مفتاح" .
  3. أدخل اسم العرض كما هو مطلوب، وحدد موقع الويب كنوع النظام الأساسي الخاص بك.
  4. أضف عناوين URL المنشورة إلى قائمة النطاق ، وتأكد من إلغاء تحديد خيار "استخدام اختبار مربع الاختيار ".
  5. انقر فوق "إنشاء مفتاح" وقم بتخزين المفتاح الذي تم إنشاؤه في مكان ما لحفظه. سوف تحتاج إليها لاحقا في هذه الخطوة.

تمكين التحقق من التطبيق

  1. في وحدة تحكم Firebase، حدد موقع قسم البناء في اللوحة اليمنى.
  2. انقر على "التحقق من التطبيق" ، ثم انقر على زر "البدء " (أو أعد التوجيه مباشرةً إلى وحدة التحكم ).
  3. انقر على "تسجيل" وأدخل مفتاح reCaptcha Enterprise عندما يُطلب منك ذلك، ثم انقر على "حفظ" .
  4. في عرض واجهات برمجة التطبيقات (APIs View)، حدد التخزين وانقر فوق فرض . افعل نفس الشيء مع Cloud Firestore .

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

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

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

انتقل إلى ملف FriendlyEats.View.js ، وقم بتحديث وظيفة initAppCheck وأضف مفتاح reCaptcha الخاص بك لتهيئة فحص التطبيق.

FriendlyEats.prototype.initAppCheck = function() {
    var appCheck = firebase.appCheck();
    appCheck.activate(
    new firebase.appCheck.ReCaptchaEnterpriseProvider(
      /* reCAPTCHA Enterprise site key */
    ),
    true // Set to true to allow auto-refresh.
  );
};

تتم تهيئة مثيل appCheck باستخدام ReCaptchaEnterpriseProvider باستخدام مفتاحك، ويسمح isTokenAutoRefreshEnabled للرموز المميزة بالتحديث التلقائي في تطبيقك.

لتمكين الاختبار المحلي، ابحث عن القسم الذي تمت فيه تهيئة التطبيق في ملف FriendlyEats.js ، وأضف السطر التالي إلى وظيفة FriendlyEats.prototype.initAppCheck :

if(isLocalhost) {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

سيؤدي هذا إلى تسجيل رمز تصحيح الأخطاء في وحدة التحكم لتطبيق الويب المحلي الخاص بك على غرار ما يلي:

App Check debug token: 8DBDF614-649D-4D22-B0A3-6D489412838B. You will need to add it to your app's App Check settings in the Firebase console for it to work.

انتقل الآن إلى عرض التطبيقات للتحقق من التطبيق في وحدة تحكم Firebase.

انقر فوق القائمة الكاملة، وحدد إدارة رموز التصحيح .

ثم، انقر فوق إضافة رمز تصحيح الأخطاء والصق رمز تصحيح الأخطاء من وحدة التحكم الخاصة بك كما هو مطلوب.

تهانينا! يجب أن يعمل التحقق من التطبيق الآن في تطبيقك.