Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

ก่อนจะเริ่ม

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

ส่งโทเค็นตรวจสอบแอปพร้อมคำขอแบ็กเอนด์

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

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

เว็บรุ่น 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.
};

เว็บรุ่น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.
};