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 ที่ถูกต้องกับทุกคำขอ ตามที่อธิบายไว้ใน Verify App Check tokens จากแบ็กเอนด์ที่กำหนดเอง

ก่อนจะเริ่ม

เพิ่ม 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.
};