Codelab ของการตรวจสอบแอป

1. บทนำ

อัปเดตล่าสุด: 23-02-2023

คุณจะป้องกันการเข้าถึงทรัพยากร Firebase โดยไม่ได้รับอนุญาตได้อย่างไร

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

คุณสามารถใช้ App Check เพื่อปกป้องคำขอไปยัง Cloud Firestore, Realtime Database, Cloud Functions, การตรวจสอบสิทธิ์ Firebase ด้วย Identity Platform และในแบ็กเอนด์ที่คุณโฮสต์เอง

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะรักษาความปลอดภัยให้แอปพลิเคชันแชทโดยเพิ่ม App Check ก่อน แล้วจึงบังคับใช้

สิ่งที่คุณจะได้เรียนรู้

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

สิ่งที่ต้องมี

• IDE/เครื่องมือแก้ไขข้อความที่คุณเลือก
• เครื่องมือจัดการแพ็กเกจ npm ซึ่งมักจะมาพร้อมกับ Node.js
• Firebase CLI ที่ติดตั้งและกำหนดค่าให้ทำงานกับบัญชีของคุณ
• เทอร์มินัล/คอนโซล
• เบราว์เซอร์ที่คุณเลือก เช่น Chrome
• โค้ดตัวอย่างของ Codelab (ดูวิธีรับโค้ดได้ในขั้นตอนถัดไปของ Codelab)

2. รับโค้ดตัวอย่าง

โคลนที่เก็บ GitHub ของ Codelab จากบรรทัดคำสั่งโดยทำดังนี้

git clone https://github.com/firebase/codelab-friendlychat-web

หรือหากไม่ได้ติดตั้ง Git คุณสามารถดาวน์โหลดที่เก็บเป็นไฟล์ ZIP ได้

นำเข้าแอปเริ่มต้น

เปิดหรือนำเข้าไดเรกทอรี 📁 appcheck-start จากที่เก็บที่โคลนโดยใช้ IDE ไดเรกทอรี 📁 appcheck-start นี้มีโค้ดเริ่มต้นสำหรับ Codelab ซึ่งจะเป็นเว็บแอปแชทที่ทำงานได้อย่างสมบูรณ์ ไดเรกทอรี 📁 appcheck จะมีโค้ดที่สมบูรณ์สำหรับ Codelab

3. สร้างและตั้งค่าโปรเจ็กต์ Firebase

สร้างโปรเจ็กต์ Firebase

1. ลงชื่อเข้าใช้คอนโซล Firebase ด้วยบัญชี Google
2. คลิกปุ่มเพื่อสร้างโปรเจ็กต์ใหม่ แล้วป้อนชื่อโปรเจ็กต์ (เช่น FriendlyChat)
   
3. คลิกต่อไป
4. หากได้รับข้อความแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase แล้วคลิกต่อไป
5. (ไม่บังคับ) เปิดใช้ความช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase")
6. สำหรับ Codelab นี้ คุณไม่จำเป็นต้องใช้ Google Analytics ดังนั้นให้ปิดตัวเลือก Google Analytics
7. คลิกสร้างโปรเจ็กต์ รอให้ระบบจัดสรรโปรเจ็กต์ แล้วคลิกต่อไป

อัปเกรดแพ็กเกจราคา Firebase

หากต้องการใช้ Cloud Storage for Firebase โปรเจ็กต์ Firebase ต้องใช้แพ็กเกจราคาแบบจ่ายเมื่อใช้ (Blaze) ซึ่งหมายความว่าโปรเจ็กต์จะลิงก์กับบัญชีสำหรับการเรียกเก็บเงินใน Cloud

• บัญชีสำหรับการเรียกเก็บเงินใน Cloud ต้องมีวิธีการชำระเงิน เช่น บัตรเครดิต
• หากเพิ่งเคยใช้ Firebase และ Google Cloud ให้ตรวจสอบว่าคุณมีสิทธิ์รับเครดิตมูลค่า $300 และบัญชีสำหรับการเรียกเก็บเงินใน Cloud แบบทดลองใช้ฟรีหรือไม่
• หากคุณทำ Codelab นี้เป็นส่วนหนึ่งของกิจกรรม ให้สอบถามผู้จัดว่ามีเครดิต Cloud พร้อมใช้งานหรือไม่

หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้

