ปกป้องทรัพยากรที่ไม่ใช่ Firebase ด้วย App Check ในเว็บแอป

คุณสามารถปกป้องทรัพยากรที่ไม่ใช่ Firebase ของแอปได้ เช่น แบ็กเอนด์ที่โฮสต์เอง ด้วย App Check โดยคุณจะต้องทำทั้งสองอย่างต่อไปนี้:

  • แก้ไขไคลเอ็นต์ของแอปเพื่อส่งโทเค็น App Check พร้อมกับคำขอแต่ละรายการไปยังแบ็กเอนด์ของคุณ ตามที่อธิบายไว้ในหน้านี้
  • แก้ไขแบ็กเอนด์ของคุณเพื่อกำหนดให้ต้องมีโทเค็น App Check ที่ถูกต้องกับทุกคำขอ ตามที่อธิบายไว้ใน ยืนยันโทเค็น App Check จากแบ็กเอนด์ที่กำหนดเอง

ก่อนที่คุณจะเริ่ม

เพิ่ม App Check ลงในแอปของคุณ โดยใช้ ผู้ให้บริการ reCAPTCHA Enterprise หรือ ผู้ให้บริการที่กำหนดเอง

ส่งโทเค็น App Check พร้อมคำขอแบ็กเอนด์

ในไคลเอนต์แอปของคุณ ก่อนแต่ละคำขอ ให้รับโทเค็น App Check ที่ถูกต้องและยังไม่หมดอายุด้วย appCheck().getToken() ไลบรารี App Check จะรีเฟรชโทเค็นหากจำเป็น

เมื่อคุณมีโทเค็นที่ถูกต้องแล้ว ให้ส่งไปพร้อมกับคำขอไปยังแบ็กเอนด์ของคุณ ข้อมูลเฉพาะเจาะจงว่าคุณจะบรรลุผลสำเร็จได้อย่างไรนั้นขึ้นอยู่กับคุณ แต่ อย่าส่งโทเค็น App Check เป็นส่วนหนึ่งของ URL รวมถึงในพารามิเตอร์การค้นหา เนื่องจากจะทำให้โทเค็นเสี่ยงต่อการรั่วไหลและการสกัดกั้นโดยไม่ตั้งใจ ตัวอย่างต่อไปนี้ส่งโทเค็นในส่วนหัว HTTP ที่กำหนดเอง ซึ่งเป็นแนวทางที่แนะนำ

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

การป้องกันการเล่นซ้ำ (เบต้า)

เมื่อทำการร้องขอไปยังปลายทางที่คุณได้เปิดใช้งาน การป้องกันการเล่นซ้ำ ให้รับโทเค็นโดยใช้ getLimitedUseToken() แทน getToken() :

import { getLimitedUseToken } from "firebase/app-check";

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);