Bảo vệ các tài nguyên không phải Firebase bằng tính năng Kiểm tra ứng dụng trong các ứng dụng web

Bạn có thể bảo vệ những tài nguyên không phải Firebase của ứng dụng, chẳng hạn như các chương trình phụ trợ tự lưu trữ, cùng với App Check. Để thực hiện điều này, bạn cần phải thực hiện cả hai việc sau:

  • Sửa đổi ứng dụng của bạn để gửi mã thông báo App Check cùng với mỗi yêu cầu vào phần phụ trợ của bạn, theo mô tả trên trang này.
  • Sửa đổi phần phụ trợ của bạn để yêu cầu mã thông báo App Check hợp lệ với mọi yêu cầu, như mô tả trong phần Xác minh mã thông báo App Check qua một phần phụ trợ tuỳ chỉnh.

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 yêu cầu phụ trợ

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

Sau khi bạn có mã thông báo hợp lệ, hãy gửi mã đó cùng với yêu cầu đến phần phụ trợ. Chiến lược phát hành đĩa đơn chi tiết cụ thể về cách bạn thực hiện việc này là tuỳ thuộc vào bạn, nhưng đừng gửi mã thông báo App Check như một phần của URL, bao gồm cả trong tham số truy vấn, như khiến chúng dễ bị rò rỉ và chặn do vô tình. Nội dung sau đây sẽ gửi mã thông báo trong một tiêu đề HTTP tuỳ chỉnh. Bạn nên phương pháp tiếp cận.

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

Chống phát lại (thử nghiệm)

Khi gửi yêu cầu đến điểm cuối mà bạn đã bật bảo vệ phát lại, lấy mã thông báo bằng cách sử dụng getLimitedUseToken() thay vì getToken():

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);