Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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:

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.

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