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

1. مقدمة

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

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

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

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

ما ستنشئه

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

تطبيق محادثات الأصدقاء الأوّلي الذي أنشأته

ما ستتعلمه

كيفية مراقبة الخلفية بحثًا عن الوصول غير المصرَّح به
كيفية إضافة التنفيذ إلى 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إعداد Cloud Firestore

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

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

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

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

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

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

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

4. إعداد Firebase

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

firebase use --add

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

انتقِل إلى إعدادات المشروع في "وحدة تحكّم Firebase".
في بطاقة "تطبيقاتك"، اختَر الاسم المستعار للتطبيق الذي تحتاج إلى عنصر إعداد له.
اختَر Config من جزء مقتطف حزمة تطوير البرامج (SDK) في Firebase.
انسخ مقتطف عنصر الإعداد، ثم أضِفه إلى 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- تجربة التطبيق بدون 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، عليك استخدام اسم الاستضافة التلقائي وهو ${YOUR_PROJECT_ID}.web.app بشكل عام. يمكنك العثور على نطاق الاستضافة ضمن قسم "الاستضافة" في وحدة تحكّم Firebase. بعد ملء هذه المعلومات، انقر على تم وإنشاء مفتاح.

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

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

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

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

نافذة تطبيقات App Check التي تسجّل فيها رمز reCAPTCHA Enterprise المميّز

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

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

لوحة بيانات App Check تعرض% 100 من طلبات العملاء التي لم يتم التحقّق منها لتطبيقك

تتلقّى الخلفية 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 ضمن القائمة الكاملة لتطبيقك.

لوحة بيانات App Check التي تشير إلى مكان إدارة رموز تصحيح الأخطاء

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

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

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

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

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

8. تهانينا!

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

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

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

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