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

Bạn có thể bảo vệ các 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ữ, bằng Kiểm tra ứng dụng. Để làm như vậy, bạn sẽ cần phải thực hiện cả hai điều sau:

  • Sửa đổi ứng dụng khách ứng dụng của bạn để gửi mã thông báo Kiểm tra ứng dụng cùng với từng yêu cầu tới chương trình phụ trợ của bạn, như được mô tả trên trang này.
  • Sửa đổi chương trình phụ trợ của bạn để yêu cầu mã thông báo Kiểm tra ứng dụng hợp lệ với mọi yêu cầu, như được mô tả trong Xác minh mã thông báo Kiểm tra ứng dụng từ chương trình phụ trợ tùy chỉnh .

Trước khi bắt đầu

Thêm Kiểm tra ứng dụng 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 tùy chỉnh .

Gửi mã thông báo kiểm tra ứng dụng với các yêu cầu phụ trợ

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

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

Web modular API

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 namespaced API

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ệ phát lại (beta)

Khi đưa ra yêu cầu tới điểm cuối mà bạn đã bật tính năng bảo vệ chống lặp lại , hãy 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);