Protégez les ressources en dehors de Firebase avec App Check dans les applications Web

Vous pouvez protéger les ressources non Firebase de votre application, telles que les backends auto-hébergés, avec App Check. Pour ce faire, vous devez effectuer les deux opérations suivantes:

• Modifiez le client de votre application pour qu'il envoie un jeton App Check avec chaque requête à votre backend, comme décrit sur cette page.
• Modifiez votre backend pour exiger un jeton App Check valide avec chaque requête, comme décrit dans la section Valider les jetons App Check à partir d'un backend personnalisé.

Avant de commencer

Ajoutez App Check à votre application à l'aide de la méthode Fournisseur reCAPTCHA Enterprise ou un fournisseur personnalisé.

Envoyer des jetons App Check avec des requêtes backend

Dans le client de votre application, avant chaque requête, obtenez un jeton App Check valide et non expiré avec appCheck().getToken(). La bibliothèque App Check actualise le jeton si nécessaire.

Une fois que vous disposez d'un jeton valide, envoyez-le avec la requête à votre backend. La les détails de la façon dont vous allez y parvenir vous appartiennent, mais n'envoyez pas des jetons App Check dans les URL, y compris dans les paramètres de requête, les rend vulnérables aux fuites et aux interceptions accidentelles. Les éléments suivants : "exemple" envoie le jeton dans un en-tête HTTP personnalisé, approche.

Web

<ph type="x-smartling-placeholder">

</ph> Apprendre en savoir plus sur l'API Web modulaire en arbre et les arbres mise à niveau à partir de l'API d'espace de noms.

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

Protection contre le rejeu (bêta)

Lorsque vous envoyez une requête à un point de terminaison pour lequel vous avez activé Protection contre les attaques par rejeu acquérez un jeton en utilisant getLimitedUseToken() au lieu de getToken():

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);