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

Codelab ของเว็บ AngularFire

1. ภาพรวม

ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้ 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-friendlychat-web ที่เก็บมีโปรเจ็กต์ตัวอย่างสำหรับแพลตฟอร์มหลายแพลตฟอร์ม แต่โค้ดแล็บนี้ใช้เฉพาะไดเรกทอรี angularfire-start

คัดลอกโฟลเดอร์ angularfire-start ไปยังที่เก็บของคุณเองโดยทำดังนี้

ใช้เทอร์มินัลเพื่อสร้างโฟลเดอร์ใหม่ในคอมพิวเตอร์และเปลี่ยนเป็นไดเรกทอรีใหม่:
```
mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
```
ใช้แพ็กเกจ npm giget เพื่อดึงข้อมูลเฉพาะโฟลเดอร์ 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 ใหม่ เรียกใช้คำสั่งต่อไปนี้โดยแทนที่ตัวยึดตําแหน่ง your-repository-url ด้วย 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 App Hosting เพื่อสร้าง โฮสต์ และแสดงแอป
Firebase Cloud Messaging เพื่อส่งข้อความ Push และแสดงการแจ้งเตือนแบบป๊อปอัปในเบราว์เซอร์
การตรวจสอบประสิทธิภาพ Firebase เพื่อรวบรวมข้อมูลประสิทธิภาพของผู้ใช้สําหรับแอป

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

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

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

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

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

ตั้งค่า Cloud Storage for Firebase

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

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

ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายบิลด์ แล้วเลือกพื้นที่เก็บข้อมูล
คลิกเริ่มต้นใช้งาน
เลือกตำแหน่งสำหรับที่เก็บข้อมูล Storage เริ่มต้น
ที่เก็บข้อมูลใน US-WEST1, US-CENTRAL1 และ US-EAST1 สามารถใช้แพ็กเกจ"ฟรีตลอด" สำหรับ Google Cloud Storage ที่เก็บข้อมูลในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตามราคาและการใช้งาน Google Cloud Storage
คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎการรักษาความปลอดภัย
ในภายหลังในโค้ดแล็บนี้ คุณจะต้องเพิ่มกฎการรักษาความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล
คลิกสร้าง

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 จากไดเรกทอรีในเครื่องของแอป (ที่เก็บข้อมูลที่โคลนไว้ก่อนหน้านี้ในโค้ดแล็บ) แต่หากต้องการดึงข้อมูลการกําหนดค่า คุณต้องเชื่อมโยงแอปกับโปรเจ็กต์ Firebase

ตรวจสอบว่าบรรทัดคำสั่งเข้าถึงไดเรกทอรี angularfire-start ในพื้นที่ของแอป
เชื่อมโยงแอปกับโปรเจ็กต์ Firebase โดยเรียกใช้คําสั่งต่อไปนี้

firebase use --add

เมื่อได้รับข้อความแจ้ง ให้เลือกรหัสโปรเจ็กต์ แล้วตั้งชื่อแทนให้โปรเจ็กต์ Firebase

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

ทำตามวิธีการที่เหลือในบรรทัดคำสั่ง

5. ติดตั้ง AngularFire

ก่อนเรียกใช้โปรเจ็กต์ โปรดตรวจสอบว่าคุณได้ตั้งค่า Angular CLI และ AngularFire แล้ว

เรียกใช้คำสั่งต่อไปนี้ในคอนโซล

npm install -g @angular/cli

จากนั้นเรียกใช้คำสั่ง Angular CLI ต่อไปนี้ในคอนโซลจากไดเรกทอรี angularfire-start

ng add @angular/fire

ซึ่งจะติดตั้งไลบรารีที่จำเป็นทั้งหมดสำหรับโปรเจ็กต์

เมื่อได้รับข้อความแจ้ง ให้ยกเลิกการเลือก ng deploy -- hosting ด้วยแป้นเว้นวรรค เลือกฟีเจอร์ต่อไปนี้ด้วยปุ่มลูกศรและ Spacebar
- Authentication
- Firestore
- Cloud Messaging
- Cloud Storage
กด enter แล้วทำตามข้อความแจ้งที่เหลือ
สร้างการคอมมิตที่มีข้อความการคอมมิต "ติดตั้ง AngularFire" แล้วพุชไปยังที่เก็บ GitHub

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

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

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

ไปที่หน้าโฮสติ้งแอปในคอนโซล Firebase

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

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

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

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

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

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

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

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.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

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

คุณจะเห็นว่ามีการเพิ่มฟีเจอร์ที่คุณเลือกไว้ในคอนโซลลงในไฟล์ /angularfire-start/src/app/app.config.ts โดยอัตโนมัติ ซึ่งจะช่วยให้แอปใช้ฟีเจอร์และฟังก์ชันการทำงานของ Firebase ได้

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

ตอนนี้ AngularFire ควรพร้อมใช้งานแล้วเนื่องจากมีการนําเข้าและเริ่มต้นใช้งานใน app.config.ts ตอนนี้คุณกำลังจะใช้การลงชื่อเข้าใช้ของผู้ใช้โดยใช้ Firebase Authentication

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

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

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

