ปกป้องทรัพยากรที่ไม่ใช่ 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 ที่กําหนดเอง ซึ่งเป็นแนวทางที่แนะนํา

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

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

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

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);