درس تطبيقي حول ترميز الويب في فحص التطبيقات

1. مقدمة

تاريخ آخر تعديل: 2023-02-23

كيف يمكنك منع الوصول غير المصرّح به إلى موارد Firebase؟

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

يمكن استخدام App Check لحماية الطلبات إلى Cloud Firestore وRealtime Database وCloud Functions وFirebase Authentication مع Identity Platform، وإلى الخلفيات التي تستضيفها بنفسك.

ما ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستعمل على تأمين تطبيق دردشة من خلال إضافة خدمة App Check ثم فرض استخدامها.

ما ستتعلمه

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

المتطلبات

• حزمة تطوير البرامج المتكاملة (IDE) أو محرِّر النصوص الذي تختاره
• أداة إدارة الحِزم npm، التي تأتي عادةً مع Node.js
• واجهة سطر الأوامر (CLI) لمنصة Firebase مثبَّتة وتم إعدادها للعمل مع حسابك
• نافذة طرفية/وحدة تحكّم
• متصفّح من اختيارك، مثل Chrome
• الرمز النموذجي في الدرس العملي (راجِع الخطوة التالية من الدرس العملي لمعرفة كيفية الحصول على الرمز)

2. الحصول على الرمز النموذجي

استنسِخ مستودع GitHub الخاص بالدرس العملي من سطر الأوامر:

git clone https://github.com/firebase/codelab-friendlychat-web

بدلاً من ذلك، إذا لم يكن Git مثبّتًا لديك، يمكنك تنزيل المستودع كملف ZIP.

يحتوي مستودع friendlychat-web على نماذج مشاريع لمنصات متعددة.

لا يستخدم هذا الدرس التطبيقي العملي إلا هذين المجلّدين:

• ‫📁 appcheck-start: رمز البداية الذي ستستند إليه أثناء هذا الدرس التطبيقي حول الترميز.
• ‫📁 appcheck: الرمز الكامل للتطبيق النموذجي النهائي

ملاحظة: إذا كنت تريد تشغيل التطبيق النهائي، عليك إنشاء مشروع على Firebase في وحدة تحكّم Firebase (راجِع القسم إنشاء مشروع على Firebase وإعداده في هذا الدرس العملي للحصول على التعليمات).

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

باستخدام بيئة التطوير المتكاملة (IDE)، افتح الدليل 📁 appcheck-start أو استورِده من المستودع الذي تم استنساخه. يحتوي دليل 📁 appcheck-start على الرمز البرمجي الأولي للدرس التطبيقي، والذي سيكون تطبيق ويب للدردشة يعمل بكامل وظائفه. وسيتضمّن دليل 📁 appcheck الرمز البرمجي المكتمل للدرس التطبيقي.

3- إنشاء مشروع Firebase وإعداده

إنشاء مشروع Firebase

1. سجِّل الدخول إلى وحدة تحكّم Firebase باستخدام حسابك على Google.
2. انقر على الزر لإنشاء مشروع جديد، ثم أدخِل اسم المشروع (على سبيل المثال، FriendlyChat).
   

   يُستخدَم اسم المشروع هذا كاسم معروض في واجهات Firebase، وتنشئ Firebase تلقائيًا رقم تعريف مشروع فريدًا استنادًا إلى اسم المشروع هذا. يُرجى العِلم أنّه يمكنك اختياريًا النقر على رمز تعديل الآن لضبط رقم تعريف المشروع المفضّل، ولكن لا يمكنك تغيير رقم التعريف هذا بعد إنشاء المشروع.

   تذكَّر رقم تعريف مشروعك لأنّك ستحتاج إليه لاحقًا لتحديد مشروعك على Firebase في واجهة سطر الأوامر في Firebase. إذا نسيت رقم التعريف، يمكنك العثور عليه لاحقًا في إعدادات المشروع.

3. انقر على متابعة.
4. إذا طُلب منك ذلك، راجِع بنود Firebase واقبلها، ثم انقر على متابعة.
5. (اختياري) فعِّل ميزة "المساعدة المستندة إلى الذكاء الاصطناعي" في وحدة تحكّم Firebase (المعروفة باسم "Gemini في Firebase").
6. في هذا الدرس العملي، لا تحتاج إلى "إحصاءات Google"، لذا أوقِف خيار "إحصاءات Google".
7. انقر على إنشاء مشروع، وانتظِر إلى أن يتم توفير مشروعك، ثم انقر على متابعة.

