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ệ các tài nguyên không phải của Firebase trong ứng dụng, chẳng hạn như các phần phụ trợ tự lưu trữ, bằng App Check. Để làm như vậy, bạn cần thực hiện cả hai việc sau:

Sửa đổi ứng dụng khách để gửi mã thông báo App Check cùng với mỗi yêu cầu đến phần phụ trợ, như mô tả trên trang này.
Sửa đổi phần phụ trợ để yêu cầu mã thông báo App Check hợp lệ cho mọi yêu cầu, như mô tả trong phần Xác minh mã thông báo App Check 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 bằng 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 App Check hợp lệ, chưa hết hạn bằng appCheck().getToken(). Thư viện App Check sẽ làm mới mã thông báo nếu cần.

Sau khi bạn 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 phần phụ trợ. Bạn có thể tuỳ ý thực hiện việc này, nhưng đừng gửi mã thông báo App Check dưới dạng một phần của URL, bao gồm cả trong tham số truy vấn, vì điều này khiến mã thông báo dễ bị rò rỉ và chặn ngoài ý muốn. Ví dụ sau đây sẽ gửi mã thông báo trong một 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.
};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

Tính năng chố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ệ chố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);