โค้ดแล็บเว็บ AngularFire

1. ภาพรวม

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

angularfire-2.png

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

  • สร้างเว็บแอปโดยใช้ Angular และ Firebase
  • ซิงค์ข้อมูลโดยใช้ Cloud Firestore และ Cloud Storage สำหรับ Firebase
  • ตรวจสอบผู้ใช้ของคุณโดยใช้ Firebase Authentication
  • ปรับใช้เว็บแอปของคุณบน Firebase Hosting
  • ส่งการแจ้งเตือนด้วย Firebase Cloud Messaging
  • รวบรวมข้อมูลประสิทธิภาพของเว็บแอปของคุณ

สิ่งที่คุณต้องการ

  • โปรแกรมแก้ไข IDE/ข้อความที่คุณเลือก เช่น WebStorm , Atom , Sublime หรือ VS Code
  • ตัวจัดการแพ็คเกจ npm ซึ่งโดยทั่วไปจะมาพร้อมกับ Node.js
  • เทอร์มินัล/คอนโซล
  • เบราว์เซอร์ที่คุณเลือก เช่น Chrome
  • โค้ดตัวอย่างของ Codelab (ดูวิธีรับโค้ดในขั้นตอนถัดไปของ Codelab)

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

โคลน ที่เก็บ GitHub ของ codelab จากบรรทัดคำสั่ง:

git clone https://github.com/firebase/codelab-friendlychat-web

หรือหากคุณไม่ได้ติดตั้ง git คุณสามารถ ดาวน์โหลดที่เก็บเป็นไฟล์ ZIP ได้

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

ใช้ IDE ของคุณ เปิดหรือนำเข้าไดเร็กทอรี 📁 angularfire-start จากที่เก็บโคลน ไดเรกทอรี 📁 angularfire-start นี้ประกอบด้วยโค้ดเริ่มต้นสำหรับ codelab ซึ่งจะเป็นเว็บแอปแชทที่ทำงานได้อย่างสมบูรณ์

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

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

  1. ลงชื่อเข้าใช้ Firebase
  2. ในคอนโซล Firebase คลิก เพิ่มโปรเจ็กต์ จากนั้นตั้งชื่อโปรเจ็กต์ Firebase ของคุณ FriendlyChat จำรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ Firebase ของคุณ
  3. ยกเลิก การเลือกเปิดใช้งาน Google Analytics สำหรับโปรเจ็กต์นี้
  4. คลิก สร้างโครงการ

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

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

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

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

  1. คลิกที่ไอคอนเว็บ 58d6543a156e56f9.png เพื่อสร้างเว็บแอป Firebase ใหม่
  2. ลงทะเบียนแอปด้วยชื่อเล่น Friendly Chat จากนั้นทำเครื่องหมายที่ช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ด้วย คลิกลง ทะเบียนแอป
  3. ในขั้นตอนถัดไป คุณจะเห็นออบเจ็กต์การกำหนดค่า คัดลอกเฉพาะวัตถุ JS (ไม่ใช่ HTML โดยรอบ) ลงใน firebase-config.js

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

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

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

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

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

d89fb3873b5d36ae.png

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

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

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

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

729991a081e7cd5.png

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

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

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

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

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

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

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

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

  1. ติดตั้ง CLI โดยการรันคำสั่ง npm ต่อไปนี้:
npm -g install firebase-tools
  1. ตรวจสอบว่าติดตั้ง CLI อย่างถูกต้องโดยการรันคำสั่งต่อไปนี้:
firebase --version

ตรวจสอบให้แน่ใจว่าเวอร์ชันของ Firebase CLI เป็นเวอร์ชัน 4.1.0 หรือใหม่กว่า

  1. ให้สิทธิ์ Firebase CLI โดยการรันคำสั่งต่อไปนี้:
firebase login

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

  1. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณเข้าถึงไดเร็กทอรี angularfire-start ในเครื่องของแอป
  2. เชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:
firebase use --add
  1. เมื่อได้รับแจ้ง ให้เลือก รหัสโปรเจ็กต์ ของคุณ จากนั้นตั้งชื่อแทนโปรเจ็กต์ Firebase ของคุณ

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

  1. ปฏิบัติตามคำแนะนำที่เหลือบนบรรทัดคำสั่งของคุณ

