Catch up on everthing we announced at this year's Firebase Summit. Learn more

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.
  • Memodifikasi backend Anda memerlukan App valid Periksa tanda dengan setiap permintaan, seperti yang dijelaskan dalam Verifikasi App Periksa token dari backend kustom .

Sebelum kamu memulai

Menambahkan App Periksa untuk aplikasi Anda, baik menggunakan default reCAPTCHA penyedia v3 , atau penyedia kustom .

Kirim token App Check dengan permintaan backend

Dalam aplikasi klien Anda, sebelum setiap permintaan, mendapatkan valid, belum berakhir, App Periksa token dengan appCheck().getToken() . Pustaka App Check akan menyegarkan token jika perlu.

Setelah Anda memiliki token yang valid, kirimkan bersama dengan permintaan ke backend Anda. Secara spesifik tentang bagaimana Anda mencapai hal ini adalah terserah Anda, tetapi tidak mengirimkan App Periksa token sebagai bagian dari URL, termasuk dalam parameter query, karena hal ini membuat mereka rentan terhadap kebocoran disengaja dan intersepsi. Contoh berikut mengirimkan token dalam header HTTP khusus, yang merupakan pendekatan yang disarankan.

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

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