Melindungi resource non-Firebase dengan App Check di aplikasi web

Anda dapat melindungi resource non-Firebase aplikasi, seperti backend yang dihosting sendiri dengan App Check. Untuk melaksanakannya, Anda harus 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 agar mewajibkan token App Check yang valid untuk setiap permintaan, seperti yang dijelaskan dalam artikel Memverifikasi token App Check dari backend kustom.

Sebelum memulai

Tambahkan App Check ke aplikasi Anda menggunakan penyedia reCAPTCHA Enterprise atau penyedia kustom.

Mengirim token App Check dengan permintaan backend

Di klien aplikasi Anda, sebelum setiap permintaan, dapatkan token App Check yang valid dan belum habis masa berlakunya dengan appCheck().getToken(). Library App Check akan memperbarui token jika diperlukan.

Setelah Anda memiliki token yang valid, kirim token tersebut beserta permintaan ke backend Anda. Anda yang menentukan cara paling tepat untuk melakukannya, tetapi jangan kirim token App Check sebagai bagian dari URL, termasuk di parameter kueri. Hal ini akan membuat token rentan terhadap kebocoran dan intersepsi yang tidak sengaja. Contoh berikut mengirimkan token di header HTTP kustom, yang merupakan pendekatan yang direkomendasikan.

Web

import { initializeAppCheck, getToken } from '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.
};appcheck_nonfirebase.js

Web

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

Perlindungan replay (beta)

Saat membuat permintaan ke endpoint untuk perlindungan replay yang telah diaktifkan, dapatkan token menggunakan getLimitedUseToken(), bukan getToken():

import { getLimitedUseToken } from "firebase/app-check";

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);