التحقق من التطبيق Codelab على الويب

1 المقدمة

آخر تحديث: 2023-02-23

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

يمكنك استخدام Firebase App Check لمنع العملاء غير المصرح لهم من الوصول إلى موارد الواجهة الخلفية الخاصة بك عن طريق مطالبة الطلبات الواردة بأن تأتي مرفقة بشهادة بأن الطلب يأتي من تطبيقك الأصلي وعن طريق حظر حركة المرور التي لا تحتوي على شهادة مناسبة. يعتمد Firebase App Check على موفري التصديق الخاصين بالنظام الأساسي للتحقق من صحة العميل: بالنسبة لتطبيقات الويب، يدعم App Check reCAPTCHA v3 وreCAPTCHA Enterprise كموفري تصديق.

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

ما سوف تبنيه

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

تطبيق الدردشة الودي الذي تم إنشاؤه بواسطتك.

ما ستتعلمه

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

ماذا ستحتاج

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

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

قم باستنساخ مستودع GitHub الخاص بـ Codelab من سطر الأوامر:

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

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

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

باستخدام IDE الخاص بك، افتح أو استورد دليل 📁 appcheck-start من المستودع المستنسخ. يحتوي دليل 📁 appcheck-start هذا على رمز البداية لـ Codelab، والذي سيكون تطبيق ويب للدردشة يعمل بكامل طاقته. سيحتوي دليل 📁 appcheck على الكود المكتمل لبرنامج Codelab.

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

إنشاء مشروع Firebase

  1. قم بتسجيل الدخول إلى Firebase .
  2. في وحدة تحكم Firebase، انقر فوق "إضافة مشروع"، ثم قم بتسمية مشروع Firebase FriendlyChat. تذكر معرف المشروع لمشروع Firebase الخاص بك.
  3. قم بإلغاء تحديد تمكين Google Analytics لهذا المشروع
  4. انقر فوق إنشاء مشروع.

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

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

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

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

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

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

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

تمكين تسجيل الدخول إلى Google لمصادقة Firebase

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

ستحتاج إلى تمكين تسجيل الدخول بحساب Google:

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

f96888973c3d00cc.png

تمكين سحابة Firestore

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

ستحتاج إلى تمكين Cloud Firestore:

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

زر Cloud Firestore لإنشاء قاعدة بيانات

  1. حدد خيار البدء في وضع الاختبار ، ثم انقر فوق التالي بعد قراءة إخلاء المسؤولية حول قواعد الأمان.

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

نافذة قواعد أمن قاعدة البيانات. الخيار

  1. قم بتعيين الموقع حيث يتم تخزين بيانات Cloud Firestore الخاصة بك. يمكنك ترك هذا كإعداد افتراضي أو اختيار منطقة قريبة منك. انقر فوق تمكين لتوفير Firestore.

a3d24f9f4ace1917.png

تمكين التخزين السحابي

يستخدم تطبيق الويب Cloud Storage for Firebase لتخزين الصور وتحميلها ومشاركتها.

ستحتاج إلى تمكين التخزين السحابي:

  1. في قسم الإنشاء بوحدة تحكم Firebase، انقر فوق التخزين .
  2. إذا لم يكن هناك زر البدء ، فهذا يعني أن التخزين السحابي ممكّن بالفعل، ولن تحتاج إلى اتباع الخطوات أدناه.
  3. انقر فوق البدء .
  4. حدد خيار البدء في وضع الاختبار ، ثم انقر فوق التالي بعد قراءة إخلاء المسؤولية حول قواعد الأمان.

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

1c875cef812a4384.png

  1. يتم تحديد موقع Cloud Storage مسبقًا بنفس المنطقة التي اخترتها لقاعدة بيانات Cloud Firestore الخاصة بك. انقر فوق تم لإكمال الإعداد.

d038569661620910.png

4. تكوين Firebase

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

firebase use --add

عند المطالبة، حدد معرف المشروع الخاص بك، ثم قم بإعطاء مشروع Firebase الخاص بك اسمًا مستعارًا. بالنسبة لهذا المشروع، يمكنك فقط إعطاء اسم مستعار افتراضي . بعد ذلك، ستحتاج إلى تكوين مشروعك المحلي للعمل مع 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.appspot.com",
  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 لنشر تطبيق الويب على الويب. يعد هذا الجزء خطوة حاسمة في عرض كيفية عمل App Check في العالم الحقيقي لأنه يتطلب تكوين مجال لموفر تصديق reCAPTCHA Enterprise.

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

في الخطوات القليلة التالية، ستقوم بما يلي:

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

6. قم بتشغيل التحقق من التطبيق وتنفيذه

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

reCAPTCHA إنشاء شاشة رئيسية

بمجرد الانتهاء، ترى معرفًا أعلى صفحة "التفاصيل الرئيسية" .

نافذة تسجيل المؤسسة reCAPTCHA

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

نافذة التطبيقات "التحقق من التطبيقات" حيث تقوم بتسجيل الرمز المميز لمؤسسة reCAPTCHA

الطلبات التي لم يتم التحقق منها وغير المنفذة

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

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

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

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

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

تابع واضغط على زر Enforce من الشاشة السابقة ثم اضغط على Enforce مرة أخرى إذا طُلب منك ذلك.

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

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

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

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

7. أضف مفتاح reCAPTCHA Enterprise إلى الموقع

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

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 مزود المؤسسة.

// 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 من الوحدة الطرفية. من المفترض أن تشاهد البيانات التي تم إدخالها مسبقًا يتم تقديمها إلى الإصدار المحلي من تطبيق الويب. من المفترض أن تستمر في رؤية الرسالة التي تحتوي على رمز التصحيح المميز المطبوع على وحدة التحكم.

جربه في الإنتاج

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

8. تهانينا!

تهانينا، لقد نجحت في إضافة Firebase App Check إلى تطبيق ويب!

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

ماذا بعد؟

راجع الوثائق التالية لإضافة Firebase App Check إلى:

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