Benutzerdefinierte Backend-Ressourcen in Web-Apps mit App Check schützen

Mit App Check können Sie benutzerdefinierte Back-End-Ressourcen schützen, die nicht von Google stammen, z. B. Ihr eigenes selbst gehostetes Back-End für Ihre App. Dazu müssen Sie beide folgenden Schritte ausführen:

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 Back-End-Anfragen senden

Rufen Sie im 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 Back-End. Wie Sie das tun, bleibt Ihnen überlassen. Senden Sie App Check Tokens jedoch nicht als Teil von URLs, auch nicht in Abfrageparametern, da sie dadurch anfällig für versehentliche Weitergabe und Abfangen werden. Im folgenden Beispiel wird das Token in einem benutzerdefinierten HTTP-Header gesendet. Das ist die empfohlene Methode.

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

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

Wiedergabeschutz (Beta)

Wenn Sie eine Anfrage an einen Endpunkt senden, für den Sie den Wiedergabeschutzaktiviert haben, rufen Sie ein Token mit getLimitedUseToken() anstelle von getToken() ab:

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);