Bảo vệ các tài nguyên không phải của Firebase bằng ứng dụng web 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 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ừ 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 v3 , 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 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.

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 chương trình phụ trợ của bạn. Chi tiết cụ thể về cách bạn thực hiện điều này tùy thuộc vào bạn, nhưng khô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 ngẫu nhiên. 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.

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

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

Bảo vệ phát lại (beta)

Khi gửi yêu cầu tới một điểm cuối mà bạn đã bật bảo vệ phát lại , hãy nhận 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);