Web uygulamalarında Uygulama Kontrolü ile Firebase dışı kaynakları koruyun

Uygulamanızın Firebase dışındaki kaynaklarını (ör. kendi kendine barındırılan arka uçlar) App Check ile koruyabilirsiniz. Bunun için aşağıdakilerin ikisini birden yapmanız gerekir:

Bu sayfada açıklandığı gibi, uygulama istemcinizi arka uçunuza her istekle birlikte bir App Check jetonu gönderecek şekilde değiştirin.
Arka uçunuzu, Özel arka uçtan App Check jetonlarını doğrulama bölümünde açıklandığı gibi her istek için geçerli bir App Check jetonu gerektirecek şekilde değiştirin.

Başlamadan önce

reCAPTCHA Enterprise sağlayıcısını veya özel sağlayıcıyı kullanarak uygulamanıza App Check ekleyin.

Arka uç istekleriyle App Check jetonları gönderme

Uygulama istemcinizde, her istekten önce appCheck().getToken() ile geçerli, süresi dolmamış bir App Check jeton alın. App Check kitaplığı, gerekirse jetonu yeniler.

Geçerli bir jeton aldıktan sonra isteği arka ucunuza jetonla birlikte gönderin. Bunu nasıl yapacağınız size bağlıdır ancak App Check jetonlarını URL'lerin bir parçası olarak göndermeyin. Sorgu parametreleri dahil olmak üzere URL'lere eklendiğinde, jetonlar yanlışlıkla sızıntıya ve müdahaleye açık hale gelir. Aşağıdaki örnekte, jeton önerilen yaklaşım olan özel bir HTTP üstbilgisinde gönderilmektedir.

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

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

Tekrar koruması (beta)

Tekrar oynatma korumasını etkinleştirdiğiniz bir uç noktaya istek gönderirken getToken() yerine getLimitedUseToken() kullanarak jeton edinin:

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);