ปกป้องทรัพยากรที่ไม่ใช่ 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);