Lindungi sumber daya non-Firebase dengan App Check di aplikasi web

Anda dapat melindungi sumber daya non-Firebase aplikasi Anda, seperti backend yang dihosting sendiri, dengan App Check. Untuk melakukannya, Anda perlu melakukan kedua hal berikut:

  • Ubah klien aplikasi Anda untuk mengirim token App Check bersama dengan setiap permintaan ke backend Anda, seperti yang dijelaskan di halaman ini.
  • Ubah backend Anda agar memerlukan token App Check yang valid dengan setiap permintaan, seperti yang dijelaskan dalam Verifikasi token App Check dari backend khusus .

Sebelum kamu memulai

Tambahkan App Check ke aplikasi Anda, baik menggunakan penyedia reCAPTCHA v3 , penyedia reCAPTCHA Enterprise , atau penyedia khusus .

Kirim token App Check dengan permintaan backend

Di klien aplikasi Anda, sebelum setiap permintaan, dapatkan token App Check yang valid dan belum kedaluwarsa dengan appCheck().getToken() . Pustaka App Check akan menyegarkan token jika perlu.

Setelah Anda memiliki token yang valid, kirimkan bersama dengan permintaan ke backend Anda. Spesifik tentang bagaimana Anda melakukannya terserah Anda, tetapi jangan mengirim token App Check sebagai bagian dari URL , termasuk dalam parameter kueri, karena ini membuat mereka rentan terhadap kebocoran dan intersepsi yang tidak disengaja. Contoh berikut mengirimkan token dalam header HTTP khusus, yang merupakan pendekatan yang disarankan.

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