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

Mit App Check können Sie die Nicht-Firebase-Ressourcen Ihrer App, z. B. selbstgehostete Backends, schützen. Dazu müssen Sie beide der folgenden Schritte ausführen:

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

Bevor Sie beginnen

Fügen Sie App Check zu Ihrer App hinzu, indem Sie entweder den reCAPTCHA Enterprise-Anbieter oder einen benutzerdefinierten Anbieter verwenden.

Senden Sie App-Check-Tokens mit Backend-Anfragen

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 über ein gültiges Token verfügen, senden Sie es zusammen mit der Anfrage an Ihr Backend. Wie Sie dies im Einzelnen erreichen, liegt bei Ihnen, aber senden Sie App Check-Tokens nicht als Teil von URLs, auch nicht in Abfrageparametern, da sie dadurch anfällig für versehentliche Datenlecks und Abhörvorgänge sind. Im folgenden Beispiel wird das Token in einem benutzerdefinierten HTTP-Header gesendet. Dies ist die empfohlene Vorgehensweise.

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

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

Wiedergabeschutz (Beta)

Wenn Sie eine Anfrage an einen Endpunkt stellen, für den Sie den Wiedergabeschutz aktiviert haben, fordern Sie ein Token mit getLimitedUseToken() anstelle von getToken() an:

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);