Nicht Firebase-Ressourcen in Web-Apps mit App Check schützen

Sie können die nicht Firebase-Ressourcen Ihrer App, z. B. selbst gehostete Backends, mit App Check schützen. Dazu müssen Sie Folgendes tun:

Ändern Sie Ihren App-Client so, dass er mit jeder Anfrage ein App Check-Token an Ihr Backend sendet, wie auf dieser Seite beschrieben.
Ändern Sie Ihr Backend so, dass für jede Anfrage ein gültiges App Check-Token erforderlich ist, wie unter App Check-Tokens aus einem benutzerdefinierten Backend überprüfen beschrieben.

Hinweis

Fügen Sie App Check Ihrer App hinzu. Verwenden Sie dazu entweder den reCAPTCHA Enterprise-Anbieter oder einen benutzerdefinierten Anbieter.

App Check-Tokens mit Backendanfragen 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 du ein gültiges Token hast, sende es zusammen mit der Anfrage an dein Backend. Wie du das genau umsetzt, liegt ganz bei dir. Sende App Check-Tokens jedoch nicht als Teil von URLs, auch nicht in Abfrageparametern, da sie dadurch anfällig für versehentliches Lecken und Abfangen sind. 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.
};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

Replay-Schutz (Beta)

Wenn du eine Anfrage an einen Endpunkt sendest, für den du den Replay-Schutz aktiviert hast, musst du ein Token mit getLimitedUseToken() statt getToken() abrufen:

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);