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

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

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

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

  • Bu sayfada açıklandığı gibi, uygulama istemcinizi arka ucunuza her istekle birlikte bir Uygulama Kontrolü belirteci gönderecek şekilde değiştirin.
  • Özel bir arka uçtan Uygulama Kontrolü belirteçlerini doğrulama bölümünde açıklandığı gibi, arka ucunuzu her istekte geçerli bir Uygulama Kontrolü belirteci gerektirecek şekilde değiştirin.

Sen başlamadan önce

reCAPTCHA v3 sağlayıcısı , reCAPTCHA Enterprise sağlayıcısı veya özel bir sağlayıcı kullanarak uygulamanıza Uygulama Kontrolü ekleyin.

Arka uç istekleriyle Uygulama Kontrolü belirteçleri gönder

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

Geçerli bir jetonunuz olduğunda, 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 , çünkü bu onları yanlışlıkla sızıntı ve müdahaleye karşı savunmasız hale getirir. Aşağıdaki örnek, belirteci, önerilen yaklaşım olan özel bir HTTP başlığında gönderir.

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