Bergabunglah dengan kami secara langsung dan online di Firebase Summit pada 18 Oktober 2022. Pelajari cara Firebase dapat membantu Anda mempercepat pengembangan aplikasi, merilis aplikasi dengan percaya diri, dan menentukan skala dengan mudah. Daftar sekarang

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

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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