Bảo vệ tài nguyên phụ trợ tuỳ chỉnh bằng tính năng Kiểm tra ứng dụng trong ứng dụng web

Bạn có thể dùng App Check để bảo vệ các tài nguyên phụ trợ tuỳ chỉnh không phải của Google cho ứng dụng của mình, chẳng hạn như phụ trợ tự lưu trữ của riêng bạn. Để làm như vậy, bạn cần thực hiện cả hai việc sau:

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 trình cung cấp reCAPTCHA Enterprise hoặc trì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, trước mỗi yêu cầu, hãy lấy một 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ợ của bạn. Bạn có thể tự quyết định cách thực hiện việc này, nhưng đừng gửi mã thông báo App Check trong URL, kể cả trong các tham số truy vấn, vì điều này khiến các mã thông báo dễ bị rò rỉ và bị chặn một cách vô tình. 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

Bảo vệ khỏi các cuộc tấn cô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 chống phát 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);