वेब ऐप्लिकेशन में 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.
};
appcheck_nonfirebase.js

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

रीप्ले की सुरक्षा (बीटा वर्शन)

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

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);