ترقية خطة أسعار Firebase

لاستخدام Cloud Storage for Firebase، يجب أن يكون مشروعك على Firebase ضمن خطة التسعير "الدفع حسب الاستخدام" (Blaze)، ما يعني أنّه مرتبط بحساب فوترة Cloud.

• يتطلّب حساب الفوترة في Cloud طريقة دفع، مثل بطاقة الائتمان.
• إذا كنت حديث العهد باستخدام Firebase وGoogle Cloud، تحقَّق ممّا إذا كنت مؤهَّلاً للحصول على رصيد بقيمة 300 دولار أمريكي وحساب فوترة على Cloud في الفترة التجريبية المجانية.
• إذا كنت تجري هذا الدرس العملي المبرمَج كجزء من حدث، اسأل المنظِّم عمّا إذا كانت هناك أي أرصدة في Cloud متاحة.

لترقية مشروعك إلى خطة Blaze، اتّبِع الخطوات التالية:

1. في "وحدة تحكّم Firebase"، اختَر ترقية خطتك.
2. اختَر خطة Blaze. اتّبِع التعليمات الظاهرة على الشاشة لربط حساب فوترة على Cloud بمشروعك.
   إذا احتجت إلى إنشاء حساب فوترة على Cloud كجزء من عملية الترقية هذه، قد تحتاج إلى الرجوع إلى مسار الترقية في وحدة تحكّم Firebase لإكمال عملية الترقية.

ملاحظة: يمكنك الرجوع إلى خطة الأسعار المجانية (Spark) بعد إكمال هذا الدرس العملي.

إضافة تطبيق ويب على Firebase إلى المشروع

1. انقر على رمز الويب لإنشاء تطبيق ويب جديد على Firebase.
2. سجِّل التطبيق بالاسم المستعار Friendly Chat، ثم ضَع علامة في المربّع بجانب إعداد ميزة "استضافة Firebase" لهذا التطبيق أيضًا. انقر على تسجيل التطبيق.
3. في الخطوة التالية، سيظهر لك أمر لتثبيت Firebase باستخدام npm وعنصر إعداد. ستنسخ هذا العنصر لاحقًا في الدرس العملي، لذا انقر الآن على التالي.

4. سيظهر لك بعد ذلك خيار تثبيت Firebase CLI. إذا لم يسبق لك تثبيته، يمكنك إجراء ذلك الآن باستخدام الأمر npm install -g firebase-tools. بعد ذلك، انقر على التالي.
5. بعد ذلك، سيظهر لك خيار تسجيل الدخول إلى Firebase والنشر على استضافة Firebase. تابِع وسجِّل الدخول إلى Firebase باستخدام الأمر firebase login، ثم انقر على المتابعة إلى وحدة التحكّم. يمكنك نشر تطبيقك على "استضافة Firebase" في خطوة لاحقة.

إعداد منتجات Firebase

يستخدم التطبيق الذي سننشئه منتجات Firebase المتاحة لتطبيقات الويب:

• "مصادقة Firebase" للسماح للمستخدمين بتسجيل الدخول إلى تطبيقك بسهولة
• ‫Cloud Firestore لحفظ البيانات المنظَّمة على السحابة الإلكترونية وتلقّي إشعار فوري عند تغيُّر البيانات
• ‫Cloud Storage for Firebase لحفظ الملفات في السحابة الإلكترونية
• استضافة Firebase لاستضافة مواد العرض وعرضها
• "المراسلة عبر السحابة الإلكترونية من Firebase" لإرسال الإشعارات الفورية وعرض الإشعارات المنبثقة في المتصفح
• خدمة "مراقبة أداء Firebase" لجمع بيانات أداء المستخدمين لتطبيقك

تتطلّب بعض هذه المنتجات إعدادًا خاصًا أو يجب تفعيلها باستخدام وحدة تحكّم Firebase.

تفعيل ميزة "تسجيل الدخول باستخدام حساب Google" في خدمة "مصادقة Firebase"