1. ในคอนโซล Firebase ให้เลือกอัปเกรดแพ็กเกจ
2. เลือกแพ็กเกจ Blaze ทำตามวิธีการบนหน้าจอเพื่อลิงก์บัญชีสำหรับการเรียกเก็บเงินใน Cloud กับโปรเจ็กต์
   หากคุณจำเป็นต้องสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud เพื่ออัปเกรด คุณอาจต้องกลับไปที่ขั้นตอนการอัปเกรดในคอนโซล Firebase เพื่อทำการอัปเกรดให้เสร็จสมบูรณ์

เพิ่มเว็บแอป Firebase ลงในโปรเจ็กต์

1. คลิกไอคอนเว็บ เพื่อสร้างเว็บแอป Firebase ใหม่
2. ลงทะเบียนแอปด้วยชื่อเล่น Friendly Chat แล้วเลือกช่องข้างตั้งค่าโฮสติ้งของ Firebase สำหรับแอปนี้ด้วย คลิกลงทะเบียนแอป
3. ในขั้นตอนถัดไป คุณจะเห็นคำสั่งให้ติดตั้ง Firebase โดยใช้ npm และออบเจ็กต์การกำหนดค่า คุณจะคัดลอกออบเจ็กต์นี้ในภายหลังใน Codelab ดังนั้นตอนนี้ให้กดถัดไป

4. จากนั้นคุณจะเห็นตัวเลือกในการติดตั้ง Firebase CLI หากยังไม่ได้ติดตั้ง ให้ติดตั้งตอนนี้โดยใช้คำสั่ง npm install -g firebase-tools แล้วคลิกถัดไป
5. จากนั้นคุณจะเห็นตัวเลือกในการเข้าสู่ระบบ Firebase และทำให้ใช้งานได้ในโฮสติ้งของ Firebase เข้าสู่ระบบ Firebase โดยใช้คำสั่ง firebase login แล้วคลิกไปที่คอนโซล คุณจะติดตั้งใช้งานในโฮสติ้งของ Firebase ในขั้นตอนถัดไป

ตั้งค่าผลิตภัณฑ์ Firebase

แอปพลิเคชันที่เราจะสร้างใช้ผลิตภัณฑ์ Firebase ที่พร้อมใช้งานสำหรับเว็บแอป ดังนี้

• การตรวจสอบสิทธิ์ Firebase เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปได้อย่างง่ายดาย
• Cloud Firestore เพื่อบันทึกข้อมูลที่มีโครงสร้างในระบบคลาวด์และรับการแจ้งเตือนทันทีเมื่อข้อมูลมีการเปลี่ยนแปลง
• Cloud Storage for Firebase เพื่อบันทึกไฟล์ในระบบคลาวด์
• โฮสติ้งของ Firebase เพื่อโฮสต์และแสดงเนื้อหา
• Firebase Cloud Messaging เพื่อส่งข้อความ Push และแสดงการแจ้งเตือนแบบป๊อปอัปในเบราว์เซอร์
• Firebase Performance Monitoring เพื่อรวบรวมข้อมูลประสิทธิภาพของผู้ใช้สำหรับแอป

ผลิตภัณฑ์บางอย่างเหล่านี้ต้องมีการกำหนดค่าพิเศษหรือต้องเปิดใช้โดยใช้คอนโซล Firebase

เปิดใช้ Google Sign-In สำหรับการตรวจสอบสิทธิ์ Firebase

เราจะใช้วิธีการลงชื่อเข้าใช้ Google เพื่ออนุญาตให้ผู้ใช้ลงชื่อเข้าใช้เว็บแอปด้วยบัญชี Google ของตน

คุณจะต้องเปิดใช้ฟีเจอร์ลงชื่อเข้าใช้ด้วย Google โดยทำดังนี้

1. ในคอนโซล Firebase ให้ค้นหาส่วนสร้างในแผงด้านซ้าย
2. คลิกการตรวจสอบสิทธิ์ คลิกเริ่มต้นใช้งาน (หากมี) แล้วคลิกแท็บวิธีการลงชื่อเข้าใช้ (หรือคลิกที่นี่เพื่อไปยังแท็บดังกล่าวโดยตรง)
3. เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ Google
4. ตั้งชื่อแอปที่แสดงต่อสาธารณะเป็น Friendly Chat และเลือกอีเมลสนับสนุนโปรเจ็กต์จากเมนูแบบเลื่อนลง
5. คลิกบันทึก

ตั้งค่า Cloud Firestore

เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่

วิธีตั้งค่า Cloud Firestore ในโปรเจ็กต์ Firebase มีดังนี้

1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือกฐานข้อมูล Firestore
2. คลิกสร้างฐานข้อมูล
3. ปล่อยให้รหัสฐานข้อมูลตั้งค่าเป็น (default)
4. เลือกตำแหน่งสำหรับฐานข้อมูล แล้วคลิกถัดไป
   สำหรับแอปจริง คุณควรเลือกตำแหน่งที่อยู่ใกล้กับผู้ใช้
5. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
   ในภายหลังใน Codelab นี้ คุณจะเพิ่มกฎความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูลของคุณ อย่าเผยแพร่หรือเปิดเผยแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับฐานข้อมูล
6. คลิกสร้าง

ตั้งค่า Cloud Storage for Firebase

เว็บแอปใช้ Cloud Storage for Firebase เพื่อจัดเก็บ อัปโหลด และแชร์รูปภาพ

วิธีตั้งค่า Cloud Storage for Firebase ในโปรเจ็กต์ Firebase มีดังนี้

1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือกพื้นที่เก็บข้อมูล
2. คลิกเริ่มต้นใช้งาน
3. เลือกตำแหน่งสำหรับที่เก็บข้อมูลเริ่มต้น
   ที่เก็บข้อมูลในUS-WEST1, US-CENTRAL1 และUS-EAST1สามารถใช้ประโยชน์จากระดับ "ฟรีตลอด" สำหรับ Google Cloud Storage ส่วนที่เก็บข้อมูลในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตามราคาและการใช้งาน Google Cloud Storage
4. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
   ในภายหลังใน Codelab นี้ คุณจะเพิ่มกฎความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูลของคุณ อย่าเผยแพร่หรือเปิดเผยแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล Storage
5. คลิกสร้าง

4. กำหนดค่า Firebase

จากไดเรกทอรี appcheck-start ให้เรียกใช้คำสั่งต่อไปนี้

firebase use --add

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

1. ไปที่การตั้งค่าโปรเจ็กต์ในคอนโซล Firebase
2. ในการ์ด "แอปของคุณ" ให้เลือกชื่อเล่นของแอปที่ต้องการออบเจ็กต์การกำหนดค่า
3. เลือกการกำหนดค่าจากแผงข้อมูลโค้ด Firebase SDK
4. คัดลอกข้อมูลโค้ดออบเจ็กต์การกำหนดค่า แล้วเพิ่มลงใน appcheck-start/hosting/src/firebase-config.js ส่วนที่เหลือของ Codelab จะถือว่าตัวแปรชื่อ config

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

จากไดเรกทอรี appcheck-start เดียวกัน ให้เรียกใช้คำสั่งต่อไปนี้

firebase experiments:enable webframeworks

ซึ่งจะเปิดใช้การรองรับเฟรมเวิร์กเว็บที่ใช้สร้างโปรเจ็กต์นี้

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

5. ลองใช้แอปโดยไม่มี App Check

เมื่อกำหนดค่าแอปและตั้งค่า SDK แล้ว ให้ลองใช้แอปตามที่ออกแบบไว้ตั้งแต่แรก ก่อนอื่น ให้เริ่มด้วยการติดตั้งทรัพยากร Dependency ทั้งหมด จากเทอร์มินัล ให้ไปที่ไดเรกทอรี appcheck-start/hosting ขณะอยู่ในไดเรกทอรีนั้น ให้เรียกใช้ npm install ซึ่งจะดึงข้อมูลทรัพยากร Dependency ทั้งหมดเพื่อให้โปรเจ็กต์ทำงานได้ หากต้องการเริ่มแอปในสถานะปัจจุบัน คุณสามารถเรียกใช้ firebase serve ได้ แอปจะขอให้คุณเข้าสู่ระบบด้วยบัญชี Google ให้ดำเนินการดังกล่าว แล้วลองโพสต์ข้อความแชท 2-3 ข้อความและรูปภาพ 2-3 รูปในแชท

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

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

ในขั้นตอนถัดไป คุณจะต้องดำเนินการดังนี้

• ลงทะเบียนใช้ App Check
• ตรวจสอบการบังคับใช้
• เริ่มบังคับใช้กฎ

6. เปิด App Check และการบังคับใช้

