Protéger les ressources backend personnalisées avec App Check dans les applications Web

Vous pouvez utiliser App Check pour protéger les ressources de backend personnalisées non Google pour votre application, comme votre propre backend auto-hébergé. 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 qu'il exige un jeton App Check valide avec chaque requête, comme décrit dans Valider les jetons App Check à partir d'un backend personnalisé.

Avant de commencer

Ajoutez App Check à votre application à l'aide du fournisseur reCAPTCHA Enterprise ou d'un fournisseur personnalisé.

Envoyer des App Check jetons avec des requêtes de 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 actualisera le jeton si nécessaire.

Une fois que vous disposez d'un jeton valide, envoyez-le avec la requête à votre backend. La manière dont vous procédez dépend de vous, mais n'envoyez pas App Check de jetons dans les URL, y compris dans les paramètres de requête, car cela les rend vulnérables aux fuites et aux interceptions accidentelles. L'exemple suivant envoie le jeton dans un en-tête HTTP personnalisé, ce qui est l'approche recommandée.

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

Protection contre le rejeu (bêta)

Lorsque vous effectuez une requête auprès d'un point de terminaison pour lequel vous avez activé la protection contre le rejeu, acquérez un jeton à l'aide de getLimitedUseToken() au lieu de getToken() :

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);