ปกป้องทรัพยากรแบ็กเอนด์ที่กําหนดเองด้วย App Check ในเว็บแอป

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

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

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

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

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

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

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

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

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

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

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

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);