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

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

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

ก่อนเริ่มต้น

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

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

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

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

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

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

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

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);