वेब ऐप्लिकेशन में, ऐप्लिकेशन की जांच की सुविधा की मदद से कस्टम बैकएंड संसाधनों को सुरक्षित रखना

App Check का इस्तेमाल करके, अपने ऐप्लिकेशन के लिए Google के अलावा अन्य कस्टम बैकएंड रिसॉर्स को सुरक्षित किया जा सकता है. जैसे, खुद होस्ट किया गया बैकएंड. इसके लिए, आपको ये दोनों काम करने होंगे:

  • अपने ऐप्लिकेशन क्लाइंट में बदलाव करें, ताकि वह आपके बैकएंड को हर अनुरोध के साथ App Check टोकन भेज सके. इसके बारे में इस पेज पर बताया गया है.
  • अपने बैकएंड में बदलाव करें, ताकि हर अनुरोध के साथ मान्य App Check टोकन की ज़रूरत पड़े. इसके बारे में कस्टम बैकएंड से App Check टोकन की पुष्टि करना लेख में बताया गया है.

शुरू करने से पहले

reCAPTCHA Enterprise provider या कस्टम प्रोवाइडर का इस्तेमाल करके, अपने ऐप्लिकेशन में App Check जोड़ें.

बैकएंड अनुरोधों के साथ App Check टोकन भेजना

अपने ऐप्लिकेशन क्लाइंट में, हर अनुरोध से पहले, मान्य और समयसीमा खत्म न हुआ App Check टोकन पाएं. इसके लिए, appCheck().getToken() का इस्तेमाल करें. अगर ज़रूरी होगा, तो App Check लाइब्रेरी टोकन को रीफ़्रेश करेगी.

मान्य टोकन मिलने के बाद, इसे अनुरोध के साथ अपने बैकएंड को भेजें. इसे कैसे पूरा करना है, यह आप पर निर्भर करता है. हालांकि, यूआरएल के हिस्से के तौर पर App Check टोकन न भेजें. इनमें क्वेरी पैरामीटर भी शामिल हैं, क्योंकि इससे वे गलती से लीक हो सकते हैं और उन्हें इंटरसेप्ट किया जा सकता है. यहां दिए गए उदाहरण में, टोकन को कस्टम एचटीटीपी हेडर में भेजा गया है. हमारा सुझाव है कि आप भी ऐसा ही करें.

Web

import { initializeAppCheck, getToken } from '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

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.
};

रीप्ले प्रोटेक्शन (बीटा वर्शन)

जिस एंडपॉइंट के लिए आपने रीप्ले प्रोटेक्शन चालू किया है उसके लिए अनुरोध करते समय, getToken() के बजाय getLimitedUseToken() का इस्तेमाल करके टोकन पाएं:

import { getLimitedUseToken } from "firebase/app-check";

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);