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

Uygulamanızın, şirket içinde barındırılan arka uçlar gibi Firebase dışı kaynaklarını Uygulama Kontrolü ile koruyabilirsiniz. Bunu yapmak için aşağıdakilerden ikisini de yapmanız gerekir:

Sen başlamadan önce

ReCAPTCHA Enterprise sağlayıcısını veya özel bir sağlayıcıyı kullanarak uygulamanıza Uygulama Kontrolü ekleyin.

Arka uç istekleriyle Uygulama Kontrolü belirteçlerini gönderin

Uygulama istemcinizde, her istekten önce, appCheck().getToken() ile geçerli, süresi dolmamış bir Uygulama Denetimi jetonu alın. Uygulama Kontrolü kütüphanesi gerekirse belirteci yenileyecektir.

Geçerli bir tokena sahip olduğunuzda bunu istekle birlikte arka ucunuza gönderin. Bunu nasıl başaracağınıza ilişkin ayrıntılar size bağlıdır, ancak Uygulama Kontrolü belirteçlerini, sorgu parametreleri de dahil olmak üzere URL'lerin bir parçası olarak göndermeyin ; aksi takdirde bu, yanlışlıkla sızmaya ve ele geçirilmeye karşı savunmasız hale gelir. Aşağıdaki örnek, belirteci, önerilen yaklaşım olan özel bir HTTP üstbilgisinde gönderir.

Web modular API

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 namespaced API

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

Tekrar oynatma koruması (beta)

Tekrar oynatma korumasını etkinleştirdiğiniz bir uç noktaya istekte bulunurken, getToken() getLimitedUseToken() () kullanarak bir belirteç edinin:

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);