वेब ऐप्लिकेशन में App Check की मदद से, Firebase से बाहर के संसाधनों को सुरक्षित रखना

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

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

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

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

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

अपने ऐप्लिकेशन क्लाइंट में, हर अनुरोध से पहले, appCheck().getToken() के साथ मान्य और समयसीमा खत्म न हुआ App Check टोकन पाएं. ज़रूरत पड़ने पर, 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);