Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

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

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

  • قم بتعديل عميل التطبيق الخاص بك لإرسال رمز التحقق من التطبيق جنبًا إلى جنب مع كل طلب إلى الواجهة الخلفية ، كما هو موضح في هذه الصفحة.
  • قم بتعديل الواجهة الخلفية للمطالبة برمز مميز صالح للتحقق من التطبيق مع كل طلب ، كما هو موضح في Verify App Check tokens من خلفية مخصصة .

قبل ان تبدأ

أضف 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.
};