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

1. مقدمة

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

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

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

يمكن استخدام ميزة "فحص التطبيقات" لحماية الطلبات المرسَلة إلى Cloud Firestore وقاعدة بيانات الوقت الفعلي وCloud Functions و"مصادقة Firebase" باستخدام Identity Platform وعلى الخلفيات التي تستضيفها بنفسك.

ما ستنشئه

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

تطبيق المحادثات الودّية الذي أنشأته بنفسك.

ما ستتعلّمه

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

المتطلبات

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

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

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

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

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

استيراد التطبيق الأوّلي

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

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

إنشاء مشروع Firebase

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

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

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

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

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

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

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

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

نافذة إضافة Firebase إلى تطبيق الويب

  1. بعد ذلك، سيظهر لك خيار لتثبيت Firebase CLI. إذا لم يسبق لك تثبيته، يمكنك تثبيته الآن باستخدام الأمر npm install -g firebase-tools. بعد ذلك، انقر على التالي.
  2. بعد ذلك، سيظهر لك خيار لتسجيل الدخول إلى Firebase والنشر في استضافة Firebase. سجِّل الدخول إلى Firebase باستخدام الأمر firebase login، ثم انقر على الانتقال إلى وحدة التحكّم (Continue to Console). يمكنك النشر في استضافة Firebase في خطوة لاحقة.

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

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

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

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

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

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

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

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

f96888973c3d00cc.png

إعداد Cloud Firestore

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

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

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

إعداد Cloud Storage for Firebase

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

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

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

4. إعداد Firebase

من الدليل appcheck-start، نفِّذ ما يلي:

firebase use --add

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

  1. انتقِل إلى إعدادات المشروع في وحدة تحكُّم Firebase
  2. في بطاقة "تطبيقاتك"، اختَر الاسم المعرِّف للتطبيق الذي تحتاج إلى عنصر ضبط له.
  3. اختَر الإعداد من لوحة مقتطف Firebase SDK.
  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",
};

من دليل appcheck-start نفسه، يمكنك طلب:

firebase experiments:enable webframeworks

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

من المفترض أن نكون جاهزين الآن لتشغيل مشروعك واختبار عمل المشروع التلقائي.

5- تجربة التطبيق بدون ميزة "فحص التطبيقات"

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

بعد أن اختبرت التطبيق محليًا، حان الوقت لرؤيته في مرحلة الإنتاج. شغِّل firebase deploy لنشر تطبيق الويب على الإنترنت. هذا الجزء هو خطوة حاسمة في توضيح كيفية عمل ميزة "فحص التطبيقات" في العالم الحقيقي لأنّه يتطلّب ضبط نطاق لمقدّم خدمة مصادقة reCAPTCHA Enterprise.

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

في الخطوات القليلة التالية، ستتعرّف على كيفية:

  • التسجيل في ميزة "فحص التطبيقات"
  • التحقّق من إجراءات التنفيذ
  • بدء تنفيذ القواعد

6. تفعيل ميزة "فحص التطبيقات" وإجراءات التنفيذ

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

شاشة إنشاء مفتاح reCAPTCHA

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

نافذة تسجيل reCAPTCHA Enterprise

انسخ رقم التعريف هذا إلى الحافظة. هذا هو المفتاح الذي تستخدمه لميزة "فحص التطبيقات". بعد ذلك، انتقِل إلى قسم فحص التطبيقات في وحدة تحكُّم Firebase، وانقر على البدء. بعد ذلك، انقر على تسجيل (Register)، ثم على reCAPTCHA Enterprise، وأدخِل المعرّف الذي نسخته في مربّع النص الخاص بمفتاح موقع reCAPTCHA Enterprise الإلكتروني (reCAPTCHA Enterprise Site Key). اترك بقية الإعدادات على الوضع التلقائي. من المفترض أن تظهر صفحة "فحص التطبيقات" على النحو التالي:

نافذة تطبيقات "فحص التطبيقات" التي يمكنك من خلالها تسجيل رمز reCAPTCHA Enterprise المميّز

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

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

لوحة بيانات "فحص التطبيقات" تعرض طلبات العملاء غير المتحقّق منها بنسبة %100 لتطبيقك.

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

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

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

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

لوحة بيانات المقاييس التي لم يتم التحقّق منها مع زر "فرض" مميّز

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

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

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

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

سنضيف مفتاح 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 واستيراد مكتبة "فحص التطبيقات" أيضًا لتتمكّن من العمل مع موفّر 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';

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

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

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

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 وليس نطاق المضيف المحلي. يجب عدم تسجيل المضيف المحلي كنطاق معتمَد لأنّ ذلك يسمح للمستخدمين بالوصول إلى الخلفيات المحظورة من تطبيق يعمل محليًا على أجهزتهم. بدلاً من ذلك، بما أنّك ضبطت 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) وإدخاله في إعدادات فحص التطبيقات ضمن القائمة الكاملة لتطبيقك.

لوحة بيانات "فحص التطبيقات" التي تشير إلى مكان "إدارة الرموز المميّزة لتصحيح الأخطاء"

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

مثال على ملء رمز تصحيح الأخطاء باسم مستعار

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

تجربة الميزة في مرحلة الإنتاج

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

8. تهانينا!

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

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

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

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

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