للسماح للمستخدمين بتسجيل الدخول إلى تطبيق الويب باستخدام حساباتهم على Google، سنستخدم طريقة تسجيل الدخول باستخدام Google.

عليك تفعيل ميزة "تسجيل الدخول باستخدام حساب Google" باتّباع الخطوات التالية:

1. في وحدة تحكّم Firebase، ابحث عن قسم الإنشاء في اللوحة اليمنى.
2. انقر على المصادقة، ثم على البدء إذا كان ذلك منطبقًا، ثم على علامة التبويب طريقة تسجيل الدخول (أو انقر هنا للانتقال مباشرةً إلى هناك).
3. تفعيل موفّر خدمة "تسجيل الدخول باستخدام حساب Google"
4. اضبط اسم تطبيقك الظاهر للجميع على Friendly Chat، واختَر عنوان بريد إلكتروني لدعم المشروع من القائمة المنسدلة.
5. انقر على حفظ.

إعداد Cloud Firestore

يستخدم تطبيق الويب Cloud Firestore لحفظ رسائل المحادثات وتلقّي رسائل المحادثات الجديدة.

في ما يلي كيفية إعداد Cloud Firestore في مشروعك على Firebase:

1. في اللوحة اليمنى من "وحدة تحكّم Firebase"، وسِّع إنشاء، ثم اختَر قاعدة بيانات Firestore.
2. انقر على إنشاء قاعدة بيانات.
3. اترك معرّف قاعدة البيانات مضبوطًا على (default).
4. اختَر موقعًا لقاعدة البيانات، ثم انقر على التالي.
   بالنسبة إلى تطبيق حقيقي، عليك اختيار موقع جغرافي قريب من المستخدمين.
5. انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية عن قواعد الأمان.
   في وقت لاحق من هذا الدرس العملي، ستضيف قواعد الأمان لتأمين بياناتك. لا توزِّع تطبيقًا أو تعرضه بشكل علني بدون إضافة "قواعد الأمان" لقاعدة البيانات.
6. انقر على إنشاء.

إعداد "مساحة تخزين سحابية لـ Firebase"

يستخدم تطبيق الويب "مساحة تخزين سحابية لـ Firebase" لتخزين الصور وتحميلها ومشاركتها.

في ما يلي كيفية إعداد "التخزين السحابي لبرنامج Firebase" في مشروعك على Firebase:

1. في اللوحة اليمنى من وحدة تحكّم Firebase، وسِّع إنشاء، ثم اختَر مساحة التخزين.
2. انقر على البدء.
3. اختَر موقعًا جغرافيًا لحزمة Storage التلقائية.
   يمكن للحِزم في US-WEST1 وUS-CENTRAL1 وUS-EAST1 الاستفادة من الفئة"دائمًا مجانية" في Google Cloud Storage. تخضع الحِزم في جميع المواقع الجغرافية الأخرى لأسعار واستخدام Google Cloud Storage.
4. انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية عن قواعد الأمان.
   في وقت لاحق من هذا الدرس العملي، ستضيف قواعد أمان لحماية بياناتك. لا توزّع تطبيقًا أو تعرضه للجميع بدون إضافة "قواعد الأمان" لحزمة Cloud Storage.
5. انقر على إنشاء.

4. إعداد Firebase

من دليل appcheck-start، اتّبِع الخطوات التالية:

firebase use --add

عندما يُطلب منك ذلك، اختَر رقم تعريف مشروعك، ثم امنح مشروعك على Firebase اسمًا مستعارًا. بالنسبة إلى هذا المشروع، يمكنك فقط تقديم اسم مستعار default. بعد ذلك، عليك ضبط مشروعك المحلي ليعمل مع Firebase.

1. انتقِل إلى إعدادات المشروع في "وحدة تحكّم Firebase".
2. في بطاقة "تطبيقاتك"، اختَر الاسم المستعار للتطبيق الذي تحتاج إلى عنصر إعداد له.
3. اختَر Config من جزء مقتطف حزمة تطوير البرامج (SDK) في Firebase.
4. انسخ مقتطف عنصر الإعداد، ثمّ أضِفه إلى appcheck-start/hosting/src/firebase-config.js. تفترض بقية الدرس التطبيقي العملي أنّ اسم المتغيّر هو config.

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

