หน้านี้ได้รับการแปลโดย Cloud Translation API

Codelab ของเว็บ AngularFire

1. ภาพรวม

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

แอปแชทที่ผู้ใช้พูดคุยกันเกี่ยวกับ Firebase

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

สร้างเว็บแอปโดยใช้ Angular และ Firebase
ซิงค์ข้อมูลโดยใช้ Cloud Firestore และ Cloud Storage สำหรับ Firebase
ตรวจสอบสิทธิ์ผู้ใช้ด้วยการตรวจสอบสิทธิ์ Firebase
ทำให้เว็บแอปใช้งานได้ใน Firebase App Hosting
ส่งการแจ้งเตือนด้วย 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-friendchat-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 ตั้งชื่อตามต้องการ
1. GitHub จะให้ URL ที่เก็บใหม่ซึ่งมีลักษณะคล้ายกับ https://github.com/[user-name]/[repository-name].git หรือ git@github.com:[user-name]/[repository-name].git คัดลอก 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 ว่า friendChat จำรหัสโปรเจ็กต์ Firebase ของคุณไว้
ยกเลิกการเลือกเปิดใช้ Google Analytics สำหรับโปรเจ็กต์นี้
คลิกสร้างโปรเจ็กต์

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

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

ลงทะเบียนภาพหน้าจอของเว็บแอป

ตั้งค่าการตรวจสอบสิทธิ์

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

ในคอนโซล Firebase ให้ไปที่การตรวจสอบสิทธิ์
คลิกเริ่มต้นใช้งาน
ในคอลัมน์ผู้ให้บริการเพิ่มเติม ให้คลิก Google > เปิดใช้
ในกล่องข้อความชื่อที่เปิดเผยต่อสาธารณะสำหรับโปรเจ็กต์ ให้ป้อนชื่อที่จำได้ เช่น My Next.js app
เลือกอีเมลของคุณจากเมนูแบบเลื่อนลงอีเมลสนับสนุนสำหรับโครงการ
คลิกบันทึก

เปิดใช้ Cloud Firestore

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

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

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

เปิดใช้ Cloud Storage

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

คุณจะต้องเปิดใช้ Cloud Storage โดยทำดังนี้

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

4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase

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

ติดตั้ง CLI โดยเรียกใช้คำสั่ง npm ต่อไปนี้

npm -g install firebase-tools@latest

ตรวจสอบว่า CLI ได้รับการติดตั้งอย่างถูกต้องโดยเรียกใช้คำสั่งต่อไปนี้

firebase --version

ตรวจสอบว่า Firebase CLI เป็นเวอร์ชัน v13.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. สร้างแบ็กเอนด์ App Hosting

ในส่วนนี้ คุณจะได้ตั้งค่าแบ็กเอนด์ของ App Hosting เพื่อดู Branch ในที่เก็บ Git ของคุณ

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

ไปที่หน้า App Hosting ในคอนโซล Firebase

สถานะศูนย์ของคอนโซลโฮสติ้งแอปที่มีปุ่ม "เริ่มต้นใช้งาน"

คลิก "เริ่มต้นใช้งาน" เพื่อเริ่มขั้นตอนการสร้างแบ็กเอนด์ กำหนดค่าแบ็กเอนด์ดังนี้
ทำตามข้อความแจ้งในขั้นตอนแรกเพื่อเชื่อมต่อที่เก็บ GitHub ที่คุณสร้างไว้ก่อนหน้านี้
ตั้งค่าการทำให้ใช้งานได้:
1. เก็บไดเรกทอรีรากไว้เป็น /
2. ตั้งค่า Branch แบบเรียลไทม์เป็น main
3. เปิดใช้การเปิดตัวอัตโนมัติ
ตั้งชื่อแบ็กเอนด์เป็น friendlychat-codelab
ใน "สร้างหรือเชื่อมโยงเว็บแอป Firebase" ให้เลือกเว็บแอปที่กำหนดค่าไว้ก่อนหน้านี้จากเมนูแบบเลื่อนลง "เลือกเว็บแอป Firebase ที่มีอยู่"
คลิก "เสร็จสิ้นและทำให้ใช้งานได้" หลังจากผ่านไปสักครู่ ระบบจะนำคุณไปยังหน้าใหม่ที่คุณจะดูสถานะแบ็กเอนด์ของ App Hosting ใหม่ได้
หมายเหตุ: คุณสามารถตรวจสอบบริการ Google Cloud พื้นฐานสําหรับแบ็กเอนด์ของ App Hosting ได้โดยไปตามลิงก์จากคอนโซล ดูข้อมูลเพิ่มเติมในดูบันทึกและเมตริก
เมื่อการเปิดตัวเสร็จสมบูรณ์แล้ว ให้คลิกโดเมนฟรีของคุณใต้ "โดเมน" การดำเนินการนี้อาจใช้เวลา 2-3 นาทีจึงจะเริ่มทำงานเนื่องจากการเผยแพร่ DNS

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

