वेब ऐप्स में ऐप चेक के साथ गैर-फ़ायरबेस संसाधनों को सुरक्षित रखें

आप ऐप चेक के साथ अपने ऐप के गैर-फ़ायरबेस संसाधनों, जैसे स्व-होस्ट किए गए बैकएंड की सुरक्षा कर सकते हैं। ऐसा करने के लिए, आपको निम्नलिखित दोनों कार्य करने होंगे:

• अपने ऐप क्लाइंट को अपने बैकएंड पर प्रत्येक अनुरोध के साथ एक ऐप चेक टोकन भेजने के लिए संशोधित करें, जैसा कि इस पृष्ठ पर बताया गया है।
• प्रत्येक अनुरोध के साथ एक वैध ऐप चेक टोकन की आवश्यकता के लिए अपने बैकएंड को संशोधित करें, जैसा कि कस्टम बैकएंड से ऐप चेक टोकन सत्यापित करें में वर्णित है।

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

reCAPTCHA एंटरप्राइज़ प्रदाता या कस्टम प्रदाता का उपयोग करके, अपने ऐप में ऐप चेक जोड़ें।

बैकएंड अनुरोधों के साथ ऐप चेक टोकन भेजें

अपने ऐप क्लाइंट में, प्रत्येक अनुरोध से पहले, appCheck().getToken() के साथ एक वैध, असमाप्त, ऐप चेक टोकन प्राप्त करें। यदि आवश्यक हो तो ऐप चेक लाइब्रेरी टोकन को रीफ्रेश कर देगी।

एक बार जब आपके पास वैध टोकन हो, तो इसे अनुरोध के साथ अपने बैकएंड पर भेजें। आप इसे कैसे पूरा करते हैं, इसकी बारीकियां आप पर निर्भर करती हैं, लेकिन क्वेरी पैरामीटर सहित यूआरएल के हिस्से के रूप में ऐप चेक टोकन न भेजें , क्योंकि इससे वे आकस्मिक रिसाव और अवरोधन के प्रति संवेदनशील हो जाते हैं। निम्नलिखित उदाहरण एक कस्टम HTTP हेडर में टोकन भेजता है, जो अनुशंसित दृष्टिकोण है।

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

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);