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

Sie können die Nicht-Firebase-Ressourcen Ihrer App, wie z. B. selbst gehostete Back-Ends, mit App Check schützen. Dazu müssen Sie die beiden folgenden Schritte ausführen:

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

Bevor Sie beginnen

Fügen Sie Ihrer App App Check hinzu, indem Sie entweder den reCAPTCHA v3-Anbieter , 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 mit appCheck().getToken() ein gültiges, nicht abgelaufenes App Check-Token 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 dies im Einzelnen erreichen, liegt bei Ihnen, aber senden Sie App Check-Token nicht als Teil von URLs, auch nicht in Abfrageparametern, da sie dadurch anfällig für versehentliches Durchsickern und Abfangen werden. Das folgende Beispiel sendet das Token in einem benutzerdefinierten HTTP-Header, was der empfohlene Ansatz ist.

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