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

Anda dapat melindungi sumber daya non-Firebase aplikasi, 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 beserta setiap permintaan ke backend Anda, seperti yang dijelaskan di halaman ini.
• Ubah backend Anda untuk mewajibkan token App Check yang valid dengan setiap permintaan, seperti yang dijelaskan dalam Memverifikasi token App Check dari backend khusus .

Sebelum kamu memulai

Tambahkan App Check ke aplikasi Anda, 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 beserta permintaan ke backend Anda. Anda dapat menentukan secara spesifik cara melakukannya, tetapi jangan mengirim token App Check sebagai bagian dari URL , termasuk dalam parameter kueri, karena hal ini membuat token rentan terhadap kebocoran dan penyadapan yang tidak disengaja. Contoh berikut mengirimkan token dalam header HTTP khusus, yang merupakan pendekatan yang disarankan.

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

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