เริ่มต้นใช้งาน 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. ในคอนโซล Firebase ให้ไปที่ความปลอดภัย > App Check

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

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

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

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

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

กำหนดค่าการตั้งค่าขั้นสูง (ไม่บังคับ)

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

สำหรับ Use Case ส่วนใหญ่ เราขอแนะนำให้ใช้ค่าเกณฑ์เริ่มต้นที่ 0.5 หาก Use Case ของคุณต้องมีการปรับเปลี่ยน คุณสามารถกำหนดค่าได้ในส่วน App Checkของ Firebaseสำหรับเว็บแอปแต่ละแอป

รายละเอียด

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

  • หากต้องการตรวจสอบการกระจายคะแนน reCAPTCHA v3 สำหรับเว็บแอป ให้ไปที่ คอนโซลผู้ดูแลระบบ reCAPTCHA แล้ว เลือกเว็บไซต์ที่ตรงกับเว็บแอป

  • หากคุณยอมรับความเสี่ยงของแอปได้ต่ำ ให้เลื่อนแถบเลื่อนไปทางซ้าย เพื่อเพิ่มเกณฑ์ความเสี่ยงของแอป

    • เราไม่แนะนำให้ใช้ค่า 1.0 เนื่องจากค่านี้อาจปฏิเสธการเข้าถึงของผู้ใช้ที่ถูกต้องซึ่งมีคุณสมบัติไม่ตรงตามเกณฑ์ความน่าเชื่อถือสูงนี้

  • หากคุณยอมรับความเสี่ยงของแอปได้สูง ให้เลื่อนแถบเลื่อนไปทางขวา เพื่อลดเกณฑ์ความเสี่ยงของแอป

    • เราไม่แนะนำให้ใช้ค่า 0.0 เนื่องจากค่านี้จะปิดใช้การป้องกันการละเมิด

โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบ reCAPTCHA v3

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
});

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);

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

เมื่อติดตั้งไลบรารี 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 กับผู้ให้บริการการแก้ไขข้อบกพร่องในเว็บแอป