1. ภาพรวม
ใน Codelab นี้ คุณจะได้เรียนรู้เกี่ยวกับวิธีใช้ AngularFire เพื่อสร้างเว็บแอปพลิเคชันด้วยการติดตั้งใช้งานและปรับใช้ไคลเอ็นต์แชทโดยใช้ผลิตภัณฑ์และบริการของ Firebase
สิ่งที่คุณจะได้เรียนรู้
- สร้างเว็บแอปโดยใช้ Angular และ Firebase
- ซิงค์ข้อมูลโดยใช้ Cloud Firestore และ Cloud Storage for Firebase
- ตรวจสอบสิทธิ์ผู้ใช้โดยใช้การตรวจสอบสิทธิ์ Firebase
- ทำให้เว็บแอปใช้งานได้ในโฮสติ้งแอปของ Firebase
- ส่งการแจ้งเตือนด้วย Firebase Cloud Messaging
- รวบรวมข้อมูลประสิทธิภาพของเว็บแอป
สิ่งที่ต้องมี
- บัญชี GitHub
- ความสามารถในการอัปเกรดโปรเจ็กต์ Firebase เป็นแพ็กเกจราคา Blaze
- ตัวแก้ไข IDE/ข้อความที่ต้องการ เช่น WebStorm, Sublime หรือ VS Code
- ตัวจัดการแพ็กเกจ npm ซึ่งโดยทั่วไปจะมาพร้อมกับ Node.js
- เทอร์มินัล/คอนโซล
- เบราว์เซอร์ที่คุณเลือก เช่น Chrome
- โค้ดตัวอย่างของ Codelab (ดูขั้นตอนถัดไปของ Codelab เพื่อดูวิธีรับโค้ด)
2. รับโค้ดตัวอย่าง
สร้างที่เก็บ GitHub
คุณดูแหล่งที่มาของ Codelab ได้ที่ https://github.com/firebase/codelab-friendlychat-web ที่เก็บประกอบด้วยโปรเจ็กต์ตัวอย่างสำหรับหลายแพลตฟอร์ม แต่ Codelab นี้ใช้เฉพาะไดเรกทอรี angularfire-start
คัดลอกโฟลเดอร์ angularfire-start
ไปยังที่เก็บของคุณเอง
- ใช้เทอร์มินัล ให้สร้างโฟลเดอร์ใหม่ในคอมพิวเตอร์และเปลี่ยนเป็นไดเรกทอรีใหม่ โดยทำดังนี้
mkdir codelab-friendlyeats-web cd codelab-friendlyeats-web
- ใช้แพ็กเกจ giget npm เพื่อดึงข้อมูลเฉพาะโฟลเดอร์
angularfire-start
ดังนี้npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
- ติดตามการเปลี่ยนแปลงในเครื่องด้วย git:
git init git add . git commit -m "codelab starting point" git branch -M main
- สร้างที่เก็บ GitHub ใหม่: https://github.com/new ตั้งชื่อตามต้องการ
- GitHub จะให้ URL ของที่เก็บใหม่ซึ่งมีลักษณะเหมือน
https://github.com/[user-name]/[repository-name].git
หรือgit@github.com:[user-name]/[repository-name].git
คัดลอก URL นี้
- GitHub จะให้ URL ของที่เก็บใหม่ซึ่งมีลักษณะเหมือน
- พุชการเปลี่ยนแปลงในเครื่องไปยังที่เก็บ GitHub ใหม่ เรียกใช้คำสั่งต่อไปนี้ โดยแทนที่ URL ที่เก็บสำหรับตัวยึดตำแหน่ง
your-repository-url
git remote add origin your-repository-url git push -u origin main
- ตอนนี้คุณควรเห็นโค้ดเริ่มต้นในที่เก็บ GitHub แล้ว
3. สร้างและตั้งค่าโปรเจ็กต์ Firebase
สร้างโปรเจ็กต์ Firebase
- ลงชื่อเข้าใช้คอนโซล Firebase
- ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์ แล้วตั้งชื่อโปรเจ็กต์ Firebase ของคุณว่า friendlyChat จำรหัสโปรเจ็กต์ของโปรเจ็กต์ Firebase
- ยกเลิกการเลือกเปิดใช้ Google Analytics สำหรับโปรเจ็กต์นี้
- คลิกสร้างโปรเจ็กต์
แอปพลิเคชันที่คุณกำลังจะสร้างใช้ผลิตภัณฑ์ Firebase ที่พร้อมใช้งานสำหรับเว็บแอป ดังนี้
- การตรวจสอบสิทธิ์ของ Firebase เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปได้ง่ายๆ
- Cloud Firestore เพื่อบันทึก Structured Data ในระบบคลาวด์และรับการแจ้งเตือนทันทีเมื่อข้อมูลมีการเปลี่ยนแปลง
- Cloud Storage for Firebase เพื่อบันทึกไฟล์ในระบบคลาวด์
- โฮสติ้งแอปของ Firebase เพื่อสร้าง โฮสต์ และบริการแอป
- Firebase Cloud Messaging เพื่อส่งข้อความ Push และแสดงการแจ้งเตือนแบบป๊อปอัปของเบราว์เซอร์
- การตรวจสอบประสิทธิภาพของ Firebase เพื่อรวบรวมข้อมูลประสิทธิภาพผู้ใช้สำหรับแอปของคุณ
ผลิตภัณฑ์เหล่านี้บางรายการต้องมีการกำหนดค่าพิเศษหรือต้องเปิดใช้โดยใช้คอนโซล Firebase
อัปเกรดแพ็กเกจราคา Firebase
หากต้องการใช้โฮสติ้งแอป โปรเจ็กต์ Firebase ต้องใช้แพ็กเกจราคา Blaze ซึ่งหมายความว่ามีการเชื่อมโยงกับบัญชีสำหรับการเรียกเก็บเงินใน Cloud
- บัญชีสำหรับการเรียกเก็บเงินใน Cloud ต้องมีวิธีการชำระเงิน เช่น บัตรเครดิต
- หากเพิ่งเริ่มใช้ Firebase และ Google Cloud ให้ตรวจสอบว่าคุณมีสิทธิ์รับเครดิต $300 และบัญชีสำหรับการเรียกเก็บเงินใน Cloud ในช่วงทดลองใช้ฟรีหรือไม่
หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้
- ในคอนโซล Firebase ให้เลือกอัปเกรดแพ็กเกจของคุณ
- เลือกแพ็กเกจ Blaze ในกล่องโต้ตอบ แล้วทำตามวิธีการบนหน้าจอเพื่อเชื่อมโยงโปรเจ็กต์กับบัญชีสำหรับการเรียกเก็บเงินใน Cloud
หากต้องการสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud คุณอาจต้องกลับไปที่ขั้นตอนการอัปเกรดในคอนโซล Firebase เพื่ออัปเกรดให้เสร็จสมบูรณ์
เพิ่มเว็บแอป Firebase ลงในโปรเจ็กต์
- คลิกไอคอนเว็บ เพื่อสร้างเว็บแอป Firebase ใหม่
- ลงทะเบียนแอปด้วยชื่อเล่น friendly Chat ไม่ต้องเลือกช่องตั้งค่าโฮสติ้งของ Firebase สำหรับแอปนี้ด้วย คลิกลงทะเบียนแอป
- คุณจะเห็นออบเจ็กต์การกำหนดค่าในขั้นตอนถัดไป คุณไม่จำเป็นต้องใช้งานในขณะนี้ คลิกดำเนินการต่อไปยังคอนโซล
ตั้งค่าการตรวจสอบสิทธิ์
หากต้องการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้เว็บแอปด้วยบัญชี Google ให้ใช้วิธีลงชื่อเข้าใช้ของ Google
- ในคอนโซล Firebase ให้ไปที่การตรวจสอบสิทธิ์
- คลิกเริ่มต้นใช้งาน
- ในคอลัมน์ผู้ให้บริการเพิ่มเติม ให้คลิก Google > เปิดใช้
- ในกล่องข้อความชื่อที่เปิดเผยต่อสาธารณะสำหรับโปรเจ็กต์ ให้ป้อนชื่อที่จำได้ง่าย เช่น
My Next.js app
- เลือกอีเมลของคุณจากเมนูแบบเลื่อนลงอีเมลสนับสนุนสำหรับโปรเจ็กต์
- คลิกบันทึก
เปิดใช้ Cloud Firestore
เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่
คุณจะต้องเปิดใช้ Cloud Firestore
- ในคอนโซล Firebase ให้ไปที่ Firestore
- คลิกสร้างฐานข้อมูล > ถัดไป > เริ่มในโหมดทดสอบ > ถัดไป
คุณจะเพิ่มกฎความปลอดภัยในภายหลังใน Codelab นี้เพื่อรักษาความปลอดภัยของข้อมูล อย่าเผยแพร่หรือเปิดเผยแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับฐานข้อมูล - ใช้ตำแหน่งเริ่มต้นหรือเลือกตำแหน่งที่ต้องการ
สำหรับแอปจริง คุณจะต้องเลือกตำแหน่งที่ใกล้กับผู้ใช้ของตัวเอง โปรดทราบว่าตำแหน่งนี้ไม่สามารถเปลี่ยนแปลงได้ในภายหลัง และจะเป็นตำแหน่งของที่เก็บข้อมูล Cloud Storage เริ่มต้นโดยอัตโนมัติด้วย (ขั้นตอนถัดไป) - คลิกเสร็จสิ้น
เปิดใช้ Cloud Storage
โดยเว็บแอปนี้ใช้ Cloud Storage for Firebase เพื่อจัดเก็บ อัปโหลด และแชร์รูปภาพ
คุณจะต้องเปิดใช้ Cloud Storage ตามขั้นตอนต่อไปนี้
- ในคอนโซล Firebase ให้ไปที่พื้นที่เก็บข้อมูล
- คลิกเริ่มต้นใช้งาน > เริ่มในโหมดทดสอบ > ถัดไป
คุณจะเพิ่มกฎความปลอดภัยในภายหลังใน Codelab นี้เพื่อรักษาความปลอดภัยของข้อมูล อย่าเผยแพร่หรือเปิดเผยแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล Storage - ควรมีการเลือกตำแหน่งของที่เก็บข้อมูลไว้แล้ว (เนื่องจากการตั้งค่า Firestore ในขั้นตอนก่อนหน้า)
- คลิกเสร็จสิ้น
4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase
อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Firebase ช่วยให้คุณใช้โฮสติ้งของ Firebase เพื่อแสดงเว็บแอปภายในเครื่อง รวมถึงทำให้เว็บแอปใช้งานได้ในโปรเจ็กต์ Firebase ได้
- ติดตั้ง CLI โดยเรียกใช้คำสั่ง npm ต่อไปนี้:
npm -g install firebase-tools@latest
- ตรวจสอบว่าได้ติดตั้ง CLI อย่างถูกต้องแล้วโดยเรียกใช้คำสั่งต่อไปนี้
firebase --version
ตรวจสอบว่าเวอร์ชันของ Firebase CLI เป็น vv13.9.0 ขึ้นไป
- ให้สิทธิ์ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้
firebase login
คุณได้ตั้งค่าเทมเพลตเว็บแอปให้ดึงการกำหนดค่าของแอปสำหรับโฮสติ้งของ Firebase จากไดเรกทอรีในเครื่องของแอป (ที่เก็บที่คุณโคลนก่อนหน้านี้ใน Codelab) แต่หากต้องการดึงข้อมูลการกำหนดค่า คุณต้องเชื่อมโยงแอปกับโปรเจ็กต์ Firebase ก่อน
- ตรวจสอบว่าบรรทัดคำสั่งกำลังเข้าถึงไดเรกทอรี
angularfire-start
ในเครื่องของแอป - เชื่อมโยงแอปกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้
firebase use --add
- เมื่อมีข้อความแจ้ง ให้เลือกรหัสโปรเจ็กต์ แล้วตั้งชื่ออีเมลแทนให้โปรเจ็กต์ Firebase ของคุณ
ชื่อแทนจะมีประโยชน์หากคุณมีสภาพแวดล้อมหลายอย่าง (การผลิต การทดลองใช้ ฯลฯ) แต่สำหรับ Codelab นี้ โปรดใช้ชื่อแทนของ default
- ทําตามวิธีการที่เหลือในบรรทัดคำสั่ง
5. ติดตั้ง AngularFire
ก่อนเรียกใช้โปรเจ็กต์ ให้ตรวจสอบว่าคุณได้ตั้งค่า Angular CLI และ AngularFire แล้ว
- ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้
npm install -g @angular/cli
- จากนั้นเรียกใช้คำสั่ง Angular CLI ในคอนโซลจากไดเรกทอรี
angularfire-start
ng add @angular/fire
การดำเนินการนี้จะติดตั้งทรัพยากร Dependency ทั้งหมดที่จำเป็นสำหรับโปรเจ็กต์ของคุณ
- เมื่อได้รับแจ้ง ให้ยกเลิกการเลือก
ng deploy -- hosting
ด้วยแป้นเว้นวรรค เลือกฟีเจอร์ต่อไปนี้ด้วยแป้นลูกศรและแป้นเว้นวรรคAuthentication
Firestore
Cloud Messaging
Cloud Storage
- กด
enter
แล้วทำตามข้อความแจ้งที่เหลือ - สร้างคอมมิตที่มีข้อความคอมมิต "Install AngularFire" และพุชไปยังที่เก็บ GitHub ของคุณ
6. สร้างแบ็กเอนด์การโฮสต์แอป
ในส่วนนี้ คุณจะได้ตั้งค่าแบ็กเอนด์ของโฮสติ้งแอปเพื่อดู Branch ในที่เก็บ Git
ในตอนท้ายของส่วนนี้ คุณจะมีแบ็กเอนด์โฮสติ้งของแอปเชื่อมต่อกับที่เก็บใน GitHub ซึ่งจะสร้างและเปิดตัวเวอร์ชันใหม่ของแอปโดยอัตโนมัติทุกครั้งที่คุณพุชคอมมิตใหม่ไปยังสาขา main
ของคุณ
- ไปที่หน้าโฮสติ้งแอปในคอนโซล Firebase แล้วทำดังนี้
- คลิก "เริ่มต้นใช้งาน" เพื่อเริ่มขั้นตอนการสร้างแบ็กเอนด์ กำหนดค่าแบ็กเอนด์ดังนี้
- ทำตามข้อความแจ้งในขั้นตอนแรกเพื่อเชื่อมต่อที่เก็บ GitHub ที่คุณสร้างไว้ก่อนหน้านี้
- กำหนดการตั้งค่าการนำไปใช้งาน:
- เก็บไดเรกทอรีรากเป็น
/
- ตั้งค่า Branch แบบสดเป็น
main
- เปิดใช้การเปิดตัวอัตโนมัติ
- เก็บไดเรกทอรีรากเป็น
- ตั้งชื่อแบ็กเอนด์
friendlychat-codelab
- ใน "สร้างหรือเชื่อมโยงเว็บแอป Firebase" ให้เลือกเว็บแอปที่คุณกำหนดค่าไว้ก่อนหน้านี้จาก "เลือกเว็บแอป Firebase ที่มีอยู่" เมนูแบบเลื่อนลง
- คลิก "เสร็จสิ้นและทำให้ใช้งานได้" หลังจากนั้นสักครู่ ระบบจะนำคุณไปยังหน้าใหม่ ซึ่งคุณสามารถดูสถานะของแบ็กเอนด์โฮสติ้งแอป!
- เมื่อการเปิดตัวเสร็จสมบูรณ์ ให้คลิกโดเมนฟรีในส่วน "โดเมน" การดำเนินการนี้อาจใช้เวลาสักครู่จึงจะเริ่มทำงานได้เนื่องจากมีการเผยแพร่ DNS
คุณทำให้เว็บแอปเริ่มต้นใช้งานได้แล้ว ทุกครั้งที่คุณพุชคอมมิตใหม่ไปยังสาขา main
ของที่เก็บ GitHub คุณจะเห็นการเริ่มสร้างและการเปิดตัวใหม่ในคอนโซล Firebase และเว็บไซต์ของคุณจะอัปเดตโดยอัตโนมัติเมื่อการเปิดตัวเสร็จสมบูรณ์
คุณควรเห็นหน้าจอลงชื่อเข้าใช้ของแอป friendlyChat ซึ่ง (ยัง!) ไม่ทำงาน
แอปไม่สามารถดำเนินการใดๆ ได้ในขณะนี้ แต่ความช่วยเหลือของคุณจะดำเนินการได้ในเร็วๆ นี้
เรามาสร้างแอปแชทแบบเรียลไทม์กัน
7. นำเข้าและกำหนดค่า Firebase
กำหนดค่า Firebase
คุณจะต้องกำหนดค่า Firebase SDK เพื่อระบุว่ากำลังใช้โปรเจ็กต์ Firebase ใดอยู่
- ไปที่การตั้งค่าโปรเจ็กต์ในคอนโซล Firebase
- ใน "แอปของคุณ" ให้เลือกชื่อเล่นของแอปที่คุณต้องการออบเจ็กต์การกำหนดค่า
- เลือก "Config" จากแผงข้อมูลโค้ด Firebase SDK
คุณจะเห็นว่าระบบสร้างไฟล์สภาพแวดล้อม /angularfire-start/src/environments/environment.ts
ให้คุณ
- คัดลอกข้อมูลโค้ดออบเจ็กต์การกำหนดค่า แล้วเพิ่มลงใน
angularfire-start/src/firebase-config.js
environment.ts
export const environment = {
firebase: {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
},
};
ดูการตั้งค่า AngularFire
คุณจะเห็นว่าฟีเจอร์ที่เลือกในคอนโซลได้รับการเพิ่มในไฟล์ /angularfire-start/src/app/app.config.ts
โดยอัตโนมัติ วิธีนี้ช่วยให้แอปของคุณใช้ฟีเจอร์และฟังก์ชันของ Firebase ได้
8. ตั้งค่าการลงชื่อเข้าใช้ของผู้ใช้
AngularFire ควรพร้อมใช้งานแล้วเพราะมีการนำเข้าและเริ่มต้นใน app.config.ts
คุณกำลังจะใช้การลงชื่อเข้าใช้ของผู้ใช้โดยใช้การตรวจสอบสิทธิ์ของ Firebase
เพิ่มโดเมนที่ได้รับอนุญาต
การตรวจสอบสิทธิ์ Firebase อนุญาตให้ลงชื่อเข้าใช้ได้จากชุดรายการโดเมนที่คุณควบคุมเท่านั้น เพิ่มโดเมนโฮสติ้งแอปฟรีลงในรายการโดเมนโดยทำดังนี้
- ไปที่โฮสติ้งของแอป
- คัดลอกโดเมนของแบ็กเอนด์
- ไปที่ Authentication settings
- เลือกแท็บโดเมนที่ได้รับอนุญาต
- คลิกเพิ่มโดเมน และวางโดเมนของแบ็กเอนด์การโฮสต์แอป
ตรวจสอบสิทธิ์ผู้ใช้ด้วย Google Sign-In
ในแอป เมื่อผู้ใช้คลิกปุ่มลงชื่อเข้าใช้ด้วย Google ระบบจะทริกเกอร์ฟังก์ชัน login
สำหรับ Codelab นี้ คุณต้องการให้สิทธิ์ Firebase เพื่อใช้ Google เป็นผู้ให้บริการข้อมูลประจำตัว คุณจะใช้ป๊อปอัป แต่ Firebase สามารถใช้วิธีอื่นๆ อีกหลายวิธีได้เช่นกัน
- เปิด
chat.service.ts
ในไดเรกทอรีย่อย/src/app/services/
- หาฟังก์ชัน
login
- แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้
chat.service.ts
// Signs-in Friendly Chat.
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
this.router.navigate(['/', 'chat']);
return credential;
})
}
ฟังก์ชัน logout
จะทริกเกอร์เมื่อผู้ใช้คลิกปุ่มออกจากระบบ
- กลับไปที่ไฟล์
src/app/services/chat.service.ts
- หาฟังก์ชัน
logout
- แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้
chat.service.ts
// Logout of Friendly Chat.
logout() {
signOut(this.auth).then(() => {
this.router.navigate(['/', 'login'])
console.log('signed out');
}).catch((error) => {
console.log('sign out error: ' + error);
})
}
ติดตามสถานะการตรวจสอบสิทธิ์
หากต้องการอัปเดต UI ให้สอดคล้องกัน คุณต้องมีวิธีตรวจสอบว่าผู้ใช้เข้าสู่ระบบหรือออกจากระบบแล้ว AngularFire มีฟังก์ชันสำหรับให้สังเกตการณ์ได้ ซึ่งจะอัปเดตทุกครั้งที่สถานะการตรวจสอบสิทธิ์เปลี่ยนแปลง กระบวนการนี้มีการใช้งานแล้ว แต่ก็ควรพิจารณาที่จะตรวจสอบ
- กลับไปที่ไฟล์
src/app/services/chat.service.ts
- ค้นหาการกำหนดตัวแปร
user$
chat.service.ts
// observable that is updated when the auth state changes
user$ = user(this.auth);
โค้ดด้านบนเรียกใช้ฟังก์ชัน AngularFire user
ซึ่งแสดงผลผู้ใช้ที่สังเกตได้ โดยจะทริกเกอร์ทุกครั้งที่สถานะการตรวจสอบสิทธิ์เปลี่ยนแปลง (เมื่อผู้ใช้ลงชื่อเข้าใช้หรือออกจากระบบ) คอมโพเนนต์เทมเพลต Angular ใน friendlyChat จะใช้ระบบที่สังเกตได้นี้เพื่ออัปเดต UI เพื่อเปลี่ยนเส้นทาง แสดงผู้ใช้ในการนำทางส่วนหัว เป็นต้น
ทดสอบการเข้าสู่ระบบแอป
- สร้างคอมมิตที่มีข้อความคอมมิต "การเพิ่มการตรวจสอบสิทธิ์ Google" และพุชไปยังที่เก็บ GitHub ของคุณ
- เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
- ในเว็บแอป ให้รีเฟรชหน้าเว็บและเข้าสู่ระบบแอปโดยใช้ปุ่มลงชื่อเข้าใช้และบัญชี Google หากเห็นข้อความแสดงข้อผิดพลาดที่ระบุว่า
auth/operation-not-allowed
ให้ตรวจสอบว่าเปิดใช้ Google Sign-In เป็นผู้ให้บริการการตรวจสอบสิทธิ์ในคอนโซล Firebase แล้ว - หลังจากเข้าสู่ระบบแล้ว รูปโปรไฟล์และชื่อผู้ใช้ของคุณควรปรากฏ:
9. เขียนข้อความไปยัง Cloud Firestore
ในส่วนนี้ คุณจะได้เขียนข้อมูลบางอย่างลงใน Cloud Firestore เพื่อสร้าง UI ของแอป ซึ่งสามารถทำได้ด้วยตนเองโดยใช้คอนโซล Firebase แต่คุณจะดำเนินการในแอปเพื่อแสดงการเขียนใน Cloud Firestore พื้นฐาน
โมเดลข้อมูล
ข้อมูล Cloud Firestore จะแบ่งออกเป็นคอลเล็กชัน เอกสาร ช่อง และคอลเล็กชันย่อย คุณจะจัดเก็บแต่ละข้อความของแชทเป็นเอกสารในคอลเล็กชันระดับบนสุดที่เรียกว่า messages
เพิ่มข้อความใน Cloud Firestore
หากต้องการจัดเก็บข้อความแชทที่ผู้ใช้เขียน ให้ใช้ Cloud Firestore
ในส่วนนี้ คุณจะเพิ่มฟังก์ชันเพื่อให้ผู้ใช้เขียนข้อความใหม่ในฐานข้อมูล ผู้ใช้ที่คลิกปุ่มส่งจะเรียกใช้ข้อมูลโค้ดด้านล่าง โดยจะเพิ่มออบเจ็กต์ข้อความที่มีเนื้อหาของช่องข้อความไปยังอินสแตนซ์ Cloud Firestore ในคอลเล็กชัน messages
เมธอด add()
จะเพิ่มเอกสารใหม่ซึ่งมีรหัสที่สร้างขึ้นโดยอัตโนมัติลงในคอลเล็กชัน
- กลับไปที่ไฟล์
src/app/services/chat.service.ts
- หาฟังก์ชัน
addMessage
- แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้
chat.service.ts
// Adds a text or image message to Cloud Firestore.
addMessage = async (
textMessage: string | null,
imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
// ignore empty messages
if (!textMessage && !imageUrl) {
console.log(
"addMessage was called without a message",
textMessage,
imageUrl,
);
return;
}
if (this.currentUser === null) {
console.log("addMessage requires a signed-in user");
return;
}
const message: ChatMessage = {
name: this.currentUser.displayName,
profilePicUrl: this.currentUser.photoURL,
timestamp: serverTimestamp(),
uid: this.currentUser?.uid,
};
textMessage && (message.text = textMessage);
imageUrl && (message.imageUrl = imageUrl);
try {
const newMessageRef = await addDoc(
collection(this.firestore, "messages"),
message,
);
return newMessageRef;
} catch (error) {
console.error("Error writing new message to Firebase Database", error);
return;
}
};
ทดสอบการส่งข้อความ
- สร้างคอมมิตที่มีข้อความคอมมิต "โพสต์แชทใหม่ไปที่ Firestore" และพุชไปยังที่เก็บ GitHub ของคุณ
- เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
- รีเฟรช friendlyChat หลังจากเข้าสู่ระบบแล้ว ให้ป้อนข้อความ เช่น "สวัสดี" แล้วคลิกส่ง การดำเนินการนี้จะเขียนข้อความลงใน Cloud Firestore อย่างไรก็ตาม คุณจะยังไม่เห็นข้อมูลในเว็บแอปจริงเนื่องจากยังคงต้องใช้การดึงข้อมูล (ส่วนถัดไปของ Codelab)
- คุณจะดูข้อความที่เพิ่มใหม่ได้ในคอนโซล Firebase เปิด UI ชุดโปรแกรมจำลอง ในส่วน Build ให้คลิก Firestore Database (หรือคลิก ที่นี่ แล้วคุณจะเห็นคอลเล็กชัน ข้อความ พร้อมกับข้อความที่เพิ่มใหม่ ดังนี้
10. อ่านข้อความ
ซิงค์ข้อมูลข้อความ
หากต้องการอ่านข้อความในแอป คุณจะต้องเพิ่มสิ่งที่สังเกตได้ซึ่งจะทริกเกอร์เมื่อข้อมูลเปลี่ยนแปลง จากนั้นจึงสร้างองค์ประกอบ UI ที่แสดงข้อความใหม่
คุณจะต้องเพิ่มโค้ดที่จะคอยฟังข้อความที่เพิ่มใหม่จากแอป คุณจะเรียกสแนปชอตของคอลเล็กชัน messages
ได้ในโค้ดนี้ คุณจะแสดงเฉพาะข้อความ 12 ข้อความสุดท้ายของแชทเท่านั้น เพื่อหลีกเลี่ยงการแสดงประวัติที่ยาวนานมากเมื่อโหลด
- กลับไปที่ไฟล์
src/app/services/chat.service.ts
- หาฟังก์ชัน
loadMessages
- แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้
chat.service.ts
// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
// Create the query to load the last 12 messages and listen for new ones.
const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
// Start listening to the query.
return collectionData(recentMessagesQuery);
}
หากต้องการฟังข้อความในฐานข้อมูล คุณจะสร้างการค้นหาในคอลเล็กชันโดยใช้ฟังก์ชัน collection
เพื่อระบุว่ามีคอลเล็กชันข้อมูลใดที่ต้องการฟังอยู่ ในโค้ดข้างต้น คุณกำลังฟังการเปลี่ยนแปลงภายในคอลเล็กชัน messages
ซึ่งเป็นที่เก็บข้อความแชท นอกจากนี้ คุณยังใช้ขีดจำกัดโดยฟังเฉพาะ 12 ข้อความล่าสุดโดยใช้ limit(12)
และเรียงลำดับข้อความตามวันที่โดยใช้ orderBy('timestamp', 'desc')
เพื่อรับ 12 ข้อความล่าสุด
ฟังก์ชัน collectionData
จะใช้สแนปชอตภายใน ฟังก์ชัน Callback จะทำงานเมื่อมีการเปลี่ยนแปลงในเอกสารที่ตรงกับคำค้นหา กรณีนี้อาจเกิดขึ้นเมื่อมีการลบ แก้ไข หรือเพิ่มข้อความ อ่านข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในเอกสารประกอบของ Cloud Firestore
ทดสอบการซิงโครไนซ์ข้อความ
- สร้างคอมมิตที่มีข้อความคอมมิต "แสดงแชทใหม่ใน UI" และพุชไปยังที่เก็บ GitHub ของคุณ
- เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
- รีเฟรช friendlyChat ข้อความที่คุณสร้างไว้ก่อนหน้านี้ในฐานข้อมูลควรแสดงใน friendlyChat UI (ดูด้านล่าง) เขียนข้อความใหม่ได้ตามใจชอบ โฆษณานั้นควรปรากฏในทันที
- (ไม่บังคับ) คุณสามารถลองลบ แก้ไข หรือเพิ่มข้อความใหม่ด้วยตนเองได้โดยตรงในส่วน Firestore ของชุดโปรแกรมจำลอง การเปลี่ยนแปลงใดๆ ควรแสดงอยู่ใน UI
ยินดีด้วย คุณกำลังอ่านเอกสาร Cloud Firestore ในแอป
11. เพิ่มฟีเจอร์ AI
คุณจะใช้ AI ของ Google เพื่อเพิ่มฟีเจอร์ความช่วยเหลือที่เป็นประโยชน์ลงในแอปแชท
รับคีย์ AI API ของ Google
- ไปที่ Google AI Studio แล้วคลิกสร้างคีย์ API
- เลือกโปรเจ็กต์ Firebase ที่คุณสร้างสำหรับ Codelab นี้ ข้อความแจ้งมีไว้สำหรับโปรเจ็กต์ Google Cloud แต่โปรเจ็กต์ Firebase ทั้งหมดจะเป็นโปรเจ็กต์ Google Cloud
- คลิกสร้างคีย์ API ในโปรเจ็กต์ที่มีอยู่
- คัดลอกคีย์ API ที่ได้
ติดตั้งส่วนขยาย
ส่วนขยายนี้จะทำให้ฟังก์ชันระบบคลาวด์ใช้งานได้ ซึ่งจะทริกเกอร์ทุกครั้งที่มีการเพิ่มเอกสารใหม่ไปยังคอลเล็กชัน messages
ใน Firestore ฟังก์ชันดังกล่าวจะเรียกใช้ Gemini และเขียนคำตอบกลับไปยังช่อง response
ในเอกสาร
- คลิกติดตั้งในคอนโซล Firebase ในหน้าส่วนขยายสร้างแชทบ็อตด้วย Gemini API
- ทำตามคำแนะนำ เมื่อไปถึงขั้นตอนกำหนดค่าส่วนขยาย ให้ตั้งค่าพารามิเตอร์ต่อไปนี้
- ผู้ให้บริการ Gemini API:
Google AI
- คีย์ AI API ของ Google: วางคีย์ที่คุณสร้างไว้ก่อนหน้านี้แล้วคลิกสร้างข้อมูลลับ
- เส้นทางการรวบรวม Firestore:
messages
- ช่องพรอมต์:
text
- ช่องคำตอบ:
response
- ฟิลด์คำสั่งซื้อ:
timestamp
- บริบท:
Keep your answers short, informal, and helpful. Use emojis when possible.
- ผู้ให้บริการ Gemini API:
- คลิกติดตั้งส่วนขยาย
- รอให้ส่วนขยายติดตั้งเสร็จ
ฟีเจอร์ทดสอบ AI
friendlyChat มีโค้ดสำหรับอ่านคำตอบจากส่วนขยาย AI อยู่แล้ว เพียงคุณส่งข้อความแชทใหม่เพื่อทดสอบ
- เปิด friendlyChat แล้วส่งข้อความ
- หลังจากนั้นสักครู่ คุณจะเห็นคำตอบปรากฏขึ้นพร้อมกับข้อความ โดยมีหมายเหตุ
✨ ai generated
ในตอนท้ายเพื่อความชัดเจนว่าระบบสร้างด้วย Generative AI ไม่ใช่ผู้ใช้จริง
12. ส่งรูปภาพ
ตอนนี้คุณจะเพิ่มฟีเจอร์ที่แชร์รูปภาพ
แม้ว่า Cloud Firestore จะใช้งานได้ดีสำหรับการจัดเก็บข้อมูลที่มีโครงสร้าง แต่ Cloud Storage จะเหมาะกับการจัดเก็บไฟล์มากกว่า Cloud Storage for Firebase เป็นบริการพื้นที่เก็บข้อมูลไฟล์/BLOB เพื่อเก็บรูปภาพที่ผู้ใช้แชร์โดยใช้แอปของเรา
บันทึกรูปภาพไปยัง Cloud Storage
สำหรับ Codelab นี้ คุณได้เพิ่มปุ่มที่ทริกเกอร์กล่องโต้ตอบเครื่องมือเลือกไฟล์แล้ว หลังจากเลือกไฟล์แล้ว ระบบจะเรียกใช้ฟังก์ชัน saveImageMessage
และคุณจะดูข้อมูลอ้างอิงไฟล์ที่เลือกได้ ฟังก์ชัน saveImageMessage
ดำเนินการต่อไปนี้ได้
- สร้าง "ตัวยึดตำแหน่ง" ข้อความแชทในฟีดแชท เพื่อให้ผู้ใช้เห็นข้อความว่า "กำลังโหลด" ภาพเคลื่อนไหวขณะอัปโหลดรูปภาพ
- อัปโหลดไฟล์ภาพไปยัง Cloud Storage ไปยังเส้นทางนี้:
/<uid>/<file_name>
- สร้าง URL ที่อ่านได้แบบสาธารณะสำหรับไฟล์ภาพ
- อัปเดตข้อความแชทด้วย URL ของไฟล์ภาพที่เพิ่งอัปโหลดแทนรูปภาพชั่วคราวขณะโหลด
ในขั้นตอนนี้คุณจะต้องเพิ่มฟังก์ชันสำหรับการส่งรูปภาพ ดังนี้
- กลับไปที่ไฟล์
src/chat.service.ts
- หาฟังก์ชัน
saveImageMessage
- แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้
chat.service.ts
// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
try {
// 1 - Add a message with a loading icon that will get updated with the shared image.
const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);
// 2 - Upload the image to Cloud Storage.
const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
const newImageRef = ref(this.storage, filePath);
const fileSnapshot = await uploadBytesResumable(newImageRef, file);
// 3 - Generate a public URL for the file.
const publicImageUrl = await getDownloadURL(newImageRef);
// 4 - Update the chat message placeholder with the image's URL.
messageRef ?
await updateDoc(messageRef, {
imageUrl: publicImageUrl,
storageUri: fileSnapshot.metadata.fullPath
}): null;
} catch (error) {
console.error('There was an error uploading a file to Cloud Storage:', error);
}
}
ทดสอบการส่งรูปภาพ
- สร้างคอมมิตด้วยข้อความคอมมิต "เพิ่มความสามารถในการโพสต์รูปภาพ" และพุชไปยังที่เก็บ GitHub ของคุณ
- เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
- รีเฟรช friendlyChat หลังจากเข้าสู่ระบบแล้ว ให้คลิกปุ่มอัปโหลดรูปภาพที่ด้านล่างซ้าย แล้วเลือกไฟล์ภาพโดยใช้เครื่องมือเลือกไฟล์ หากคุณกำลังหารูปภาพ คุณสามารถใช้รูปภาพถ้วยกาแฟสวยๆ นี้
- ข้อความใหม่ควรปรากฏใน UI ของแอปพร้อมด้วยรูปภาพที่คุณเลือก:
หากคุณลองเพิ่มรูปภาพขณะที่ไม่ได้ลงชื่อเข้าใช้ คุณควรเห็นข้อผิดพลาดแจ้งว่าคุณต้องลงชื่อเข้าใช้เพื่อเพิ่มรูปภาพ
13. แสดงการแจ้งเตือน
จากนี้คุณจะเพิ่มการรองรับการแจ้งเตือนของเบราว์เซอร์ โดยแอปจะแจ้งให้ผู้ใช้ทราบเมื่อมีการโพสต์ข้อความใหม่ในแชท Firebase Cloud Messaging (FCM) เป็นโซลูชันการรับส่งข้อความข้ามแพลตฟอร์มที่ช่วยให้คุณส่งข้อความและการแจ้งเตือนได้อย่างน่าเชื่อถือโดยไม่เสียค่าใช้จ่าย
เพิ่มโปรแกรมทำงานของบริการ FCM
เว็บแอปต้องมี Service Worker ที่จะรับและแสดงการแจ้งเตือนบนเว็บได้
ควรตั้งค่าผู้ให้บริการรับส่งข้อความไว้แล้วเมื่อเพิ่ม AngularFire โปรดตรวจสอบว่ามีโค้ดต่อไปนี้ในส่วนการนำเข้าของ /angularfire-start/src/app/app.config.ts
provideMessaging(() => {
return getMessaging();
}),
app/app.config.ts
โปรแกรมทำงานของบริการเพียงต้องโหลดและเริ่มต้น Firebase Cloud Messaging SDK ซึ่งจะดูแลการแสดงการแจ้งเตือน
รับโทเค็นอุปกรณ์ FCM
เมื่อเปิดใช้การแจ้งเตือนในอุปกรณ์หรือเบราว์เซอร์ คุณจะได้รับโทเค็นอุปกรณ์ โทเค็นอุปกรณ์นี้คือสิ่งที่คุณใช้เพื่อส่งการแจ้งเตือนไปยังอุปกรณ์ที่เฉพาะเจาะจงหรือเบราว์เซอร์หนึ่งๆ
เมื่อผู้ใช้ลงชื่อเข้าใช้ คุณจะเรียกใช้ฟังก์ชัน saveMessagingDeviceToken
ซึ่งคุณจะรับโทเค็นอุปกรณ์ FCM จากเบราว์เซอร์และบันทึกลงใน Cloud Firestore ได้
chat.service.ts
- หาฟังก์ชัน
saveMessagingDeviceToken
- แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้
chat.service.ts
// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
try {
const currentToken = await getToken(this.messaging);
if (currentToken) {
console.log('Got FCM device token:', currentToken);
// Saving the Device Token to Cloud Firestore.
const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
// This will fire when a message is received while the app is in the foreground.
// When the app is in the background, firebase-messaging-sw.js will receive the message instead.
onMessage(this.messaging, (message) => {
console.log(
'New foreground notification from Firebase Messaging!',
message.notification
);
});
} else {
// Need to request permissions to show notifications.
this.requestNotificationsPermissions();
}
} catch(error) {
console.error('Unable to get messaging token.', error);
};
}
อย่างไรก็ตาม โค้ดนี้จะไม่ทำงานในตอนแรก ผู้ใช้จะต้องให้สิทธิ์แอปแสดงการแจ้งเตือน (ขั้นตอนถัดไปของ Codelab) เพื่อให้แอปเรียกโทเค็นอุปกรณ์ได้
ขอสิทธิ์เพื่อแสดงการแจ้งเตือน
เมื่อผู้ใช้ยังไม่ได้อนุญาตให้แอปของคุณแสดงการแจ้งเตือน คุณจะไม่ได้รับโทเค็นอุปกรณ์ ในกรณีนี้ คุณจะเรียกใช้เมธอด requestPermission()
ซึ่งจะแสดงกล่องโต้ตอบของเบราว์เซอร์ที่ขอสิทธิ์นี้ ( ในเบราว์เซอร์ที่รองรับ)
- กลับไปที่ไฟล์
src/app/services/chat.service.ts
- หาฟังก์ชัน
requestNotificationsPermissions
- แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้
chat.service.ts
// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
console.log('Requesting notifications permission...');
const permission = await Notification.requestPermission();
if (permission === 'granted') {
console.log('Notification permission granted.');
// Notification permission granted.
await this.saveMessagingDeviceToken();
} else {
console.log('Unable to get permission to notify.');
}
}
รับโทเค็นอุปกรณ์
- สร้างคอมมิตด้วยข้อความคอมมิต "เพิ่มความสามารถในการโพสต์รูปภาพ" และพุชไปยังที่เก็บ GitHub ของคุณ
- เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
- รีเฟรช friendlyChat หลังจากเข้าสู่ระบบ กล่องโต้ตอบสิทธิ์การแจ้งเตือนจะปรากฏขึ้น:
- คลิกอนุญาต
- เปิดคอนโซล JavaScript ของเบราว์เซอร์ คุณควรเห็นข้อความต่อไปนี้:
Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
- คัดลอกโทเค็นอุปกรณ์ เนื่องจากคุณจำเป็นต้องใช้ในขั้นตอนถัดไปของ Codelab
ส่งการแจ้งเตือนไปยังอุปกรณ์ของคุณ
เมื่อคุณมีโทเค็นอุปกรณ์แล้ว คุณสามารถส่งการแจ้งเตือนได้
- เปิดแท็บ Cloud Messaging ของคอนโซล Firebase
- คลิก "การแจ้งเตือนใหม่"
- ป้อนชื่อการแจ้งเตือนและข้อความแจ้งเตือน
- ที่ด้านขวาของหน้าจอ ให้คลิก "ส่งข้อความทดสอบ"
- ป้อนโทเค็นอุปกรณ์ที่คัดลอกจากคอนโซล JavaScript ของเบราว์เซอร์ แล้วคลิกเครื่องหมายบวก ("+")
- คลิก "ทดสอบ"
หากแอปทำงานอยู่ในเบื้องหน้า คุณจะเห็นการแจ้งเตือนในคอนโซล JavaScript
หากแอปของคุณอยู่ในเบื้องหลัง การแจ้งเตือนควรปรากฏในเบราว์เซอร์ตามตัวอย่างนี้
14. กฎความปลอดภัยใน Cloud Firestore
ดูกฎความปลอดภัยของฐานข้อมูล
Cloud Firestore ใช้ภาษาของกฎที่เจาะจงเพื่อกำหนดสิทธิ์การเข้าถึง ความปลอดภัย และการตรวจสอบข้อมูล
เมื่อตั้งค่าโปรเจ็กต์ Firebase ในตอนต้นของ Codelab นี้ คุณเลือกที่จะใช้ "โหมดทดสอบ" กฎความปลอดภัยเริ่มต้นเพื่อให้คุณไม่ได้จำกัดการเข้าถึงพื้นที่เก็บข้อมูล คุณสามารถดูและแก้ไขกฎเหล่านี้ได้ในคอนโซล Firebase ในแท็บกฎของส่วนฐานข้อมูล
ในตอนนี้ คุณควรเห็นกฎเริ่มต้นซึ่งไม่ได้จำกัดการเข้าถึงพื้นที่เก็บข้อมูล ซึ่งหมายความว่าผู้ใช้ทุกคนจะอ่านและเขียนลงในคอลเล็กชันในพื้นที่เก็บข้อมูลของคุณได้
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
คุณจะอัปเดตกฎเพื่อจำกัดสิ่งต่างๆ โดยใช้กฎต่อไปนี้
firestore.rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Messages:
// - Anyone can read.
// - Authenticated users can add and edit messages.
// - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
// - Deletes are not allowed.
match /messages/{messageId} {
allow read;
allow create, update: if request.auth != null
&& request.resource.data.name == request.auth.token.name
&& (request.resource.data.text is string
&& request.resource.data.text.size() <= 300
|| request.resource.data.imageUrl is string
&& request.resource.data.imageUrl.matches('https?://.*'));
allow delete: if false;
}
// FCM Tokens:
// - Anyone can write their token.
// - Reading list of tokens is not allowed.
match /fcmTokens/{token} {
allow read: if false;
allow write;
}
}
}
กฎความปลอดภัยควรอัปเดตเป็นชุดโปรแกรมจำลองโดยอัตโนมัติ
ดูกฎความปลอดภัยของ Cloud Storage
Cloud Storage for Firebase ใช้ภาษาของกฎที่เฉพาะเจาะจงเพื่อกำหนดสิทธิ์การเข้าถึง ความปลอดภัย และการตรวจสอบข้อมูล
เมื่อตั้งค่าโปรเจ็กต์ Firebase ในตอนต้นของ Codelab นี้ คุณเลือกที่จะใช้กฎความปลอดภัย Cloud Storage เริ่มต้นที่อนุญาตให้เฉพาะผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์เท่านั้นที่จะใช้ Cloud Storage ได้ คุณสามารถดูและแก้ไขกฎในคอนโซล Firebase ในแท็บกฎของส่วนพื้นที่เก็บข้อมูล คุณควรเห็นกฎเริ่มต้นซึ่งอนุญาตให้ผู้ใช้ที่ลงชื่อเข้าใช้อ่านและเขียนไฟล์ในที่เก็บข้อมูลของพื้นที่เก็บข้อมูลของคุณได้
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
คุณจะต้องอัปเดตกฎเพื่อดำเนินการต่อไปนี้
- อนุญาตให้ผู้ใช้แต่ละรายเขียนในโฟลเดอร์ที่ระบุของตนเองเท่านั้น
- อนุญาตให้ทุกคนอ่านจาก Cloud Storage
- ตรวจสอบว่าไฟล์ที่อัปโหลดเป็นรูปภาพ
- จำกัดขนาดของรูปภาพที่สามารถอัปโหลดได้ไม่เกิน 5 MB
คุณติดตั้งใช้งานได้โดยใช้กฎต่อไปนี้
storage.rules
rules_version = '2';
// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
return request.resource.size < maxSizeMB * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
service firebase.storage {
match /b/{bucket}/o {
match /{userId}/{messageId}/{fileName} {
allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
allow read;
}
}
}
15. ยินดีด้วย
คุณได้ใช้ Firebase เพื่อสร้างเว็บแอปพลิเคชันสำหรับแชทแบบเรียลไทม์แล้ว
หัวข้อที่ครอบคลุม
- Firebase App Hosting
- การตรวจสอบสิทธิ์ Firebase
- Cloud Firestore
- Firebase SDK สำหรับ Cloud Storage
- Firebase Cloud Messaging
- การตรวจสอบประสิทธิภาพ Firebase
ขั้นตอนถัดไป
ดูข้อมูลเพิ่มเติม
16. [ไม่บังคับ] บังคับใช้ด้วย App Check
App Check ของ Firebase ช่วยรักษาความปลอดภัยของบริการจากการเข้าชมที่ไม่พึงประสงค์และช่วยปกป้องแบ็กเอนด์จากการละเมิด ในขั้นตอนนี้ คุณจะต้องเพิ่มการตรวจสอบข้อมูลเข้าสู่ระบบและบล็อกไคลเอ็นต์ที่ไม่ได้รับอนุญาตด้วย App Check และ reCAPTCHA Enterprise
ก่อนอื่น คุณจะต้องเปิดใช้ App Check และ reCAPTCHA
การเปิดใช้ reCaptcha Enterprise
- ใน Cloud Console ให้ค้นหาและเลือก reCaptcha Enterprise ในส่วนความปลอดภัย
- เปิดใช้บริการตามข้อความแจ้ง แล้วคลิกสร้างคีย์
- ป้อนชื่อที่แสดงตามข้อความแจ้ง แล้วเลือกเว็บไซต์เป็นประเภทแพลตฟอร์ม
- เพิ่ม URL ที่ทำให้ใช้งานได้แล้วลงในรายการโดเมน และตรวจสอบว่า "ใช้คำถามในช่องทำเครื่องหมาย" มีการไม่ได้เลือกอยู่
- คลิกสร้างคีย์และจัดเก็บคีย์ที่สร้างขึ้นไว้ที่ใดก็ได้เพื่อเก็บรักษาคีย์เอาไว้ ซึ่งคุณจะต้องใช้ภายหลังในขั้นตอนนี้
การเปิดใช้ App Check
- ในคอนโซล Firebase ให้ค้นหาส่วนสร้างในแผงด้านซ้าย
- คลิก App Check แล้วคลิกแท็บวิธีการลงชื่อเข้าใช้เพื่อไปที่ App Check
- คลิกลงทะเบียน แล้วป้อนคีย์ reCAPTCHA Enterprise เมื่อระบบแจ้ง แล้วคลิกบันทึก
- ในมุมมอง API ให้เลือกพื้นที่เก็บข้อมูล แล้วคลิกบังคับใช้ ให้ทำแบบเดียวกันนี้กับ Cloud Firestore
ควรบังคับใช้ App Check แล้ว รีเฟรชแอปแล้วลองดูหรือส่งข้อความแชท คุณควรได้รับข้อความแสดงข้อผิดพลาดต่อไปนี้
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
ซึ่งหมายความว่า App Check จะบล็อกคำขอที่ยังไม่ได้รับการตรวจสอบโดยค่าเริ่มต้น ตอนนี้มาเพิ่มการตรวจสอบลงในแอปกัน
ไปที่ไฟล์ environment.ts
และเพิ่ม reCAPTCHAEnterpriseKey
ลงในออบเจ็กต์ environment
export const environment = {
firebase: {
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',
},
reCAPTCHAEnterpriseKey: {
key: "Replace with your recaptcha enterprise site key"
},
};
แทนที่ค่าของ key
ด้วยโทเค็น reCaptcha Enterprise
จากนั้นไปที่ไฟล์ app.config.ts
แล้วเพิ่มการนำเข้าต่อไปนี้
import { getApp } from '@angular/fire/app';
import {
ReCaptchaEnterpriseProvider,
initializeAppCheck,
provideAppCheck,
} from '@angular/fire/app-check';
ในไฟล์ app.config.ts
เดียวกัน ให้เพิ่มการประกาศตัวแปรร่วมต่อไปนี้
declare global {
var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}
@NgModule({ ...
ในการนำเข้า ให้เพิ่มการเริ่มต้น App Check ด้วย ReCaptchaEnterpriseProvider
และตั้งค่า isTokenAutoRefreshEnabled
เป็น true
เพื่ออนุญาตให้โทเค็นรีเฟรชอัตโนมัติ
imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
provider: new ReCaptchaEnterpriseProvider(
environment.reCAPTCHAEnterpriseKey.key
),
isTokenAutoRefreshEnabled: true,
});
if (location.hostname === 'localhost') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
return appCheck;
}),
หากต้องการอนุญาตการทดสอบในเครื่อง ให้ตั้งค่า self.FIREBASE_APPCHECK_DEBUG_TOKEN
เป็น true
เมื่อคุณรีเฟรชแอปใน localhost
ระบบจะบันทึกโทเค็นการแก้ไขข้อบกพร่องในคอนโซลในลักษณะเดียวกับรายการต่อไปนี้
App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.
จากนั้นไปที่มุมมองแอปของ App Check ในคอนโซล Firebase
คลิกเมนูรายการเพิ่มเติม แล้วเลือกจัดการโทเค็นการแก้ไขข้อบกพร่อง
จากนั้นคลิกเพิ่มโทเค็นการแก้ไขข้อบกพร่อง และวางโทเค็นการแก้ไขข้อบกพร่องจากคอนโซลตามข้อความแจ้ง
ไปที่ไฟล์ chat.service.ts
แล้วเพิ่มการนำเข้าต่อไปนี้
import { AppCheck } from '@angular/fire/app-check';
ในไฟล์ chat.service.ts
เดียวกัน ให้แทรก App Check ไปพร้อมกับบริการ Firebase อื่นๆ
export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
- สร้างคอมมิตที่มีข้อความคอมมิต "บล็อกไคลเอ็นต์ที่ไม่ได้รับอนุญาตด้วย App Check" และพุชไปยังที่เก็บ GitHub ของคุณ
- เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
ยินดีด้วย ตอนนี้ App Check ควรใช้งานได้ในแอปของคุณแล้ว