เริ่มต้นใช้งาน App Check กับ reCAPTCHA v3 ในเว็บแอป

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

โปรดทราบว่าผู้ใช้จะมองไม่เห็น reCAPTCHA v3 ผู้ให้บริการ reCAPTCHA v3 จะไม่กำหนดให้ผู้ใช้แก้ปัญหาเมื่อใดก็ได้ ดู เอกสาร reCAPTCHA v3

หากคุณต้องการใช้ App Check กับผู้ให้บริการที่กำหนดเอง โปรดดู ใช้งานผู้ให้บริการ App Check ที่กำหนดเอง

1. ตั้งค่าโปรเจ็กต์ Firebase ของคุณ

  1. เพิ่ม Firebase ในโครงการ JavaScript หากคุณยังไม่ได้ดำเนินการ

  2. ลงทะเบียนเว็บไซต์ของคุณสำหรับ reCAPTCHA v3 และรับรหัสเว็บไซต์และรหัสลับ reCAPTCHA v3 ของคุณ

  3. ลงทะเบียนแอปของคุณเพื่อใช้ App Check กับผู้ให้บริการ reCAPTCHA ในส่วน App Check ของคอนโซล Firebase คุณจะต้องระบุ รหัสลับ ที่คุณได้รับในขั้นตอนก่อนหน้า

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

  4. ทางเลือก : ในการตั้งค่าการลงทะเบียนแอป ให้ตั้งเวลาถ่ายทอดสด (TTL) ที่กำหนดเองสำหรับโทเค็น App Check ที่ออกโดยผู้ให้บริการ คุณสามารถตั้งค่า TTL เป็นค่าใดก็ได้ระหว่าง 30 นาทีถึง 7 วัน เมื่อเปลี่ยนค่านี้ โปรดคำนึงถึงข้อดีข้อเสียดังต่อไปนี้:

    • ความปลอดภัย: TTL ที่สั้นกว่าให้การรักษาความปลอดภัยที่แข็งแกร่งยิ่งขึ้น เนื่องจากจะช่วยลดหน้าต่างที่โทเค็นที่รั่วไหลหรือถูกสกัดกั้นสามารถถูกใช้โดยผู้โจมตีในทางที่ผิด
    • ประสิทธิภาพ: TTL ที่สั้นลงหมายความว่าแอปจะดำเนินการรับรองบ่อยขึ้น เนื่องจากกระบวนการรับรองแอปจะเพิ่มเวลาในการตอบสนองให้กับคำขอเครือข่ายทุกครั้งที่ดำเนินการ TTL สั้นๆ อาจส่งผลต่อประสิทธิภาพของแอปได้
    • โควต้าและค่าใช้จ่าย: TTL ที่สั้นลงและการรับรองซ้ำบ่อยครั้งจะทำให้โควต้าของคุณหมดเร็วขึ้น และสำหรับบริการแบบชำระเงินอาจมีค่าใช้จ่ายสูงกว่า ดู โควต้าและขีดจำกัด

    TTL เริ่มต้น 1 วัน นั้นสมเหตุสมผลสำหรับแอปส่วนใหญ่ โปรดทราบว่าไลบรารี App Check จะรีเฟรชโทเค็นที่ระยะเวลาประมาณครึ่งหนึ่งของ TTL

2. เพิ่มไลบรารี App Check ลงในแอปของคุณ

เพิ่ม Firebase ให้กับเว็บแอปของคุณ หากคุณยังไม่ได้เพิ่ม อย่าลืมนำเข้าไลบรารี App Check

3. เริ่มต้นการตรวจสอบแอป

เพิ่มรหัสการเริ่มต้นต่อไปนี้ลงในแอปพลิเคชันของคุณ ก่อนที่คุณจะเข้าถึงบริการ Firebase ใดๆ คุณจะต้องส่ง รหัสไซต์ reCAPTCHA ของคุณ ซึ่งคุณสร้างในคอนโซล reCAPTCHA เพื่อ activate()

Web modular API

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const app = initializeApp({
  // Your firebase configuration object
});

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true
});

Web namespaced API

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);

ขั้นตอนถัดไป

เมื่อติดตั้งไลบรารี App Check ในแอปของคุณแล้ว ให้ปรับใช้

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

ตรวจสอบตัวชี้วัดและเปิดใช้งานการบังคับใช้

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

เพื่อช่วยในการตัดสินใจนี้ คุณสามารถดูเมตริก App Check สำหรับบริการที่คุณใช้ได้ ดังนี้

เปิดใช้การบังคับใช้การตรวจสอบแอป

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

ใช้ App Check ในสภาพแวดล้อมการแก้ไขข้อบกพร่อง

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

ดู ใช้ App Check กับผู้ให้บริการแก้ไขจุดบกพร่องในเว็บแอป