Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

  • Modifiez votre client d'application pour envoyer un jeton App Check avec chaque demande à votre backend, comme décrit sur cette page.
  • Modifier votre back - end pour exiger une application valide Vérifiez jeton à chaque requête, comme décrit dans Vérifier App Vérifiez jetons à partir d' un back - end personnalisé .

Avant que tu commences

Ajouter App Vérifiez votre application, en utilisant par défaut fournisseur reCAPTCHA v3 , ou un fournisseur personnalisé .

Envoyer des jetons App Check avec des requêtes backend

Dans votre client d'application, avant chaque demande, obtenir un valide, restant à courir, App Check jeton 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. Les détails de la façon dont vous accomplissez ce sont à vous, mais ne pas envoyer App Vérifiez les jetons dans le cadre d'URL, y compris dans les paramètres de la requête, car cela les rend vulnérables aux fuites et l' interception accidentelle. 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.
};