Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Protégez les ressources non Firebase avec App Check dans les applications Web

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

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 devrez effectuer les deux opérations suivantes :

Avant que tu commences

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

Envoyer des jetons App Check avec des requêtes backend

Dans votre client d'application, avant chaque demande, 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 avez un jeton valide, envoyez-le avec la demande à votre backend. C'est à vous de décider comment procéder, mais n'envoyez pas de jetons App Check dans le cadre d'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 version 9

const { initializeAppCheck, getToken } = require('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 version 8

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