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ữ, bằng tính năng Kiểm tra ứng dụng. Để thực hiện điều này, bạn cần phải thực hiện cả hai việc sau:

Trước khi bắt đầu

Thêm tính năng 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 tuỳ chỉnh.

Gửi mã thông báo Kiểm tra ứng dụng cù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 tận hưởng tính năng Kiểm tra ứng dụng hợp lệ, chưa hết hạn mã thông báo với appCheck().getToken(). Thư viện Kiểm tra ứng dụng 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 Kiểm tra ứng dụng 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.
};
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

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);