Bảo vệ tài nguyên phụ trợ tuỳ chỉnh bằng tính năng Kiểm tra ứng dụng trong ứng dụng web

Bạn có thể sử dụng App Check để bảo vệ các tài nguyên phụ trợ tuỳ chỉnh không phải của Google cho ứng dụng của mình, chẳng hạn như chương trình phụ trợ tự lưu trữ của riêng bạn. Để làm như vậy, bạn cần thực hiện cả hai việc sau:

Trước khi bắt đầu

Thêm App Check vào ứng dụng của bạn bằng cách sử dụng nhà cung cấp reCAPTCHA Enterprise hoặc nhà cung cấp tuỳ chỉnh.

Gửi mã thông báo App Check cùng với các yêu cầu phụ trợ

Trong ứng dụng khách, trước mỗi yêu cầu, hãy lấy mã thông báo hợp lệ, chưa hết hạn bằng App Check appCheck().getToken(). Thư viện App Check sẽ làm mới mã thông báo nếu cần.

Sau khi có mã thông báo hợp lệ, hãy gửi mã thông báo đó cùng với yêu cầu đến chương trình phụ trợ của bạn. Bạn có thể tự quyết định cách thực hiện việc này, nhưng không gửi App Check mã thông báo trong URL, kể cả trong các tham số truy vấn, vì điều này khiến mã thông báo dễ bị rò rỉ và bị chặn một cách vô tình. Ví dụ sau đây gửi mã thông báo trong tiêu đề HTTP tuỳ chỉnh, đây là phương pháp được đề xuất.

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

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

Bảo vệ khỏi các cuộc tấn công phát lại (thử nghiệm)

Khi đưa ra yêu cầu đến một điểm cuối mà bạn đã bật tính năng bảo vệ khỏi các cuộc tấn công phát lại, hãy lấy mã thông báo bằng getLimitedUseToken() thay vì getToken():

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);