يجب أن يتضمّن الرمز أعلاه عنصر إعدادات Firebase الخاص بتطبيقك، وليس قيم العناصر النائبة.

من دليل appcheck-start نفسه، اتّصِل بما يلي:

firebase experiments:enable webframeworks

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

يجب أن نكون مستعدين الآن لتشغيل مشروعك واختبار ما إذا كان المشروع التلقائي يعمل.

5- تجربة التطبيق بدون خدمة App Check

بعد إعداد تطبيقك وحزمة SDK، حاوِل استخدام التطبيق كما تم تصميمه في الأصل. ابدأ أولاً بتثبيت جميع التبعيات. من الوحدة الطرفية، انتقِل إلى الدليل appcheck-start/hosting. أثناء وجودك داخل هذا الدليل، شغِّل الأمر npm install. يؤدي ذلك إلى جلب جميع التبعيات اللازمة لعمل مشروعك. لبدء التطبيق في حالته الحالية، يمكنك تشغيل firebase serve. يطلب منك التطبيق تسجيل الدخول باستخدام حساب Google، لذا عليك إجراء ذلك، ثم محاولة نشر بضع رسائل محادثة وبضع صور في المحادثة.

بعد أن اختبرت التطبيق على جهازك، حان الوقت لنشره. نفِّذ الأمر firebase deploy لنشر تطبيق الويب على الويب. هذا الجزء هو خطوة مهمة في عرض كيفية عمل App Check في العالم الحقيقي، لأنّه يتطلّب ضبط نطاق لمقدّم خدمة شهادات reCAPTCHA Enterprise.

نأمل أن تكون هذه هي الإمكانية التلقائية التي يوفّرها التطبيق. نشر رسائل المحادثة وكل ما يجب إجراؤه من تطبيق مثل هذا فقط من سلبيات الحالة الحالية أنّه يمكن لأي شخص لديه إعدادات تطبيقك من الخطوة السابقة الوصول إلى موارد الخلفية. سيظلّ عليهم الالتزام بقواعد الأمان التي وضعتها أنظمة Firestore وCloud Storage، ولكن سيظلّ بإمكانهم الاستعلام عن البيانات المخزّنة هناك وتخزينها والوصول إليها.

في الخطوات القليلة التالية، عليك إجراء ما يلي:

• التسجيل في App Check
• التحقّق من صحة التنفيذ
• بدء تطبيق القواعد

6. تفعيل خدمة App Check وفرض استخدامها

لنبدأ بالحصول على مفتاح reCAPTCHA Enterprise لمشروعك وإضافته إلى App Check. يمكنك البدء من خلال الانتقال إلى قسم reCAPTCHA Enterprise في Google Cloud Console. اختَر مشروعك، وسيُطلب منك بعد ذلك تفعيل reCAPTCHA Enterprise API. فعِّل واجهة برمجة التطبيقات وانتظر بضع دقائق حتى تنتهي العملية. بعد ذلك، انقر على إنشاء مفتاح بجانب مفاتيح المؤسسة. بعد ذلك، حدِّد اسمًا معروضًا واختَر مفتاح نوع موقع إلكتروني في هذا القسم. عليك تحديد النطاقات التي تتم استضافة تطبيقك عليها. بما أنّك تخطّط لاستضافة هذا الملف على Firebase Hosting، عليك استخدام اسم الاستضافة التلقائي وهو ${YOUR_PROJECT_ID}.web.app بشكل عام. يمكنك العثور على نطاق الاستضافة ضمن قسم "الاستضافة" في وحدة تحكّم Firebase. بعد ملء هذه المعلومات، انقر على تم وإنشاء مفتاح.

بعد اكتمال العملية، سيظهر لك رقم تعريف في أعلى صفحة التفاصيل الأساسية.

يمكنك نسخ رقم التعريف هذا إلى الحافظة. هذا هو المفتاح الذي تستخدمه في App Check. بعد ذلك، انتقِل إلى قسم App Check في وحدة تحكّم Firebase، وانقر على البدء. بعد ذلك، انقر على تسجيل، ثم على reCAPTCHA Enterprise، وأدخِل المعرّف المنسوخ في مربّع النص مفتاح الموقع الإلكتروني في reCAPTCHA Enterprise. اترك بقية الإعدادات على الإعداد التلقائي. يجب أن تبدو صفحة App Check على النحو التالي:

