แอพตรวจสอบเว็บ Codelab

1. บทนำ

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

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

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

App Check สามารถใช้เพื่อปกป้องคำขอไปยัง Cloud Firestore, ฐานข้อมูลเรียลไทม์, ฟังก์ชันคลาวด์, การตรวจสอบสิทธิ์ 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 ได้

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

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

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

เพิ่มเว็บแอป Firebase ให้กับโปรเจ็กต์

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

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

เปิดใช้งานการลงชื่อเข้าใช้ Google สำหรับการตรวจสอบสิทธิ์ Firebase

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

คุณจะต้องเปิดใช้งานการลงชื่อเข้าใช้ Google:

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

เปิดใช้งาน Cloud Firestore

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

คุณจะต้องเปิดใช้งาน Cloud Firestore:

1. ในส่วน Build ของคอนโซล Firebase ให้คลิก Firestore Database
2. คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore

3. เลือกตัวเลือก เริ่มในโหมดทดสอบ จากนั้นคลิก ถัดไป หลังจากอ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย

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

4. กำหนดตำแหน่งที่จัดเก็บข้อมูล Cloud Firestore ของคุณ คุณสามารถปล่อยให้สิ่งนี้เป็นค่าเริ่มต้นหรือเลือกภูมิภาคใกล้กับคุณ คลิก เปิดใช้งาน เพื่อจัดสรร Firestore

เปิดใช้งานที่เก็บข้อมูลบนคลาวด์

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

คุณจะต้องเปิดใช้งาน Cloud Storage:

1. ในส่วน Build ของคอนโซล Firebase ให้คลิก Storage
2. หากไม่มีปุ่ม เริ่มต้น ใช้งาน แสดงว่าเปิดใช้ Cloud Storage แล้ว และคุณไม่จำเป็นต้องทำตามขั้นตอนด้านล่าง
3. คลิก เริ่มต้นใช้งาน
4. เลือกตัวเลือก เริ่มในโหมดทดสอบ จากนั้นคลิก ถัดไป หลังจากอ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย

เมื่อใช้กฎความปลอดภัยเริ่มต้น ผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์จะเขียนอะไรก็ได้ลงใน Cloud Storage เราจะปรับใช้กฎความปลอดภัยที่เขียนไว้ให้เราในภายหลังใน Codelab นี้

5. ตำแหน่ง Cloud Storage ได้รับการเลือกไว้ล่วงหน้าด้วยภูมิภาคเดียวกับที่คุณเลือกสำหรับฐานข้อมูล Cloud Firestore ของคุณ คลิก เสร็จสิ้น เพื่อสิ้นสุดการตั้งค่า

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.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

จากไดเร็กทอรี appcheck-start เดียวกัน ให้โทร:

firebase experiments:enable webframeworks

ซึ่งเปิดใช้งาน การสนับสนุนกรอบงานเว็บ ซึ่งโครงการนี้สร้างขึ้นด้วย

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

5. ลองใช้แอปโดยไม่ต้องตรวจสอบแอป

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

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

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

ในอีกไม่กี่ขั้นตอน คุณจะไปที่:

• ลงทะเบียนเพื่อรับการตรวจสอบแอป
• ตรวจสอบการบังคับใช้
• เริ่มบังคับใช้กฎเกณฑ์

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

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

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

คัดลอก ID นี้ไปยังคลิปบอร์ดของคุณได้เลย นี่คือคีย์ที่คุณใช้สำหรับ App Check จากนั้น ไปที่ส่วน App Check ของคอนโซล Firebase แล้วคลิก เริ่มต้นใช้งาน จากนั้นคลิกที่ Register จากนั้นคลิกที่ reCAPTCHA Enterprise และวาง ID ที่คัดลอกไว้ในกล่องข้อความสำหรับ reCAPTCHA Enterprise Site Key ปล่อยให้การตั้งค่าที่เหลือเป็นค่าเริ่มต้น หน้า 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 ของคุณ ในขณะนี้ คุณสามารถปิดการบังคับใช้การตรวจสอบแอปได้ และในส่วนถัดไป คุณจะตรวจสอบวิธีเพิ่ม reCAPTCHA Enterprise App Check ไปยังตัวอย่างการแชทที่เป็นมิตร

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

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

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 ผู้ให้บริการระดับองค์กร

// 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 แล้ว คุณจะเปิดใช้งานการบังคับใช้การตรวจสอบแอปได้อีกครั้ง และทดสอบว่าเนื้อหาแอปโหลดในเครื่องโดยเรียก firebase serve จากเทอร์มินัล คุณควรเห็นว่าข้อมูลที่ป้อนไว้ก่อนหน้านี้แสดงผลไปยังเว็บแอปพลิเคชันเวอร์ชันในเครื่อง คุณควรยังคงเห็นข้อความพร้อมโทเค็นการแก้ไขข้อบกพร่องที่พิมพ์ไปยังคอนโซล

ลองใช้ในการผลิต

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

8. ขอแสดงความยินดี!

ขอแสดงความยินดี คุณได้เพิ่ม Firebase App Check ลงใน Web App สำเร็จแล้ว

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

อะไรต่อไป?

ชำระเงินเอกสารต่อไปนี้เพื่อเพิ่ม Firebase App Check ไปที่:

• เปิดใช้งานการบังคับใช้ในฟังก์ชันคลาวด์
• ตรวจสอบโทเค็น App Check บนแบ็กเอนด์ที่กำหนดเอง

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

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