Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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ư phần phụ trợ tự lưu trữ, bằng Kiểm tra ứng dụng. Để làm như vậy, bạn sẽ cần thực hiện cả hai thao tác 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 mỗi yêu cầu đến 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, 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.

Khi bạn có một 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. Chi tiết cụ thể về cách bạn thực hiện điều này là 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 , bao gồm cả trong các tham số truy vấn, vì điều này khiến chúng dễ bị rò rỉ và đánh chặn vô tình. Ví dụ sau gửi mã thông báo trong tiêu đề HTTP tùy chỉnh, đây là cách tiếp cận được đề xuất.

Web version 9

const { initializeAppCheck, getToken } = require('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 version 8

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