5. ติดตั้ง AngularFire

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

  1. ในคอนโซล ให้รันคำสั่งต่อไปนี้:
npm install -g @angular/cli
  1. จากนั้น ในคอนโซลจากไดเร็กทอรี angularfire-start ให้รันคำสั่ง Angular CLI ต่อไปนี้:
ng add @angular/fire

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

  1. เมื่อได้รับแจ้ง ให้เลือกคุณสมบัติที่ตั้งค่าไว้ในคอนโซล Firebase ( ng deploy -- hosting , Authentication , Firestore , Cloud Functions (callable) , Cloud Messaging ด์ , Cloud Storage ) และปฏิบัติตามพร้อมท์บนคอนโซล

6. เรียกใช้แอปเริ่มต้นในเครื่อง

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

  1. ในคอนโซลจากไดเร็กทอรี angularfire-start ให้รันคำสั่ง Firebase CLI ต่อไปนี้:
firebase emulators:start
  1. บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:
✔  hosting: Local server: http://localhost:5000

คุณกำลังใช้โปรแกรมจำลอง โฮสติ้งของ Firebase เพื่อให้บริการแอปของเราในเครื่อง ขณะนี้เว็บแอปควรจะพร้อมใช้งานจาก http://localhost:5000 ไฟล์ทั้งหมดที่อยู่ในไดเร็กทอรีย่อย src จะถูกให้บริการ

  1. ใช้เบราว์เซอร์ของคุณ เปิดแอปของคุณที่ http://localhost:5000

คุณควรเห็น UI ของแอป FriendlyChat ซึ่ง (ยัง) ไม่ทำงาน:

แองกูลาร์ไฟร์-2.png

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

มาสร้างการแชทแบบเรียลไทม์กันดีกว่า!

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

กำหนดค่า Firebase

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

  1. ไปที่ การตั้งค่าโครงการของคุณในคอนโซล Firebase
  2. ในการ์ด "แอปของคุณ" ให้เลือกชื่อเล่นของแอปที่คุณต้องการออบเจ็กต์การกำหนดค่า
  3. เลือก "กำหนดค่า" จากแผงข้อมูลโค้ด Firebase SDK

คุณจะพบว่าไฟล์สภาพแวดล้อม /angularfire-start/src/environments/environment.ts ถูกสร้างขึ้นสำหรับคุณ

  1. คัดลอกข้อมูลโค้ดออบเจ็กต์การกำหนดค่า จากนั้นเพิ่มลงใน angularfire-start/src/firebase-config.js

environment.ts

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",
  },
};

นำเข้า AngularFire

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

  1. ใน /angularfire-start/src/app/app.module.ts ให้ค้นหาส่วน imports และแก้ไขฟังก์ชันที่มีให้เพื่อเชื่อมต่อกับชุด Emulator ในสภาพแวดล้อมที่ไม่ใช่การใช้งานจริง
// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

app.module.ts

ในระหว่าง Codelab นี้ คุณจะใช้ Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging และ Performance Monitoring ดังนั้นคุณจึงนำเข้าไลบรารีทั้งหมด ในแอปในอนาคต ตรวจสอบให้แน่ใจว่าคุณนำเข้าเฉพาะส่วนของ Firebase ที่คุณต้องการเท่านั้น เพื่อลดเวลาในการโหลดแอปของคุณ

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

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

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

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

  1. ในไดเร็กทอรี angularfire-start ในไดเร็กทอรีย่อย /src/app/services/ ให้เปิด chat.service.ts
  2. ค้นหาฟังก์ชั่น login ระบบ
  3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

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 จะถูกทริกเกอร์เมื่อผู้ใช้คลิกปุ่ม ออกจากระบบ

  1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
  2. ค้นหาฟังก์ชัน logout
  3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

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

  1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
  2. ค้นหาการกำหนดตัวแปร user$
  3. แทนที่การมอบหมายทั้งหมดด้วยรหัสต่อไปนี้

chat.service.ts