الطلبات التي لم يتم التحقّق منها ولم يتم تنفيذها

بعد تسجيل المفتاح في "وحدة تحكّم Firebase"، ارجع إلى تشغيل موقعك الإلكتروني في المتصفّح من خلال تنفيذ firebase serve. في هذه المرحلة، يكون تطبيق الويب قيد التشغيل على جهازك ويمكنك البدء في إرسال الطلبات إلى الخلفية في Firebase مرة أخرى. بما أنّ الطلبات تخالف الخلفية البرمجية لـ Firebase، يتم تتبُّع هذه الطلبات من خلال App Check ولكن لا يتم فرضها. إذا أردت الاطّلاع على حالة الطلبات الواردة، يمكنك الانتقال إلى قسم Cloud Firestore في علامة التبويب "واجهات برمجة التطبيقات" في صفحة App Check ضِمن وحدة تحكّم Firebase. بما أنّك لم تضبط البرنامج لاستخدام App Check بعد، من المفترض أن يظهر لك ما يلي:

تتلقّى الخلفية طلبات لم يتم التحقّق منها بنسبة% 100. تكون هذه الشاشة مفيدة لأنّها توضّح أنّ جميع طلبات العملاء تقريبًا تأتي من عملاء لم يتم دمج خدمة App Check مع تطبيقاتهم.

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

الطلبات غير المؤكَّدة والمنفَّذة

انقر على الزر فرض من الشاشة السابقة، ثم انقر على فرض مرة أخرى إذا طُلب منك ذلك.

سيؤدي ذلك إلى بدء فرض استخدام App Check، وسيتم الآن حظر الطلبات المُرسَلة إلى خدمات الخلفية التي لم يتم التحقّق منها من خلال موفّر خدمة التصديق الذي اخترته (في هذه الحالة reCAPTCHA Enterprise). ارجع إلى تطبيق الويب الذي يتم تشغيله والذي من المفترض أن يكون قيد التشغيل على http://localhost:5000. عند إعادة تحميل الصفحة ومحاولة الحصول على بيانات من قاعدة البيانات، لا يحدث أي شيء. إذا فتحت وحدة تحكّم Chrome لقراءة الأخطاء، من المفترض أن يظهر لك شيء مشابه لما يلي:

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

هذا يعني أنّ خدمة App Check تحظر الطلبات التي لم يتم فيها إرسال رمز مميّز صالح للتصديق في الطلبات المُرسَلة إلى موارد Firebase. في الوقت الحالي، يمكنك إيقاف فرض استخدام App Check، وفي القسم التالي، يمكنك الاطّلاع على كيفية إضافة reCAPTCHA Enterprise App Check إلى مثال Friendly Chat.

7. إضافة مفتاح reCAPTCHA Enterprise إلى الموقع الإلكتروني

سنضيف مفتاح المؤسسة إلى تطبيقك. أولاً، افتح hosting/src/firebase-config.js وأضِف مفتاح reCAPTCHA Enterprise إلى مقتطف الرمز التالي:

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

بعد اكتمال ذلك، افتح hosting/src/index.js وفي السطر 51، ستضيف عملية استيراد من firebase-config.js لاسترجاع مفتاح reCAPTCHA، كما ستستورد مكتبة App Check لتتمكّن من استخدام موفّر reCAPTCHA Enterprise.

// add from here
 import {
   initializeAppCheck,
   ReCaptchaEnterpriseProvider,
 } from 'firebase/app-check';
// to here

// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';

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

import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
 function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
 }
// to here

حان الوقت الآن لإعداد App Check للعمل مع مقدّم الخدمة الذي اخترته، وهو في هذه الحالة reCAPTCHA Enterprise. بعد ذلك، عليك أيضًا إعادة تحميل رمز App Check تلقائيًا في الخلفية، ما يمنع حدوث أي تأخير في تفاعل المستخدم مع خدمتك في حال انتهاء صلاحية رمز App Check.

function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
// add from here
   // Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
   // site key and pass it to initializeAppCheck().
   initializeAppCheck(app, {
     provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
     isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
   });
