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 ของโค้ดแล็บจากบรรทัดคำสั่ง

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

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

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

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

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

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

1. ลงชื่อเข้าใช้ Firebase
2. ในคอนโซล Firebase ให้คลิก "เพิ่มโปรเจ็กต์" แล้วตั้งชื่อโปรเจ็กต์ Firebase เป็น FriendlyChat จดรหัสโปรเจ็กต์ Firebase ไว้
3. ยกเลิกการเลือกเปิดใช้ Google Analytics สําหรับโปรเจ็กต์นี้
4. คลิกสร้างโปรเจ็กต์

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

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

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

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

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

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

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

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

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

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

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

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

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

คุณจะต้องเปิดใช้ Google Sign-In โดยทำดังนี้

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

ตั้งค่า Cloud Firestore

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

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

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

ตั้งค่า Cloud Storage for Firebase

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

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

1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายบิลด์ แล้วเลือกพื้นที่เก็บข้อมูล
2. คลิกเริ่มต้นใช้งาน
3. เลือกตำแหน่งสำหรับที่เก็บข้อมูล Storage เริ่มต้น
   ที่เก็บข้อมูลใน US-WEST1, US-CENTRAL1 และ US-EAST1 สามารถใช้แพ็กเกจ"ฟรีตลอด" สำหรับ Google Cloud Storage ที่เก็บข้อมูลในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตามราคาและการใช้งาน Google Cloud Storage
4. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎการรักษาความปลอดภัย
   ในภายหลังในโค้ดแล็บนี้ คุณจะต้องเพิ่มกฎการรักษาความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล
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 ส่วนที่เหลือของโค้ดแล็บจะถือว่าตัวแปรมีชื่อว่า 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 แล้ว ให้ลองใช้แอปตามที่ออกแบบไว้ตั้งแต่แรก ก่อนอื่น ให้เริ่มด้วยการติดตั้งข้อกำหนดทั้งหมด จากเทอร์มินัล ให้ไปที่ไดเรกทอรี appcheck-start/hosting เมื่ออยู่ในไดเรกทอรีดังกล่าว ให้เรียกใช้ npm install ซึ่งจะดึงข้อมูลทรัพยากรทั้งหมดเพื่อให้โปรเจ็กต์ทำงานได้ หากต้องการเริ่มแอปในสถานะปัจจุบัน ให้เรียกใช้ firebase serve แอปจะขอให้คุณเข้าสู่ระบบด้วยบัญชี Google ให้ดำเนินการดังกล่าว แล้วลองโพสต์ข้อความแชทและรูปภาพ 2-3 รายการลงในแชท

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

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

ในอีกไม่กี่ขั้นตอน คุณจะทำสิ่งต่อไปนี้

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

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

มาเริ่มกันด้วยการรับคีย์ reCAPTCHA Enterprise สำหรับโปรเจ็กต์และเพิ่มลงใน App Check เริ่มต้นโดยไปที่ส่วน reCAPTCHA Enterprise ของ Google Cloud Console เลือกโปรเจ็กต์ แล้วระบบจะแจ้งให้เปิดใช้ reCAPTCHA Enterprise API เปิดใช้ API แล้วรอ 2-3 นาทีเพื่อให้การดำเนินการเสร็จสมบูรณ์ จากนั้นคลิกสร้างคีย์ข้างคีย์สำหรับองค์กร จากนั้นในส่วนนี้ ให้ระบุชื่อที่แสดงและเลือกคีย์ประเภทเว็บไซต์ คุณต้องระบุโดเมนที่โฮสต์แอปของคุณ เนื่องจากคุณวางแผนที่จะโฮสต์แอปนี้ในโฮสติ้งของ 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 Hosting แล้ว ให้ลองไปที่แอปพลิเคชันของคุณที่ ${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 ในเว็บแอป
• ใช้ผู้ให้บริการแก้ไขข้อบกพร่องในเว็บแอป