// Observable user
user$ = user(this.auth);

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

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

  1. หากแอปของคุณยังคงให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase emulators:start บนบรรทัดคำสั่งเพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
  2. ลงชื่อเข้าใช้แอปโดยใช้ปุ่มลงชื่อเข้าใช้และบัญชี Google ของคุณ หากคุณเห็นข้อความแสดงข้อผิดพลาดระบุว่า auth/operation-not-allowed ให้ตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งาน Google Sign-In เป็นผู้ให้บริการตรวจสอบสิทธิ์ในคอนโซล Firebase
  3. หลังจากเข้าสู่ระบบ รูปภาพโปรไฟล์และชื่อผู้ใช้ของคุณควรปรากฏขึ้น: เชิงมุมไฟ-3.png

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

ในส่วนนี้ คุณจะเขียนข้อมูลบางส่วนไปยัง Cloud Firestore เพื่อให้คุณสามารถเติมข้อมูล UI ของแอปได้ ซึ่งสามารถทำได้ด้วยตนเองด้วย คอนโซล Firebase แต่คุณจะทำในแอปเองเพื่อสาธิตการเขียน Cloud Firestore ขั้นพื้นฐาน

แบบจำลองข้อมูล

ข้อมูล Cloud Firestore จะแบ่งออกเป็นคอลเลกชัน เอกสาร ช่อง และคอลเลกชันย่อย คุณจะจัดเก็บแต่ละข้อความของการแชทเป็นเอกสารในคอลเลกชันระดับบนสุดที่เรียกว่า messages

688d7bc5fb662b57.png

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

หากต้องการจัดเก็บข้อความแชทที่ผู้ใช้เขียน คุณจะต้องใช้ Cloud Firestore