// to here
 }

أخيرًا، بعد التأكّد من تهيئة التطبيق، عليك استدعاء الدالة setupAppCheck التي أنشأتها للتو. في أسفل ملف hosting/src/index.js، أضِف طلبًا إلى الطريقة التي أضفتها مؤخرًا.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

الاختبار على الجهاز المحلي أولاً

اختبِر تطبيقك محليًا أولاً. إذا لم تكن تعرض التطبيق محليًا، شغِّل firebase serve. ستلاحظ أنّ التطبيق لا يزال يتعذّر تحميله محليًا. يرجع ذلك إلى أنّك سجّلت نطاق Firebase فقط لدى مقدّم خدمة إثبات صحة reCAPTCHA، وليس نطاق localhost. يجب عدم تسجيل المضيف المحلي كنطاق معتمَد لأنّ ذلك يسمح للمستخدمين بالوصول إلى الأنظمة الخلفية المحظورة من تطبيق يعمل محليًا على أجهزتهم. بدلاً من ذلك، بما أنّك ضبطت self.FIREBASE_APPCHECK_DEBUG_TOKEN = true، عليك التحقّق من سطر مشابه لما يلي في وحدة تحكّم JavaScript:

App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.

عليك أخذ رمز التصحيح المعروض (في المثال هو : 55183c20-de61-4438-85e6-8065789265be) وإدخاله في إعدادات App Check ضمن قائمة الخيارات الإضافية لتطبيقك.

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

بعد تسجيل رمز تصحيح الأخطاء في وحدة تحكّم Firebase، يمكنك إعادة تفعيل فرض استخدام App Check واختبار تحميل محتوى التطبيق محليًا من خلال استدعاء firebase serve من الجهاز. من المفترض أن تظهر لك البيانات التي تم إدخالها سابقًا في النسخة المحلية من تطبيق الويب. سيظل من المفترض أن تظهر الرسالة مع الرمز المميز لتصحيح الأخطاء مطبوعًا على وحدة التحكّم.

تجربة الإصدار العلني

بعد التأكّد من أنّ خدمة App Check تعمل على جهازك، يمكنك نشر تطبيق الويب في مرحلة الإنتاج. من نافذة الجهاز، اتّصِل برقم firebase deploy مرة أخرى وأعِد تحميل الصفحة. سيؤدي ذلك إلى تجميع تطبيق الويب لتشغيله على Firebase Hosting. بعد استضافة تطبيقك على Firebase Hosting، حاوِل الانتقال إلى تطبيقك على ${YOUR_PROJECT_ID}.web.app. يمكنك فتح وحدة تحكّم JavaScript، ومن المفترض ألا يظهر رمز تصحيح الأخطاء مطبوعًا هناك، وأن ترى المحادثات يتم تحميلها في مشروعك. بالإضافة إلى ذلك، بعد التفاعل مع التطبيق لبضع لحظات، يمكنك الانتقال إلى قسم App Check في وحدة تحكّم Firebase والتأكّد من أنّه تم التحقّق من جميع الطلبات المُرسَلة إلى تطبيقك.

8. تهانينا!

تهانينا، لقد نجحت في إضافة ميزة "فحص التطبيقات من Firebase" إلى تطبيق ويب.

يمكنك إعداد وحدة تحكّم Firebase للتعامل مع رمز مميّز لـ reCAPTCHA Enterprise في بيئات الإنتاج، ويمكنك حتى إعداد رموز مميّزة لتصحيح الأخطاء في التطوير المحلي. يضمن ذلك أن تظل تطبيقاتك قادرة على الوصول إلى موارد Firebase من العملاء المعتمَدين ويمنع حدوث نشاط احتيالي من داخل تطبيقك.

الخطوات التالية

راجِع المستندات التالية لإضافة ميزة "فحص التطبيقات من Firebase" إلى:

• تفعيل التنفيذ في Cloud Functions
• إثبات صحة رموز App Check المميزة على الأنظمة الخلفية المخصّصة

المستندات المرجعية

• بدء استخدام App Check مع reCAPTCHA Enterprise في تطبيقات الويب
• استخدام موفّر تصحيح الأخطاء في تطبيقات الويب