Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

Sie können die Nicht-Firebase-Ressourcen Ihrer App, z. B. selbstgehostete Back-Ends, mit App Check schützen. Dazu müssen Sie beides tun:

Bevor Sie beginnen

In App überprüfen , um Ihre Anwendung, entweder den Standard mit reCAPTCHA v3 - Provider oder einen benutzerdefinierten Anbieter .

Senden Sie App-Check-Token mit Back-End-Anfragen

In der App - Client vor jeder Anfrage, erhalten Sie eine gültige, nicht abgelaufene, App prüft mit Token appCheck().getToken() . 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. Die Besonderheiten, wie Sie dies zu erreichen sind bis zu Ihnen, aber nicht App überprüfen Token als Teil von URLs, einschließlich in Abfrageparametern senden, da dies sie anfällig für versehentliche Leckage und Abfangen macht. Im folgenden Beispiel wird das Token in einem benutzerdefinierten HTTP-Header gesendet, was der empfohlene Ansatz ist.

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

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