ในส่วนนี้ คุณจะเพิ่มฟังก์ชันการทำงานสำหรับผู้ใช้ในการเขียนข้อความใหม่ลงในฐานข้อมูลของคุณ ผู้ใช้คลิกปุ่ม ส่ง จะทริกเกอร์ข้อมูลโค้ดด้านล่าง โดยจะเพิ่มออบเจ็กต์ข้อความที่มีเนื้อหาในช่องข้อความไปยังอินสแตนซ์ Cloud Firestore ของคุณในคอลเลกชัน messages add() วิธีการเพิ่มเอกสารใหม่ที่มี ID ที่สร้างขึ้นโดยอัตโนมัติในคอลเลกชัน

  1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
  2. ค้นหาฟังก์ชัน addMessage
  3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

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

  1. หากแอปของคุณยังคงให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase emulators:start บนบรรทัดคำสั่งเพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
  2. หลังจากเข้าสู่ระบบ ให้ป้อนข้อความเช่น "สวัสดี!" จากนั้นคลิก ส่ง นี่จะเขียนข้อความลงใน Cloud Firestore อย่างไรก็ตาม คุณจะยังไม่เห็นข้อมูลในเว็บแอปจริงของคุณ เนื่องจากคุณยังต้องใช้ การดึง ข้อมูล (ส่วนถัดไปของ Codelab)
  3. คุณสามารถดูข้อความที่เพิ่มใหม่ในคอนโซล Firebase ของคุณ เปิด UI ของชุด Emulator ใต้ส่วน สร้าง คลิก ฐานข้อมูล Firestore (หรือคลิก ที่นี่ และคุณจะเห็นคอลเลกชัน ข้อความ พร้อมข้อความที่เพิ่มใหม่ของคุณ:

6812efe7da395692.png

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

ประสาน ข้อความ

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

คุณจะเพิ่มโค้ดที่ฟังข้อความที่เพิ่มใหม่จากแอป ในโค้ดนี้ คุณจะดึงสแน็ปช็อตของคอลเลกชัน messages คุณจะแสดงเฉพาะ 12 ข้อความสุดท้ายของการแชทเพื่อหลีกเลี่ยงการแสดงประวัติที่ยาวมากเมื่อโหลด

  1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
  2. ค้นหาฟังก์ชัน loadMessages
  3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

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

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

  1. หากแอปของคุณยังคงให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase emulators:start บนบรรทัดคำสั่งเพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
  2. ข้อความที่คุณสร้างไว้ก่อนหน้านี้ในฐานข้อมูลควรแสดงใน FriendlyChat UI (ดูด้านล่าง) อย่าลังเลที่จะเขียนข้อความใหม่ ควรปรากฏขึ้นทันที
  3. (ไม่บังคับ) คุณสามารถลองลบ แก้ไข หรือเพิ่มข้อความใหม่ด้วยตนเองได้โดยตรงในส่วน Firestore ของชุด Emulator การเปลี่ยนแปลงใด ๆ ควรสะท้อนให้เห็นใน UI

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

แองกูลาร์ไฟร์-2.png

11. ส่งภาพ

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

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

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

สำหรับ Codelab นี้ คุณได้เพิ่มปุ่มที่ทริกเกอร์กล่องโต้ตอบเครื่องมือเลือกไฟล์ให้คุณแล้ว หลังจากเลือกไฟล์แล้ว ฟังก์ชัน saveImageMessage จะถูกเรียกใช้ และคุณจะได้รับการอ้างอิงไปยังไฟล์ที่เลือก ฟังก์ชัน saveImageMessage ทำหน้าที่ดังต่อไปนี้:

  1. สร้างข้อความแชท "ตัวยึดตำแหน่ง" ในฟีดแชท เพื่อให้ผู้ใช้เห็นภาพเคลื่อนไหว "กำลังโหลด" ในขณะที่คุณอัปโหลดภาพ
  2. อัปโหลดไฟล์รูปภาพไปยัง Cloud Storage ไปยังเส้นทางนี้: /<uid>/<file_name>
  3. สร้าง URL ที่สาธารณะสามารถอ่านได้สำหรับไฟล์ภาพ
  4. อัปเดตข้อความแชทด้วย URL ของไฟล์ภาพที่อัปโหลดใหม่แทนรูปภาพที่โหลดชั่วคราว

ตอนนี้ คุณจะเพิ่มฟังก์ชันในการส่งรูปภาพ:

  1. กลับไปที่ไฟล์ src/chat.service.ts
  2. ค้นหาฟังก์ชัน saveImageMessage
  3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

แชท.บริการ.ts

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - You 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);
  }
}

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

  1. หากแอปของคุณยังคงให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase emulators:start บนบรรทัดคำสั่งเพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
  2. หลังจากเข้าสู่ระบบแล้ว ให้คลิกปุ่มอัพโหลดภาพที่ด้านล่างซ้าย แองกูลาร์ไฟร์-4.png และเลือกไฟล์รูปภาพโดยใช้ตัวเลือกไฟล์ หากคุณกำลังมองหารูปภาพ อย่าลังเลที่จะใช้ รูปภาพสวยๆ ของถ้วยกาแฟ
  3. ข้อความใหม่ควรปรากฏใน UI ของแอปพร้อมกับรูปภาพที่คุณเลือก: แองกูลาร์ไฟร์-2.png

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

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

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

เพิ่มพนักงานบริการ 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

  1. ค้นหาฟังก์ชัน saveMessagingDeviceToken
  2. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

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() ซึ่งจะแสดงกล่องโต้ตอบของเบราว์เซอร์เพื่อขอสิทธิ์นี้ ( ในเบราว์เซอร์ที่รองรับ )

8b9d0c66dc36153d.png

  1. กลับไปที่ไฟล์ src/app/services/chat.service.ts
  2. ค้นหาฟังก์ชัน requestNotificationsPermissions
  3. แทนที่ฟังก์ชันทั้งหมดด้วยโค้ดต่อไปนี้

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.');
    }
}

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

  1. หากแอปของคุณยังคงให้บริการอยู่ ให้รีเฟรชแอปของคุณในเบราว์เซอร์ มิฉะนั้น ให้เรียกใช้ firebase emulators:start บนบรรทัดคำสั่งเพื่อเริ่มให้บริการแอปจาก http://localhost:5000 จากนั้นเปิดในเบราว์เซอร์ของคุณ
  2. หลังจากเข้าสู่ระบบ กล่องโต้ตอบการอนุญาตการแจ้งเตือนควรปรากฏขึ้น: bd3454e6dbfb6723.png
  3. คลิก อนุญาต
  4. เปิดคอนโซล JavaScript ของเบราว์เซอร์ของคุณ คุณควรเห็นข้อความต่อไปนี้: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. คัดลอกโทเค็นอุปกรณ์ของคุณ คุณจะต้องใช้มันในขั้นตอนต่อไปของ Codelab

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

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

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

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