เริ่มต้นด้วยการรับคีย์ reCAPTCHA Enterprise สำหรับโปรเจ็กต์ของคุณ แล้วเพิ่มคีย์ดังกล่าวลงใน App Check เริ่มต้นโดยไปที่ส่วน reCAPTCHA Enterprise ของคอนโซล Google Cloud เลือกโปรเจ็กต์ แล้วระบบจะแจ้งให้คุณเปิดใช้ reCAPTCHA Enterprise API เปิดใช้ API แล้วรอสักครู่เพื่อให้ดำเนินการเสร็จสิ้น จากนั้นคลิกสร้างคีย์ข้างคีย์ Enterprise จากนั้นในส่วนนี้ ให้ระบุชื่อที่แสดงและเลือกคีย์ประเภทเว็บไซต์ คุณต้องระบุโดเมนที่โฮสต์แอปของคุณ เนื่องจากคุณวางแผนที่จะโฮสต์ไฟล์นี้ในโฮสติ้งของ Firebase คุณจึงใช้ชื่อโฮสติ้งเริ่มต้นซึ่งโดยทั่วไปคือ ${YOUR_PROJECT_ID}.web.app คุณดูโดเมนโฮสติ้งได้ในส่วนโฮสติ้งของคอนโซล Firebase หลังจากกรอกข้อมูลนี้แล้ว ให้กดเสร็จสิ้นและสร้างคีย์

เมื่อเสร็จแล้ว คุณจะเห็นรหัสที่ด้านบนของหน้ารายละเอียดคีย์

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

คำขอที่ไม่ได้รับการยืนยันและไม่ได้บังคับใช้

เมื่อมีคีย์ที่ลงทะเบียนไว้ในคอนโซล Firebase แล้ว ให้กลับไปเรียกใช้เว็บไซต์ในเบราว์เซอร์โดยเรียกใช้ firebase serve ตอนนี้คุณมีเว็บแอปที่ทำงานในเครื่องแล้ว และสามารถเริ่มส่งคำขอไปยังแบ็กเอนด์ของ Firebase ได้อีกครั้ง เนื่องจากคำขอขัดแย้งกับแบ็กเอนด์ของ Firebase คำขอเหล่านี้จึงได้รับการตรวจสอบโดย App Check แต่ไม่มีการบังคับใช้ หากต้องการดูสถานะของคำขอที่เข้ามา คุณสามารถไปที่ส่วน Cloud Firestore ในแท็บ API ของหน้า App Check ในคอนโซล Firebase เนื่องจากคุณยังไม่ได้กำหนดค่าไคลเอ็นต์ให้ใช้ App Check คุณจึงควรเห็นข้อความที่คล้ายกับข้อความต่อไปนี้

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

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

คำขอที่ไม่ได้รับการยืนยันและมีการบังคับใช้

กดปุ่มบังคับใช้จากหน้าจอก่อนหน้า แล้วกดบังคับใช้อีกครั้งหากได้รับข้อความแจ้ง

ซึ่งจะเริ่มบังคับใช้ App Check โดยจะบล็อกคำขอไปยังบริการแบ็กเอนด์ที่ไม่ได้รับการยืนยันผ่านผู้ให้บริการเอกสารรับรองที่คุณเลือก (ในกรณีนี้คือ reCAPTCHA Enterprise) กลับไปที่เว็บแอปที่กำลังทำงานอยู่ ซึ่งควรทำงานที่ http://localhost:5000 เมื่อรีเฟรชหน้าและพยายามดึงข้อมูลจากฐานข้อมูล จะไม่มีอะไรเกิดขึ้น หากเปิดคอนโซล Chrome เพื่ออ่านข้อผิดพลาด คุณควรเห็นข้อความที่คล้ายกับข้อความต่อไปนี้

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

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

7. เพิ่มคีย์ reCAPTCHA Enterprise ลงในเว็บไซต์

เราจะเพิ่มคีย์ระดับองค์กรลงในแอปพลิเคชันของคุณ ก่อนอื่น ให้เปิด hosting/src/firebase-config.js และเพิ่มคีย์ reCAPTCHA Enterprise ลงในข้อมูลโค้ดต่อไปนี้

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

เมื่อเสร็จแล้ว ให้เปิด hosting/src/index.js และในบรรทัดที่ 51 คุณจะเพิ่มการนำเข้าจาก firebase-config.js เพื่อดึงข้อมูลคีย์ reCAPTCHA และนำเข้าไลบรารี App Check เพื่อให้ทำงานกับผู้ให้บริการ reCAPTCHA Enterprise ได้

