Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

احمِ الموارد بخلاف Firebase باستخدام App Check في تطبيقات الويب

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

يمكنك حماية موارد تطبيقك بخلاف Firebase ، مثل الخلفيات المستضافة ذاتيًا ، باستخدام App Check. للقيام بذلك ، سوف تحتاج إلى القيام بالأمرين التاليين:

قبل ان تبدأ

إضافة التحقق من التطبيق إلى تطبيقك ، إما باستخدام موفر reCAPTCHA v3 أو مزود reCAPTCHA Enterprise أو مزودًا مخصصًا .

إرسال رموز التحقق من التطبيق مع طلبات الخلفية

في عميل التطبيق الخاص بك ، قبل كل طلب ، احصل على رمز مميز صالح وغير منتهي الصلاحية للتحقق من التطبيق مع appCheck().getToken() . ستقوم مكتبة App Check بتحديث الرمز المميز إذا لزم الأمر.

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

Web version 9

const { initializeAppCheck, getToken } = require('firebase/app-check');

const appCheck = initializeAppCheck(
    app,
    { provider: provider } // ReCaptchaV3Provider or CustomProvider
);

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await getToken(appCheck, /* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};

Web version 8

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await firebase.appCheck().getToken(/* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};