เริ่มต้นใช้งาน 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. ไม่บังคับ: ในการตั้งค่าการลงทะเบียนแอป ให้ตั้งค่า 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. เริ่มต้น App Check

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

Web

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

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 ไม่จำเป็นต้องใช้โทเค็น จะยังมีผลจนกว่าคุณจะเปิดใช้การบังคับใช้ในส่วน App Check ของ คอนโซล Firebase

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

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

โปรดดูเมตริก App Check สำหรับ บริการที่คุณใช้:

เปิดใช้การบังคับใช้ App Check

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

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

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

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