Benutzerdefinierte Backend-Ressourcen in Web-Apps mit App Check schützen

Mit App Check können Sie benutzerdefinierte Backend-Ressourcen für Ihre App schützen, die nicht von Google stammen, z. B. Ihr eigenes selbst gehostetes Backend. Dazu müssen Sie Folgendes tun:

Hinweis

Fügen Sie App Check in Ihre App ein. Verwenden Sie dazu entweder den reCAPTCHA Enterprise-Anbieter oder einen benutzerdefinierten Anbieter.

App Check-Tokens mit Backend-Anfragen senden

Rufen Sie in Ihrem App-Client vor jeder Anfrage ein gültiges, nicht abgelaufenes App Check-Token mit appCheck().getToken() ab. Die App Check-Bibliothek aktualisiert das Token bei Bedarf.

Sobald Sie ein gültiges Token haben, senden Sie es zusammen mit der Anfrage an Ihr Backend. Wie Sie das genau umsetzen, liegt bei Ihnen. Senden Sie App Check-Tokens jedoch nicht als Teil von URLs, auch nicht in Suchparametern, da sie dadurch anfällig für versehentliches Weitergeben und Abfangen werden. Im folgenden Beispiel wird das Token in einem benutzerdefinierten HTTP-Header gesendet. Dies ist die empfohlene Vorgehensweise.

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

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

Schutz vor Replay-Angriffen (Beta)

Wenn Sie eine Anfrage an einen Endpunkt senden, für den Sie Replay-Schutz aktiviert haben, rufen Sie ein Token mit getLimitedUseToken() anstelle von getToken() ab:

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);