Catch up on highlights from Firebase at Google I/O 2023. Learn more

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

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

reCAPTCHA v3 เป็นบริการที่ไม่มีค่าใช้จ่าย App Check ยังรองรับ reCAPTCHA Enterprise ซึ่งเป็นบริการแบบชำระเงินที่ไม่มีโควต้า หากต้องการเรียนรู้ความแตกต่างระหว่าง reCAPTCHA v3 และ reCAPTCHA Enterprise โปรดดู การเปรียบเทียบคุณลักษณะต่างๆ

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

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

1. ตั้งค่าโครงการ Firebase ของคุณ

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

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

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

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

  4. ทางเลือก : ในการตั้งค่าการลงทะเบียนแอพ ให้ตั้งค่า time-to-live (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 version 9

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
});
appcheck_initialize.js

Web version 8

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);
index.js

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

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

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

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

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

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

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

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

ใช้ App Check ในสภาพแวดล้อมการดีบัก

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

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