สถานะศูนย์ของคอนโซลโฮสติ้งแอปที่มีปุ่ม "เริ่มต้นใช้งาน"

คุณควรเห็นหน้าจอลงชื่อเข้าใช้ของแอป EasyChat ซึ่ง (ยัง) ไม่ทำงาน

แอปไม่สามารถดำเนินการใดๆ ได้ในขณะนี้ แต่ด้วยความช่วยเหลือจากคุณ จะดำเนินการได้ในเร็วๆ นี้

เรามาสร้างแอปแชทแบบเรียลไทม์กัน

7. นำเข้าและกำหนดค่า Firebase

กำหนดค่า Firebase

คุณจะต้องกำหนดค่า Firebase SDK เพื่อบอกให้ทราบว่าคุณใช้โปรเจ็กต์ Firebase ใดอยู่

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

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

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

ในไดเรกทอรีย่อย /src/app/services/ ให้เปิด chat.service.ts
หาฟังก์ชัน 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 ใน CompanionChat จะใช้การสังเกตการณ์นี้เพื่ออัปเดต 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 และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
รีเฟรชแชทที่คุ้นเคย หลังจากเข้าสู่ระบบ ให้ป้อนข้อความ เช่น "สวัสดี" แล้วคลิกส่ง การดำเนินการนี้จะเขียนข้อความลงใน Cloud Firestore อย่างไรก็ตาม คุณจะยังไม่เห็นข้อมูลในเว็บแอปจริงเนื่องจากคุณยังต้องใช้การดึงข้อมูลข้อมูล (ส่วนถัดไปของ Codelab)
โดยคุณจะดูข้อความที่เพิ่มใหม่ได้ในคอนโซล Firebase เปิด UI ของชุดโปรแกรมจำลอง ในส่วนสร้าง ให้คลิกฐานข้อมูล Firestore (หรือคลิกที่นี่ และคุณจะเห็นคอลเล็กชันข้อความพร้อมด้วยข้อความที่เพิ่มมาใหม่:

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 จะใช้สแนปชอตขั้นสูง ระบบจะทริกเกอร์ฟังก์ชันเรียกกลับเมื่อมีการเปลี่ยนแปลงกับเอกสารที่ตรงกับคำค้นหา ซึ่งอาจเป็นในกรณีที่ข้อความถูกลบ แก้ไข หรือเพิ่มเข้าไป อ่านข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในเอกสารประกอบเกี่ยวกับ Cloud Firestore

ทดสอบการซิงค์ข้อความ

สร้างคอมมิตที่มีข้อความคอมมิต "แสดงแชทใหม่ใน UI" และพุชไปยังที่เก็บ GitHub
เปิดหน้าโฮสติ้งแอปในคอนโซล Firebase และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
รีเฟรชแชทที่คุ้นเคย ข้อความที่คุณสร้างไว้ก่อนหน้านี้ในฐานข้อมูลควรแสดงใน UI ของ UnifiedChat (ดูด้านล่าง) คุณสามารถเขียนข้อความใหม่ๆ ได้ตามต้องการ ซึ่งข้อความควรจะปรากฏทันที
(ไม่บังคับ) คุณสามารถลองลบ แก้ไข หรือเพิ่มข้อความใหม่ด้วยตนเองได้โดยตรงในส่วน 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: วางคีย์ที่คุณสร้างไว้ก่อนหน้านี้แล้วคลิก Create secret
- เส้นทางคอลเล็กชันของ Firestore: messages
- ช่องข้อความแจ้ง: text
- ช่องคำตอบ: response
- ช่องคำสั่งซื้อ: timestamp
- บริบท: Keep your answers short, informal, and helpful. Use emojis when possible.
คลิกติดตั้งส่วนขยาย
รอให้ส่วนขยายติดตั้งเสร็จ

ฟีเจอร์ AI ทดสอบ

EasyChat มีโค้ดสำหรับอ่านคำตอบจากส่วนขยาย AI อยู่แล้ว สิ่งที่คุณต้องทำคือการส่งข้อความแชทใหม่เพื่อทดสอบ

เปิด HappyChat แล้วส่งข้อความ
เมื่อผ่านไปสักครู่ คุณควรเห็นคำตอบปรากฏขึ้นอยู่ข้างข้อความ ซึ่งมีหมายเหตุ ✨ ai generated ในตอนท้ายเพื่อความชัดเจนว่าสร้างขึ้นด้วย Generative AI ไม่ใช่ผู้ใช้จริง

12. ส่งรูปภาพ

เพียงเท่านี้คุณก็จะเพิ่มฟีเจอร์ที่แชร์รูปภาพได้แล้ว

แม้ว่า Cloud Firestore เหมาะสำหรับการจัดเก็บข้อมูลที่มีโครงสร้าง แต่ Cloud Storage จะเหมาะสำหรับการจัดเก็บไฟล์มากกว่า พื้นที่เก็บข้อมูลระบบคลาวด์สำหรับ 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 และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
รีเฟรชแชทที่คุ้นเคย หลังจากเข้าสู่ระบบแล้ว ให้คลิกปุ่มอัปโหลดรูปภาพที่ด้านซ้ายล่าง แล้วเลือกไฟล์ภาพโดยใช้เครื่องมือเลือกไฟล์ หากคุณกำลังมองหาภาพ คุณสามารถใช้ภาพสวยๆ ของถ้วยกาแฟนี้
ข้อความใหม่ควรปรากฏใน UI ของแอปพร้อมรูปภาพที่คุณเลือก:

หากคุณลองเพิ่มรูปภาพในขณะที่ไม่ได้ลงชื่อเข้าใช้ คุณควรเห็นข้อผิดพลาดแจ้งว่าคุณต้องลงชื่อเข้าใช้เพื่อเพิ่มรูปภาพ

13. แสดงการแจ้งเตือน

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

เพิ่ม Service Worker ของ FCM

เว็บแอปต้องมีโปรแกรมทำงานของบริการที่จะรับและแสดงการแจ้งเตือนบนเว็บ

ควรตั้งค่าผู้ให้บริการรับส่งข้อความแล้วเมื่อมีการเพิ่ม AngularFire โปรดตรวจสอบว่ามีโค้ดต่อไปนี้ในส่วนการนำเข้าของ /angularfire-start/src/app/app.module.ts

provideMessaging(() => {
    return getMessaging();
}),

`app/app.module.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 และรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
รีเฟรชแชทที่คุ้นเคย หลังจากเข้าสู่ระบบแล้ว กล่องโต้ตอบสิทธิ์การแจ้งเตือนจะปรากฏขึ้น:
คลิกอนุญาต
เปิดคอนโซล 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

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

ดูข้อมูลเพิ่มเติม

firebase.google.com

16. [ไม่บังคับ] บังคับใช้ด้วย App Check

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

ก่อนอื่น คุณจะต้องเปิดใช้ App Check และ Captcha อีกครั้ง

การเปิดใช้ reCaptcha Enterprise

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

การเปิดใช้ App Check

ในคอนโซล Firebase ให้ไปที่ส่วนสร้างในแผงด้านซ้าย
คลิก App Check แล้วคลิกแท็บวิธีการลงชื่อเข้าใช้เพื่อไปยัง App Check
คลิก ลงทะเบียน และป้อนคีย์ reCaptcha Enterprise เมื่อได้รับข้อความแจ้ง จากนั้นคลิก Save
ในมุมมอง 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.module.ts และเพิ่มการนําเข้าต่อไปนี้

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

ในไฟล์ app.module.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 ควรทำงานในแอปได้แล้ว

Codelab ของเว็บ AngularFire

1. ภาพรวม

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

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

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

สร้างที่เก็บ GitHub

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

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

อัปเกรดแผนการตั้งราคา Firebase

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

ตั้งค่าการตรวจสอบสิทธิ์

เปิดใช้ Cloud Firestore

เปิดใช้ Cloud Storage

4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase

5. ติดตั้ง AngularFire

6. สร้างแบ็กเอนด์ App Hosting

7. นำเข้าและกำหนดค่า Firebase

กำหนดค่า Firebase

ดูการตั้งค่า AngularFire

8. ตั้งค่าการลงชื่อเข้าใช้ของผู้ใช้

เพิ่มโดเมนที่ได้รับอนุญาต

ตรวจสอบสิทธิ์ผู้ใช้ด้วย Google Sign-In

ติดตามสถานะการตรวจสอบสิทธิ์

ทดสอบการเข้าสู่ระบบแอป

9. เขียนข้อความไปยัง Cloud Firestore

โมเดลข้อมูล

เพิ่มข้อความไปยัง Cloud Firestore

ทดสอบการส่งข้อความ

10. อ่านข้อความ

ซิงค์ข้อความ

ทดสอบการซิงค์ข้อความ

11. เพิ่มฟีเจอร์ AI

รับคีย์ AI API ของ Google

ติดตั้งส่วนขยาย

ฟีเจอร์ AI ทดสอบ

12. ส่งรูปภาพ

บันทึกรูปภาพไปยัง Cloud Storage

ทดสอบการส่งรูปภาพ

13. แสดงการแจ้งเตือน

เพิ่ม Service Worker ของ FCM

รับโทเค็นอุปกรณ์ FCM

ขอสิทธิ์เพื่อแสดงการแจ้งเตือน

รับโทเค็นอุปกรณ์

ส่งการแจ้งเตือนไปยังอุปกรณ์

14. กฎความปลอดภัยของ Cloud Firestore

ดูกฎความปลอดภัยของฐานข้อมูล

ดูกฎความปลอดภัยของ Cloud Storage

15. ยินดีด้วย

สิ่งที่คุณได้ครอบคลุม

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

ดูข้อมูลเพิ่มเติม

16. [ไม่บังคับ] บังคับใช้ด้วย App Check