// add from here
 import {
   initializeAppCheck,
   ReCaptchaEnterpriseProvider,
 } from 'firebase/app-check';
// to here

// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';

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

import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
 function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
 }
// to here

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

function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
// add from here
   // Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
   // site key and pass it to initializeAppCheck().
   initializeAppCheck(app, {
     provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
     isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
   });
// to here
 }

สุดท้าย เมื่อตรวจสอบแล้วว่าแอปได้รับการเริ่มต้นแล้ว คุณจะต้องเรียกใช้ฟังก์ชัน setupAppCheck ที่เพิ่งสร้างขึ้น ที่ด้านล่างของไฟล์ hosting/src/index.js ให้เพิ่มการเรียกไปยังเมธอดที่เพิ่มล่าสุด

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

ทดสอบในเครื่องก่อน

ทดสอบแอปพลิเคชันในเครื่องก่อน หากคุณยังไม่ได้แสดงแอปพลิเคชันในเครื่อง ให้เรียกใช้ firebase serve คุณจะเห็นว่าแอปพลิเคชันยังคงโหลดในเครื่องไม่สำเร็จ เนื่องจากคุณลงทะเบียนโดเมน Firebase กับผู้ให้บริการเอกสารรับรอง reCAPTCHA เท่านั้น ไม่ใช่โดเมน localhost คุณไม่ควรลงทะเบียน localhost เป็นโดเมนที่ได้รับอนุมัติ เนื่องจากจะทำให้ผู้ใช้เข้าถึงแบ็กเอนด์ที่ถูกจำกัดจากแอปพลิเคชันที่ทำงานในเครื่องของตนได้ แต่เนื่องจากคุณตั้งค่า self.FIREBASE_APPCHECK_DEBUG_TOKEN = true คุณจึงควรตรวจสอบในคอนโซล JavaScript เพื่อหาบรรทัดที่มีลักษณะคล้ายกับบรรทัดนี้

App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.

คุณจะต้องนำโทเค็นการแก้ไขข้อบกพร่องที่ระบุ (ในตัวอย่างคือ 55183c20-de61-4438-85e6-8065789265be) ไปใส่ในการกำหนดค่า App Check ในเมนูรายการเพิ่มเติมของแอป

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

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

ลองใช้ในเวอร์ชันที่ใช้งานจริง

เมื่อพอใจว่า App Check ทำงานในเครื่องแล้ว ให้ทำให้เว็บแอปพลิเคชันใช้งานได้จริง จากเทอร์มินัล ให้เรียกใช้ firebase deploy อีกครั้ง แล้วโหลดหน้าเว็บซ้ำ ซึ่งจะรวมแพ็กเกจเว็บแอปพลิเคชันของคุณเพื่อเรียกใช้ในโฮสติ้งของ Firebase เมื่อโฮสต์แอปพลิเคชันในโฮสติ้งของ Firebase แล้ว ให้ลองไปที่แอปพลิเคชันที่ ${YOUR_PROJECT_ID}.web.app คุณสามารถเปิดคอนโซล JavaScript และไม่ควรเห็นโทเค็นการแก้ไขข้อบกพร่องที่พิมพ์อยู่ที่นั่นอีกต่อไป และควรเห็นแชทที่โหลดในโปรเจ็กต์ นอกจากนี้ หลังจากโต้ตอบกับแอปพลิเคชันสักครู่ คุณสามารถไปที่ส่วน App Check ของคอนโซล Firebase และตรวจสอบว่าคำขอไปยังแอปพลิเคชันเปลี่ยนเป็นได้รับการยืนยันทั้งหมดแล้ว

8. ยินดีด้วย

ยินดีด้วย คุณเพิ่ม Firebase App Check ลงในเว็บแอปเรียบร้อยแล้ว

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

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

ดูเอกสารประกอบต่อไปนี้เพื่อเพิ่ม Firebase App Check ลงใน

• เปิดใช้การบังคับใช้ใน Cloud Functions
• ยืนยันโทเค็น App Check ในแบ็กเอนด์ที่กำหนดเอง

เอกสารอ้างอิง

• เริ่มต้นใช้งาน App Check ด้วย reCAPTCHA Enterprise ในเว็บแอป
• ใช้ผู้ให้บริการแก้ไขข้อบกพร่องในเว็บแอป