Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

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

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

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

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

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

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

Web version 9

const { initializeAppCheck, getToken } = require('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 version 8

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