หากแอปของคุณอยู่ในพื้นหลัง การแจ้งเตือนควรปรากฏในเบราว์เซอร์ของคุณ ดังในตัวอย่างนี้:

de79e8638a45864c.png

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

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

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

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

ขณะนี้ คุณควรเห็นกฎเริ่มต้นซึ่งไม่จำกัดการเข้าถึงพื้นที่เก็บข้อมูล ซึ่งหมายความว่าผู้ใช้ทุกคนสามารถอ่านและเขียนลงในคอลเลกชันใดๆ ใน Datastore ของคุณได้

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;
    }
  }
}

กฎความปลอดภัยควรอัปเดตเป็นชุด Emulator ของคุณโดยอัตโนมัติ

ดูกฎความปลอดภัยของ 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

สิ่งนี้สามารถนำไปใช้ได้โดยใช้กฎต่อไปนี้:

ที่เก็บข้อมูลกฎ

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;
    }
  }
}

14. ปรับใช้แอปของคุณโดยใช้ Firebase Hosting

Firebase นำเสนอ บริการโฮสติ้ง เพื่อรองรับเนื้อหาและเว็บแอปของคุณ คุณสามารถปรับใช้ไฟล์ของคุณกับ Firebase Hosting ได้โดยใช้ Firebase CLI ก่อนที่จะปรับใช้ คุณต้องระบุในไฟล์ firebase.json ว่าควรปรับใช้ไฟล์ในเครื่องใด สำหรับ Codelab นี้ คุณได้ดำเนินการนี้ให้กับคุณแล้ว เนื่องจากขั้นตอนนี้จำเป็นสำหรับการให้บริการไฟล์ของเราในระหว่าง Codelab นี้ การตั้งค่าโฮสติ้งระบุไว้ภายใต้แอตทริบิวต์ hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

การตั้งค่าเหล่านี้จะบอก CLI ว่าคุณต้องการปรับใช้ไฟล์ทั้งหมดในไดเร็กทอรี ./public ( "public": "./public" )

  1. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณเข้าถึงไดเร็กทอรี angularfire-start ในเครื่องของแอป
  2. ปรับใช้ไฟล์ของคุณกับโปรเจ็กต์ Firebase ของคุณโดยรันคำสั่งต่อไปนี้:
ng deploy

จากนั้นเลือกตัวเลือก Firebase และปฏิบัติตามคำแนะนำในบรรทัดคำสั่ง

  1. คอนโซลควรแสดงสิ่งต่อไปนี้:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. เยี่ยมชมแอปพลิเคชันเว็บของคุณที่ขณะนี้โฮสต์โดยสมบูรณ์บน CDN ทั่วโลกโดยใช้โฮสติ้งของ Firebase ที่โดเมนย่อย Firebase สองโดเมนของคุณเอง:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

หรือคุณสามารถเรียกใช้ firebase open hosting:site ในบรรทัดคำสั่งได้

ไปที่เอกสารเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ วิธีการทำงานของโฮสติ้งของ Firebase

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

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

คุณได้ใช้ Firebase เพื่อสร้างเว็บแอปพลิเคชันแชทแบบเรียลไทม์!

สิ่งที่คุณได้กล่าวถึง

  • การรับรองความถูกต้องของ Firebase
  • คลาวด์ไฟร์สโตร์
  • Firebase SDK สำหรับที่เก็บข้อมูลบนคลาวด์
  • การส่งข้อความบนคลาวด์ของ Firebase
  • การตรวจสอบประสิทธิภาพ Firebase
  • โฮสติ้งไฟร์เบส

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

เรียนรู้เพิ่มเติม

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

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

ขั้นแรก คุณจะต้องเปิดใช้งาน App Check และ reCaptcha

เปิดใช้งาน reCaptcha Enterprise

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

กำลังเปิดใช้งานการตรวจสอบแอป

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