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

1. บทนำ

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

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

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

คุณใช้ App Check เพื่อปกป้องคำขอไปยัง Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication ด้วย 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

friendlychat-web ที่เก็บมีโปรเจ็กต์ตัวอย่างสำหรับหลายแพลตฟอร์ม

Codelab นี้ใช้เพียง 2 โฟลเดอร์ต่อไปนี้

• 📁 appcheck-start: โค้ดเริ่มต้นที่คุณจะใช้ต่อยอดใน Codelab นี้
• 📁 appcheck: โค้ดทั้งหมดสำหรับแอปตัวอย่างที่เสร็จสมบูรณ์

หมายเหตุ: หากต้องการเรียกใช้แอปที่เสร็จสมบูรณ์แล้ว คุณจะต้องสร้างโปรเจ็กต์ Firebase ในคอนโซล Firebase (ดูวิธีการในส่วนสร้างและตั้งค่าโปรเจ็กต์ Firebase ใน Codelab นี้)

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

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

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: คุณดาวน์เกรดโปรเจ็กต์เป็นแพ็กเกจราคาแบบไม่มีค่าใช้จ่าย (Spark) ได้หลังจากทำ Codelab นี้เสร็จแล้ว

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

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

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

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

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

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

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

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

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

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

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

โค้ดด้านบนควรมีออบเจ็กต์การกำหนดค่า Firebase เฉพาะแอป ไม่ใช่ค่าตัวยึดตำแหน่ง

จากไดเรกทอรี 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 แล้วรอสักครู่ให้เสร็จสิ้น จากนั้นคลิกสร้างคีย์ข้างคีย์สำหรับองค์กร จากนั้นในส่วนนี้ ให้ระบุชื่อที่แสดงและเลือกคีย์ประเภทเว็บไซต์ คุณต้องระบุโดเมนที่โฮสต์แอป เนื่องจากคุณวางแผนที่จะโฮสต์เว็บไซต์นี้ในโฮสติ้งของ Firebase คุณจึงใช้ชื่อโฮสติ้งเริ่มต้นซึ่งโดยทั่วไปคือ ${YOUR_PROJECT_ID}.web.app คุณดูโดเมนของ Hosting ได้ในส่วน Hosting ของคอนโซล Firebase หลังจากกรอกข้อมูลนี้แล้ว ให้กดเสร็จสิ้นและสร้างคีย์

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

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

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

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

8. ยินดีด้วย

ขอแสดงความยินดี คุณเพิ่มการตรวจสอบแอป Firebase ลงในเว็บแอปสำเร็จแล้ว

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

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

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

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

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

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