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

Codelab ของเว็บ AngularFire

1. ภาพรวม

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

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

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

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

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

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

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

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

ตั้งค่า Cloud Storage สำหรับ Firebase

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

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

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

การดำเนินการนี้จะติดตั้งทรัพยากร Dependency ทั้งหมดที่จำเป็นสำหรับโปรเจ็กต์ของคุณ

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

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

ในส่วนนี้ คุณจะได้ตั้งค่าแบ็กเอนด์ของโฮสติ้งแอปเพื่อดู Branch ในที่เก็บ 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

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

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

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

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

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

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

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

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

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

เมื่อคุณมีโทเค็นอุปกรณ์แล้ว คุณสามารถส่งการแจ้งเตือนได้

เปิดแท็บ 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 สำหรับ 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 สำหรับ 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. แสดงการแจ้งเตือน

เพิ่มโปรแกรมทำงานของบริการ FCM

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

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

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

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

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

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

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

15. ยินดีด้วย

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

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

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

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