เมื่อผู้ใช้คลิกปุ่มลงชื่อเข้าใช้ด้วย Google ในแอป ระบบจะเรียกใช้ฟังก์ชัน login สําหรับโค้ดแล็บนี้ คุณต้องการให้สิทธิ์ 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 มีฟังก์ชันสําหรับรับ Observable ที่อัปเดตทุกครั้งที่สถานะการตรวจสอบสิทธิ์เปลี่ยนแปลง เราได้ติดตั้งใช้งานแล้ว แต่คุณก็ลองดูได้

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

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

สร้างการคอมมิตที่มีข้อความการคอมมิต "แสดงแชทใหม่ใน UI" และพุชไปยังที่เก็บ GitHub
เปิดหน้าการโฮสต์แอปในคอนโซล Firebase แล้วรอให้การเปิดตัวใหม่เสร็จสมบูรณ์
รีเฟรช FriendlyChat ข้อความที่คุณสร้างไว้ในฐานข้อมูลก่อนหน้านี้ควรแสดงใน UI ของ FriendlyChat (ดูด้านล่าง) คุณเขียนข้อความใหม่ได้ ข้อความจะปรากฏขึ้นทันที
(ไม่บังคับ) คุณลองลบ แก้ไข หรือเพิ่มข้อความใหม่ด้วยตนเองได้ในส่วน Firestore ของชุดโปรแกรมจำลอง โดยการเปลี่ยนแปลงทั้งหมดจะแสดงใน UI

ยินดีด้วย คุณกําลังอ่านเอกสาร Cloud Firestore ในแอป

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

คุณจะใช้ AI ของ Google เพื่อเพิ่มฟีเจอร์ความช่วยเหลือที่มีประโยชน์ลงในแอปแชท

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

ไปที่ Google AI Studio แล้วคลิกสร้างคีย์ API
เลือกโปรเจ็กต์ Firebase ที่คุณสร้างสําหรับโค้ดแล็บนี้ ข้อความแจ้งนี้มีไว้สำหรับโปรเจ็กต์ Google Cloud แต่โปรเจ็กต์ Firebase ทุกโปรเจ็กต์เป็นโปรเจ็กต์ Google Cloud
คลิกสร้างคีย์ API ในโปรเจ็กต์ที่มีอยู่
คัดลอกคีย์ API ที่ได้

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

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

คลิกติดตั้งในคอนโซล Firebase ในหน้าส่วนขยายสร้างแชทบ็อตด้วย Gemini API
ทำตามข้อความแจ้ง เมื่อถึงขั้นตอนกําหนดค่าส่วนขยาย ให้ตั้งค่าพารามิเตอร์ต่อไปนี้
- ผู้ให้บริการ Gemini API: Google AI
- คีย์ API ของ Google AI: วางคีย์ที่คุณสร้างไว้ก่อนหน้านี้ แล้วคลิกสร้างข้อมูลลับ
- เส้นทางของคอลเล็กชัน Firestore: messages
- ฟิลด์พรอมต์: text
- ช่องคําตอบ: response
- ช่องคำสั่งซื้อ: timestamp
- บริบท: Keep your answers short, informal, and helpful. Use emojis when possible.
คลิกติดตั้งส่วนขยาย
รอให้ส่วนขยายติดตั้งเสร็จ

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

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

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

12. ส่งรูปภาพ

ตอนนี้คุณจะต้องเพิ่มฟีเจอร์ที่แชร์รูปภาพ

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

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

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

เพิ่ม Service Worker ของ 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);
    };
}

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

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

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

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

ตอนนี้คุณก็ส่งการแจ้งเตือนได้แล้ว

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

หากแอปทำงานอยู่เบื้องหน้า คุณจะเห็นการแจ้งเตือนในคอนโซล JavaScript

หากแอปทำงานอยู่เบื้องหลัง การแจ้งเตือนควรปรากฏในเบราว์เซอร์ ดังตัวอย่างต่อไปนี้

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

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

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

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

เมื่อตั้งค่าโปรเจ็กต์ Firebase ในช่วงต้นของโค้ดแล็บนี้ คุณเลือกที่จะใช้กฎความปลอดภัยเริ่มต้นของ 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

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

ก่อนอื่น คุณต้องเปิดใช้ App Check และ reCAPTCHA

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

ในคอนโซลระบบคลาวด์ ให้ค้นหาและเลือก 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.firebasestorage.app',
    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 ควรทำงานในแอปของคุณแล้ว

Codelab ของเว็บ AngularFire

1. ภาพรวม

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

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

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

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

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

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

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

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

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

ตั้งค่า Cloud Firestore

ตั้งค่า Cloud Storage for Firebase

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

5. ติดตั้ง AngularFire

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

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

กําหนดค่า Firebase

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

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

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

ตรวจสอบสิทธิ์ผู้ใช้ด้วยฟีเจอร์ลงชื่อเข้าใช้ด้วย Google

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

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

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

โมเดลข้อมูล

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

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

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

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

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

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

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

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

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

12. ส่งรูปภาพ

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

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

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

เพิ่ม Service Worker ของ FCM

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

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

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

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

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

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

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

15. ยินดีด้วย

สิ่งที่คุณมีสิทธิ์รับ

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

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

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