Lớp học lập trình web AngularFire

1. Tổng quan

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng AngularFire để tạo các ứng dụng web bằng cách triển khai ứng dụng trò chuyện thông qua các sản phẩm và dịch vụ của Firebase.

Ứng dụng nhắn tin trong đó người dùng đang thảo luận về Firebase

Kiến thức bạn sẽ học được

  • Tạo ứng dụng web bằng Angular và Firebase.
  • Đồng bộ hoá dữ liệu bằng Cloud Firestore và Cloud Storage cho Firebase.
  • Xác thực người dùng bằng tính năng Xác thực Firebase.
  • Triển khai ứng dụng web của bạn trên tính năng Lưu trữ ứng dụng Firebase.
  • Gửi thông báo bằng Giải pháp gửi thông báo qua đám mây của Firebase.
  • Thu thập dữ liệu hiệu suất của ứng dụng web.

Bạn cần có

  • Tài khoản GitHub
  • Khả năng nâng cấp dự án Firebase của bạn lên Gói giá linh hoạt
  • IDE/trình soạn thảo văn bản mà bạn chọn, chẳng hạn như WebStorm, Sublime hoặc VS Code
  • Trình quản lý gói npm, thường đi kèm với Node.js
  • Một thiết bị đầu cuối/bảng điều khiển
  • Một trình duyệt mà bạn chọn, chẳng hạn như Chrome
  • Mã mẫu của lớp học lập trình (Xem bước tiếp theo của lớp học lập trình để biết cách lấy mã.)

2. Nhận mã mẫu

Tạo kho lưu trữ GitHub

Bạn có thể tìm thấy nguồn của lớp học lập trình tại https://github.com/firebase/codelab-friendlychat-web. Kho lưu trữ chứa các dự án mẫu cho nhiều nền tảng. Tuy nhiên, lớp học lập trình này chỉ sử dụng thư mục angularfire-start.

Sao chép thư mục angularfire-start vào kho lưu trữ của riêng bạn:

  1. Sử dụng một thiết bị đầu cuối, hãy tạo một thư mục mới trên máy tính và chuyển sang thư mục mới:
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. Sử dụng gói npm giget để chỉ tìm nạp thư mục angularfire-start:
    npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
  3. Theo dõi các thay đổi cục bộ bằng git:
    git init

git add .

git commit -m "codelab starting point"

git branch -M main
  4. Tạo kho lưu trữ GitHub mới: https://github.com/new. Bạn có thể đặt tên bất kỳ cho lớp này.
    1. GitHub sẽ cung cấp cho bạn một URL kho lưu trữ mới có dạng https://github.com/[user-name]/[repository-name].git hoặc git@github.com:[user-name]/[repository-name].git. Sao chép URL này.
  5. Đẩy các thay đổi cục bộ vào kho lưu trữ GitHub mới của bạn. Chạy lệnh sau, thay thế URL kho lưu trữ của bạn cho phần giữ chỗ your-repository-url.
    git remote add origin your-repository-url

git push -u origin main
  6. Bây giờ, bạn sẽ thấy mã khởi đầu trong kho lưu trữ GitHub.

3. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

  1. Đăng nhập vào bảng điều khiển của Firebase.
  2. Trong bảng điều khiển của Firebase, hãy nhấp vào Thêm dự án, sau đó đặt tên cho dự án Firebase của bạn là friendlyChat. Ghi nhớ mã dự án cho dự án Firebase của bạn.
  3. Bỏ đánh dấu Bật Google Analytics cho dự án này
  4. Nhấp vào Create Project (Tạo dự án).

Ứng dụng mà bạn sắp tạo sử dụng các sản phẩm Firebase có sẵn cho ứng dụng web:

  • Xác thực Firebase để dễ dàng cho phép người dùng đăng nhập vào ứng dụng.
  • Cloud Firestore để lưu dữ liệu có cấu trúc lên đám mây và nhận thông báo tức thì khi dữ liệu thay đổi.
  • Cloud Storage cho Firebase để lưu tệp trên đám mây.
  • Lưu trữ ứng dụng Firebase để tạo, lưu trữ và phân phát ứng dụng.
  • Nhắn tin qua đám mây của Firebase để gửi thông báo đẩy và hiển thị thông báo bật lên trong trình duyệt.
  • Giám sát hiệu suất Firebase để thu thập dữ liệu hiệu suất của người dùng cho ứng dụng của bạn.

Một số sản phẩm trong số này cần cấu hình đặc biệt hoặc cần được bật bằng cách sử dụng bảng điều khiển của Firebase.

Nâng cấp gói giá Firebase của bạn

Để sử dụng tính năng Lưu trữ ứng dụng Firebase và Cloud Storage cho Firebase, dự án Firebase của bạn cần phải sử dụng gói trả tiền theo mức dùng (Blaze), có nghĩa là dự án được liên kết với Tài khoản thanh toán trên đám mây.

  • Tài khoản Cloud Billing cần có một phương thức thanh toán, chẳng hạn như thẻ tín dụng.
  • Nếu bạn mới sử dụng Firebase và Google Cloud, hãy kiểm tra xem bạn có đủ điều kiện nhận khoản tín dụng 300 USD và tài khoản thanh toán Cloud dùng thử miễn phí hay không.
  • Nếu bạn tham gia lớp học lập trình này trong một sự kiện, hãy hỏi người tổ chức xem có tín dụng Cloud nào không.

Để nâng cấp dự án lên gói Blaze, hãy làm theo các bước sau:

  1. Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói của bạn.
  2. Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết tài khoản thanh toán Cloud với dự án của bạn.
    Nếu cần tạo một tài khoản thanh toán Cloud trong quá trình nâng cấp này, bạn có thể phải quay lại quy trình nâng cấp trong bảng điều khiển của Firebase để hoàn tất quá trình nâng cấp.

Thêm ứng dụng web Firebase vào dự án

  1. Nhấp vào biểu tượng web 58d6543a156e56f9.png để tạo ứng dụng web Firebase mới.
  2. Đăng ký ứng dụng bằng biệt hiệu Thân thiện với Chat. Đừng đánh dấu vào hộp bên cạnh Cũng thiết lập dịch vụ Lưu trữ Firebase cho ứng dụng này. Nhấp vào Đăng ký ứng dụng.
  3. Ở bước tiếp theo, bạn sẽ thấy một đối tượng cấu hình. Bạn không cần sử dụng ngay bây giờ. Nhấp vào Tiếp tục đến bảng điều khiển.

Đăng ký ảnh chụp màn hình ứng dụng web

Thiết lập tính năng Xác thực

Để cho phép người dùng đăng nhập vào ứng dụng web bằng Tài khoản Google, bạn sẽ sử dụng phương thức đăng nhập Google.

  1. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Xác thực.
  2. Nhấp vào Bắt đầu.
  3. Trong cột Nhà cung cấp khác, hãy nhấp vào Google > Bật.
  4. Trong hộp văn bản Tên công khai cho dự án, hãy nhập một tên dễ nhớ, chẳng hạn như My Next.js app.
  5. Trong trình đơn thả xuống Email hỗ trợ cho dự án, hãy chọn địa chỉ email của bạn.
  6. Nhấp vào Lưu.

Thiết lập Cloud Firestore

Ứng dụng web sử dụng Cloud Firestore để lưu tin nhắn trò chuyện và nhận tin nhắn trò chuyện mới.

Dưới đây là cách thiết lập Cloud Firestore trong dự án Firebase:

  1. Trong bảng điều khiển bên trái của bảng điều khiển của Firebase, hãy mở rộng mục Build (Tạo) rồi chọn Firestore cơ sở dữ liệu.
  2. Nhấp vào Tạo cơ sở dữ liệu.
  3. Hãy đặt Mã nhận dạng cơ sở dữ liệu thành (default).
  4. Chọn vị trí cho cơ sở dữ liệu của bạn, sau đó nhấp vào Tiếp theo.
    Đối với ứng dụng thực tế, bạn muốn chọn vị trí gần người dùng của mình.
  5. Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
    Trong phần sau của lớp học lập trình này, bạn sẽ thêm các Quy tắc bảo mật để bảo mật dữ liệu của mình. Không phân phối hoặc tiết lộ ứng dụng công khai khi chưa thêm Quy tắc bảo mật cho cơ sở dữ liệu của bạn.
  6. Nhấp vào Tạo.

Thiết lập Cloud Storage cho Firebase

Ứng dụng web sử dụng Cloud Storage cho Firebase để lưu trữ, tải lên và chia sẻ ảnh.

Dưới đây là cách thiết lập Cloud Storage cho Firebase trong dự án Firebase của bạn:

  1. Trong bảng điều khiển bên trái của Firebase, hãy mở rộng mục Bản dựng rồi chọn Bộ nhớ.
  2. Nhấp vào Bắt đầu.
  3. Chọn vị trí cho bộ chứa Storage mặc định của bạn.
    Các bộ chứa trong US-WEST1, US-CENTRAL1 và US-EAST1 có thể tận dụng cấp "Luôn miễn phí" cho Google Cloud Storage. Các bộ chứa ở tất cả những vị trí khác đều tuân theo giá và mức sử dụng Google Cloud Storage.
  4. Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
    Trong phần sau của lớp học lập trình này, bạn sẽ thêm các quy tắc bảo mật để bảo mật dữ liệu của mình. Đừng phân phối hoặc hiển thị công khai ứng dụng mà không thêm Quy tắc bảo mật cho bộ nhớ.
  5. Nhấp vào Tạo.

4. Cài đặt giao diện dòng lệnh Firebase

Giao diện dòng lệnh (CLI) Firebase cho phép bạn sử dụng tính năng Lưu trữ Firebase để phân phát ứng dụng web cục bộ, cũng như triển khai ứng dụng web cho dự án Firebase của bạn.

  1. Cài đặt CLI bằng cách chạy lệnh npm sau:
npm -g install firebase-tools@latest
  1. Xác minh rằng CLI đã được cài đặt đúng cách bằng cách chạy lệnh sau:
firebase --version

Đảm bảo phiên bản Giao diện dòng lệnh Firebase là vv13.9.0 trở lên.

  1. Uỷ quyền cho Firebase CLI bằng cách chạy lệnh sau:
firebase login

Bạn đã thiết lập mẫu ứng dụng web để kéo cấu hình của ứng dụng cho tính năng Lưu trữ Firebase từ thư mục cục bộ của ứng dụng (kho lưu trữ mà bạn đã sao chép trước đó trong lớp học lập trình). Tuy nhiên, để lấy cấu hình, bạn cần liên kết ứng dụng với dự án Firebase.

  1. Đảm bảo dòng lệnh của bạn đang truy cập vào thư mục angularfire-start cục bộ của ứng dụng.
  2. Liên kết ứng dụng của bạn với dự án Firebase bằng cách chạy lệnh sau:
firebase use --add
  1. Khi được nhắc, hãy chọn Mã dự án, sau đó đặt bí danh cho dự án Firebase.

Bí danh sẽ hữu ích nếu bạn có nhiều môi trường (môi trường phát hành công khai, môi trường thử nghiệm, v.v.). Tuy nhiên, đối với lớp học lập trình này, hãy sử dụng bí danh của default.

  1. Làm theo các hướng dẫn còn lại trên dòng lệnh.

5. Cài đặt AngularFire

Trước khi chạy dự án, hãy đảm bảo bạn đã thiết lập Angular CLI và AngularFire.

  1. Trong bảng điều khiển, hãy chạy lệnh sau:
npm install -g @angular/cli
  1. Sau đó, trong bảng điều khiển của thư mục angularfire-start, hãy chạy lệnh Angular CLI sau:
ng add @angular/fire

Thao tác này sẽ cài đặt mọi phần phụ thuộc cần thiết cho dự án của bạn.

  1. Khi được nhắc, hãy bỏ chọn ng deploy -- hosting bằng phím cách. Chọn các tính năng sau bằng phím mũi tên và phím cách:
    • Authentication
    • Firestore
    • Cloud Messaging
    • Cloud Storage
  2. Nhấn enter rồi làm theo các lời nhắc còn lại.
  3. Tạo một cam kết với thông báo xác nhận "Install AngularFire" và đẩy nó vào kho lưu trữ GitHub.

6. Tạo phần phụ trợ của dịch vụ Lưu trữ ứng dụng

Trong phần này, bạn sẽ thiết lập phần phụ trợ của dịch vụ Lưu trữ ứng dụng để theo dõi một nhánh trên kho lưu trữ git.

Ở cuối phần này, bạn sẽ có một phần phụ trợ của tính năng Lưu trữ ứng dụng được kết nối với kho lưu trữ trong GitHub. Phần phụ trợ này sẽ tự động tạo lại và phát hành phiên bản mới của ứng dụng mỗi khi bạn đẩy một cam kết mới vào nhánh main.

  1. Chuyển đến trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase:

Trạng thái 0 của bảng điều khiển Lưu trữ ứng dụng, với nút 'Bắt đầu'

  1. Nhấp vào "Bắt đầu" để bắt đầu quy trình tạo phần phụ trợ. Định cấu hình phần phụ trợ như sau:
  2. Làm theo lời nhắc trong bước đầu tiên để kết nối kho lưu trữ GitHub mà bạn đã tạo trước đó.
  3. Thiết lập chế độ cài đặt triển khai:
    1. Giữ thư mục gốc là /
    2. Đặt nhánh trực tiếp thành main
    3. Bật tính năng tự động triển khai
  4. Đặt tên cho phần phụ trợ là friendlychat-codelab.
  5. Trong mục "Tạo hoặc liên kết ứng dụng web Firebase", hãy chọn ứng dụng web mà bạn đã thiết lập trước đó trên trình đơn thả xuống "Chọn một ứng dụng web Firebase hiện có".
  6. Nhấp vào "Hoàn tất và triển khai". Sau giây lát, bạn sẽ được đưa đến trang mới để xem trạng thái của phần phụ trợ mới của tính năng Lưu trữ ứng dụng!
  7. Sau khi quá trình triển khai hoàn tất, hãy nhấp vào miền miễn phí của bạn trong mục "miền". Quá trình này có thể mất vài phút để bắt đầu hoạt động do quá trình truyền DNS.

Bạn đã triển khai ứng dụng web ban đầu! Mỗi lần đẩy một cam kết mới vào nhánh main của kho lưu trữ GitHub, bạn sẽ thấy một bản dựng mới và bắt đầu phát hành trong bảng điều khiển của Firebase, đồng thời trang web của bạn sẽ tự động cập nhật sau khi quá trình phát hành hoàn tất.

Trạng thái 0 của bảng điều khiển Lưu trữ ứng dụng, với nút 'Bắt đầu'

Bạn sẽ thấy màn hình đăng nhập của ứng dụng thân thiện với người dùng. Màn hình này (chưa) hoạt động.

Ứng dụng hiện chưa làm được gì, nhưng với sự trợ giúp của bạn, ứng dụng sẽ sớm làm được!

Bây giờ, hãy cùng xây dựng một ứng dụng trò chuyện theo thời gian thực.

7. Nhập và định cấu hình Firebase

Định cấu hình Firebase

Bạn cần định cấu hình SDK Firebase để cho SDK biết bạn đang sử dụng dự án Firebase nào.

  1. Chuyển đến phần Cài đặt dự án trong bảng điều khiển của Firebase
  2. Trong thẻ "Ứng dụng của bạn", hãy chọn biệt hiệu của ứng dụng mà bạn cần đối tượng cấu hình.
  3. Chọn "Cấu hình" trong ngăn đoạn mã Firebase SDK.

Bạn sẽ thấy rằng một tệp môi trường /angularfire-start/src/environments/environment.ts đã được tạo cho bạn.

  1. Sao chép đoạn mã đối tượng cấu hình, sau đó thêm đoạn mã đó vào 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",
  },
};

Xem phần thiết lập AngularFire

Bạn sẽ thấy các tính năng mà bạn đã chọn trong bảng điều khiển được tự động thêm vào tệp /angularfire-start/src/app/app.config.ts. Điều này cho phép ứng dụng của bạn sử dụng các tính năng và chức năng của Firebase.

8. Thiết lập quy trình đăng nhập cho người dùng

Giờ đây, bạn có thể sử dụng AngularFire vì thư viện này đã được nhập và khởi chạy trong app.config.ts. Bây giờ, bạn sẽ triển khai quy trình đăng nhập của người dùng bằng tính năng Xác thực Firebase.

Thêm miền được uỷ quyền

Tính năng Xác thực Firebase chỉ cho phép đăng nhập từ một danh sách miền mà bạn kiểm soát. Thêm miền Lưu trữ ứng dụng miễn phí của bạn vào danh sách miền:

  1. Chuyển đến phần Lưu trữ ứng dụng.
  2. Sao chép miền của phần phụ trợ.
  3. Chuyển đến phần Cài đặt xác thực.
  4. Chọn thẻ Miền được uỷ quyền.
  5. Nhấp vào Thêm miền rồi dán miền của phần phụ trợ Lưu trữ ứng dụng.

Xác thực người dùng bằng tính năng Đăng nhập bằng Google

Trong ứng dụng, khi người dùng nhấp vào nút Đăng nhập bằng Google, hàm login sẽ được kích hoạt. Trong lớp học lập trình này, bạn muốn uỷ quyền cho Firebase sử dụng Google làm nhà cung cấp danh tính. Bạn sẽ sử dụng một cửa sổ bật lên, nhưng bạn có thể sử dụng một số phương pháp khác trong Firebase.

  1. Trong thư mục con /src/app/services/, hãy mở chat.service.ts.
  2. Tìm hàm login.
  3. Thay thế toàn bộ hàm bằng mã sau.

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

Hàm logout được kích hoạt khi người dùng nhấp vào nút Đăng xuất.

  1. Quay lại tệp src/app/services/chat.service.ts.
  2. Tìm hàm logout.
  3. Thay thế toàn bộ hàm bằng mã sau.

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

Theo dõi trạng thái xác thực

Để cập nhật giao diện người dùng cho phù hợp, bạn cần có cách kiểm tra xem người dùng đã đăng nhập hay chưa. AngularFire cung cấp một hàm để lấy một đối tượng có thể quan sát cập nhật mỗi khi trạng thái xác thực thay đổi. Phương pháp này đã được triển khai nhưng vẫn đáng để xem xét.

  1. Quay lại tệp src/app/services/chat.service.ts.
  2. Tìm biến chỉ định user$.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

Mã trên gọi hàm AngularFire user để trả về một người dùng có thể quan sát. Lệnh này sẽ kích hoạt mỗi khi trạng thái xác thực thay đổi (khi người dùng đăng nhập hoặc đăng xuất). Các thành phần mẫu Angular trong FriendlyChat sử dụng đối tượng có thể quan sát này để cập nhật giao diện người dùng nhằm chuyển hướng, hiển thị người dùng trong thanh điều hướng tiêu đề, v.v.

Kiểm thử việc đăng nhập vào ứng dụng

  1. Tạo một thay đổi có thông báo thay đổi "Thêm tính năng Xác thực bằng Google" rồi đẩy thay đổi đó vào kho lưu trữ GitHub.
  2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase và đợi quá trình triển khai mới hoàn tất.
  3. Trong ứng dụng web, hãy làm mới trang rồi đăng nhập vào ứng dụng bằng nút đăng nhập và Tài khoản Google của bạn. Nếu bạn thấy thông báo lỗi auth/operation-not-allowed, hãy kiểm tra để đảm bảo rằng bạn đã bật tính năng Đăng nhập bằng Google làm nhà cung cấp xác thực trong bảng điều khiển Firebase.
  4. Sau khi đăng nhập, ảnh hồ sơ và tên người dùng của bạn sẽ xuất hiện: angularfire-3.png

9. Viết thư vào Cloud Firestore

Trong phần này, bạn sẽ ghi một số dữ liệu vào Cloud Firestore để có thể điền sẵn dữ liệu vào giao diện người dùng của ứng dụng. Bạn có thể thực hiện việc này theo cách thủ công bằng bảng điều khiển Firebase, nhưng bạn sẽ thực hiện việc này trong chính ứng dụng để minh hoạ một hoạt động ghi cơ bản trên Cloud Firestore.

Mô hình dữ liệu

Dữ liệu trên Cloud Firestore được chia thành các bộ sưu tập, tài liệu, trường và bộ sưu tập con. Bạn sẽ lưu trữ từng tin nhắn của cuộc trò chuyện dưới dạng tài liệu trong một tập hợp cấp cao nhất có tên là messages.

688d7bc5fb662b57.png

Thêm thông báo vào Cloud Firestore

Để lưu trữ tin nhắn trò chuyện do người dùng viết, bạn sẽ sử dụng Cloud Firestore.

Trong phần này, bạn sẽ thêm chức năng để người dùng ghi tin nhắn mới vào cơ sở dữ liệu. Khi người dùng nhấp vào nút GỬI, hệ thống sẽ kích hoạt đoạn mã bên dưới. Phương thức này thêm một đối tượng tin nhắn có nội dung của các trường tin nhắn vào thực thể Cloud Firestore trong bộ sưu tập messages. Phương thức add() thêm một tài liệu mới có mã nhận dạng được tạo tự động vào bộ sưu tập.

  1. Quay lại tệp src/app/services/chat.service.ts.
  2. Tìm hàm addMessage.
  3. Thay thế toàn bộ hàm bằng mã sau.

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

Kiểm thử việc gửi thông báo

  1. Tạo một thay đổi có thông báo thay đổi "Post new chats to Firestore" (Đăng tin nhắn mới lên Firestore) rồi đẩy thay đổi đó vào kho lưu trữ GitHub của bạn.
  2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển Firebase và đợi quá trình triển khai mới hoàn tất.
  3. Làm mới FriendlyChat. Sau khi đăng nhập, hãy nhập một tin nhắn như "Chào bạn!" rồi nhấp vào GỬI. Thao tác này sẽ ghi thông báo vào Cloud Firestore. Tuy nhiên, bạn sẽ chưa thấy dữ liệu trong ứng dụng web thực tế của mình vì bạn vẫn cần triển khai việc truy xuất dữ liệu (phần tiếp theo của lớp học lập trình này).
  4. Bạn có thể thấy thông báo mới thêm trong Bảng điều khiển của Firebase. Mở giao diện người dùng của bộ Trình mô phỏng. Trong mục Build (Tạo), hãy nhấp vào Firestore Database (Cơ sở dữ liệu Firestore) (hoặc nhấp vào đây). Bạn sẽ thấy bộ sưu tập messages (tin nhắn) có tin nhắn mới thêm:

6812efe7da395692.png

10. Đọc tin nhắn

Đồng bộ hoá tin nhắn

Để đọc tin nhắn trong ứng dụng, bạn cần thêm một đối tượng có thể ghi nhận được sẽ kích hoạt khi dữ liệu thay đổi, sau đó tạo một thành phần trên giao diện người dùng để hiển thị các thông báo mới.

Bạn sẽ thêm mã theo dõi các tin nhắn mới thêm từ ứng dụng. Trong mã này, bạn sẽ truy xuất ảnh chụp nhanh của tập hợp messages. Bạn sẽ chỉ hiển thị 12 tin nhắn gần nhất của cuộc trò chuyện để tránh hiển thị một nhật ký quá dài khi tải.

  1. Quay lại tệp src/app/services/chat.service.ts.
  2. Tìm hàm loadMessages.
  3. Thay thế toàn bộ hàm bằng mã sau.

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

Để nghe thông báo trong cơ sở dữ liệu, bạn tạo một truy vấn trên một tập hợp bằng cách sử dụng hàm collection để chỉ định tập hợp chứa dữ liệu mà bạn muốn nghe. Trong mã trên, bạn đang nghe các thay đổi trong bộ sưu tập messages, đây là nơi lưu trữ tin nhắn trò chuyện. Bạn cũng đang áp dụng giới hạn bằng cách chỉ nghe 12 tin nhắn gần đây nhất bằng limit(12) và sắp xếp tin nhắn theo ngày bằng orderBy('timestamp', 'desc') để nhận 12 tin nhắn mới nhất.

Hàm collectionData sử dụng ảnh chụp nhanh. Hàm callback sẽ được kích hoạt khi có bất kỳ thay đổi nào trong tài liệu phù hợp với truy vấn. Điều này có thể là khi một thư bị xoá, sửa đổi hoặc thêm. Bạn có thể đọc thêm về nội dung này trong tài liệu về Cloud Firestore.

Kiểm tra việc đồng bộ hoá thư

  1. Tạo một lệnh xác nhận có thông báo cam kết "Show new pha in the UI" (Hiện cuộc trò chuyện mới trong giao diện người dùng) và đẩy giao diện này vào kho lưu trữ GitHub của bạn.
  2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển Firebase và đợi quá trình triển khai mới hoàn tất.
  3. Làm mới FriendlyChat. Những tin nhắn mà bạn đã tạo trước đó trong cơ sở dữ liệu sẽ xuất hiện trong giao diện người dùng friendlyChat (xem bên dưới). Bạn có thể viết tin nhắn mới; tin nhắn sẽ xuất hiện ngay lập tức.
  4. (Không bắt buộc) Bạn có thể thử xoá, sửa đổi hoặc thêm tin nhắn mới theo cách thủ công ngay trong phần Firestore của bộ Trình mô phỏng; mọi thay đổi sẽ được phản ánh trong giao diện người dùng.

Xin chúc mừng! Bạn đang đọc tài liệu trên Cloud Firestore trong ứng dụng của mình!

angularfire-2.png

11. Thêm các tính năng AI

Bạn sẽ dùng AI của Google để thêm các tính năng hỗ trợ hữu ích vào ứng dụng nhắn tin.

Lấy khoá API Google AI

  1. Chuyển đến Google AI Studio rồi nhấp vào Tạo khoá API
  2. Chọn dự án Firebase mà bạn đã tạo cho lớp học lập trình này. Lời nhắc dành cho một dự án Google Cloud, nhưng mỗi dự án Firebase là một dự án Google Cloud.
  3. Nhấp vào Tạo khoá API trong dự án hiện có
  4. Sao chép khoá API thu được

Cài đặt tiện ích

Tiện ích này sẽ triển khai một hàm trên đám mây được kích hoạt mỗi khi một tài liệu mới được thêm vào bộ sưu tập messages trong Firestore. Hàm này sẽ gọi Gemini và ghi nội dung phản hồi của Gemini vào trường response trong tài liệu.

  1. Nhấp vào Cài đặt trong bảng điều khiển Firebase trên trang tiện ích Tạo chatbot bằng Gemini API.
  2. Làm theo lời nhắc. Sau khi đến bước Định cấu hình tiện ích, hãy đặt các giá trị thông số sau:
    • Nhà cung cấp Gemini API: Google AI
    • Khoá API AI của Google: Dán khoá mà bạn đã tạo trước đó rồi nhấp vào Tạo khoá bí mật.
    • Đường dẫn bộ sưu tập Firestore: messages
    • Trường lời nhắc: text
    • Trường phản hồi: response
    • Trường thứ tự: timestamp
    • Bối cảnh: Keep your answers short, informal, and helpful. Use emojis when possible.
  3. Nhấp vào cài đặt tiện ích
  4. Chờ tiện ích cài đặt xong

Thử nghiệm tính năng AI

YouChat đã có mã để đọc câu trả lời từ tiện ích AI. Bạn chỉ cần gửi một tin nhắn trò chuyện mới là có thể dùng thử!

  1. Mở FriendlyChat và gửi tin nhắn.
  2. Sau giây lát, bạn sẽ thấy câu trả lời bật lên cùng với tin nhắn của mình. Nội dung này có một ghi chú ✨ ai generated ở cuối để nêu rõ rằng nội dung này được tạo bằng AI tạo sinh, chứ không phải người dùng thực.

12. Gửi hình ảnh

Bây giờ, bạn sẽ thêm một tính năng chia sẻ hình ảnh.

Mặc dù Cloud Firestore phù hợp để lưu trữ dữ liệu có cấu trúc, nhưng Cloud Storage phù hợp hơn để lưu trữ tệp. Bộ nhớ trên đám mây cho Firebase là một dịch vụ lưu trữ tệp/vùng nhớ khối xếp. Bạn sẽ sử dụng dịch vụ này để lưu trữ mọi hình ảnh mà người dùng chia sẻ bằng ứng dụng của chúng tôi.

Lưu hình ảnh vào Cloud Storage

Đối với lớp học lập trình này, bạn đã thêm một nút kích hoạt hộp thoại bộ chọn tệp. Sau khi chọn một tệp, hàm saveImageMessage sẽ được gọi và bạn có thể tham chiếu đến tệp đã chọn. Hàm saveImageMessage hoàn thành những việc sau:

  1. Tạo một tin nhắn trò chuyện "phần giữ chỗ" trong nguồn cấp dữ liệu trò chuyện để người dùng thấy ảnh động "Đang tải" trong khi bạn tải hình ảnh lên.
  2. Tải tệp hình ảnh lên Cloud Storage theo đường dẫn sau: /<uid>/<file_name>
  3. Tạo một URL có thể đọc công khai cho tệp hình ảnh.
  4. Cập nhật URL của tệp hình ảnh mới tải lên trong tin nhắn trò chuyện thay vì hình ảnh tải tạm thời.

Giờ bạn sẽ thêm chức năng gửi hình ảnh:

  1. Quay lại tệp src/chat.service.ts.
  2. Tìm hàm saveImageMessage.
  3. Thay thế toàn bộ hàm bằng mã sau.

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

Kiểm thử tính năng gửi hình ảnh

  1. Tạo một thay đổi có thông báo thay đổi "Thêm tính năng đăng hình ảnh" và đẩy thay đổi đó vào kho lưu trữ GitHub của bạn.
  2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase và đợi quá trình triển khai mới hoàn tất.
  3. Làm mới friendlyChat. Sau khi đăng nhập, hãy nhấp vào nút tải hình ảnh lên ở dưới cùng bên trái angularfire-4.png rồi chọn một tệp hình ảnh bằng bộ chọn tệp. Nếu bạn đang tìm kiếm hình ảnh, hãy sử dụng hình ảnh đẹp về một tách cà phê này.
  4. Một thông báo mới sẽ xuất hiện trong giao diện người dùng của ứng dụng cùng với hình ảnh bạn chọn: angularfire-2.pngs

Nếu thử thêm hình ảnh khi chưa đăng nhập, bạn sẽ thấy lỗi cho biết rằng bạn phải đăng nhập để thêm hình ảnh.

13. Show notifications (Hiện thông báo)

Bây giờ, bạn sẽ thêm tính năng hỗ trợ cho thông báo của trình duyệt. Ứng dụng sẽ thông báo cho người dùng khi có tin nhắn mới được đăng trong cuộc trò chuyện. Giải pháp gửi thông báo qua đám mây của Firebase (FCM) là một giải pháp nhắn tin đa nền tảng giúp bạn phân phối tin nhắn và thông báo một cách đáng tin cậy mà không tốn phí.

Thêm trình chạy dịch vụ FCM

Ứng dụng web cần có một trình chạy dịch vụ để nhận và hiển thị thông báo web.

Nhà cung cấp dịch vụ nhắn tin phải được thiết lập khi thêm AngularFire, hãy đảm bảo rằng mã sau đây tồn tại trong phần nhập của /angularfire-start/src/app/app.config.ts

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

app/app.config.ts

Trình chạy dịch vụ chỉ cần tải và khởi chạy SDK Giải pháp gửi thông báo qua đám mây của Firebase. SDK này sẽ đảm nhận việc hiển thị thông báo.

Nhận mã thông báo thiết bị FCM

Khi bật thông báo trên một thiết bị hoặc trình duyệt, bạn sẽ nhận được một mã thông báo thiết bị. Mã thông báo thiết bị này là mã bạn dùng để gửi thông báo đến một thiết bị hoặc trình duyệt cụ thể.

Khi người dùng đăng nhập, bạn sẽ gọi hàm saveMessagingDeviceToken. Đó là nơi bạn sẽ lấy mã thông báo thiết bị FCM từ trình duyệt và lưu vào Cloud Firestore.

chat.service.ts

  1. Tìm hàm saveMessagingDeviceToken.
  2. Thay thế toàn bộ hàm bằng mã sau.

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

Tuy nhiên, mã này sẽ không hoạt động ban đầu. Để ứng dụng của bạn có thể truy xuất mã thông báo thiết bị, người dùng cần cấp cho ứng dụng quyền hiển thị thông báo (bước tiếp theo của lớp học lập trình).

Yêu cầu quyền hiển thị thông báo

Khi người dùng chưa cấp cho ứng dụng của bạn quyền hiển thị thông báo, bạn sẽ không được cấp mã thông báo của thiết bị. Trong trường hợp này, bạn gọi phương thức requestPermission(). Phương thức này sẽ hiển thị hộp thoại trình duyệt yêu cầu cấp quyền này ( trong các trình duyệt được hỗ trợ).

8b9d0c66dc36153d.png

  1. Quay lại tệp src/app/services/chat.service.ts.
  2. Tìm hàm requestNotificationsPermissions.
  3. Thay thế toàn bộ hàm bằng mã sau.

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

Nhận mã thông báo của thiết bị

  1. Tạo một thay đổi có thông báo thay đổi "Thêm khả năng đăng hình ảnh" và đẩy thay đổi đó vào kho lưu trữ GitHub của bạn.
  2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase và đợi quá trình triển khai mới hoàn tất.
  3. Làm mới BestChat. Sau khi đăng nhập, hộp thoại cấp quyền thông báo sẽ xuất hiện: bd3454e6dbfb6723.pngs
  4. Nhấp vào Cho phép.
  5. Mở bảng điều khiển JavaScript trên trình duyệt của bạn. Bạn sẽ thấy thông báo sau: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  6. Sao chép mã thông báo thiết bị. Bạn sẽ cần khoá học này cho giai đoạn tiếp theo của lớp học lập trình này.

Gửi thông báo đến thiết bị của bạn

Giờ đây, khi đã có mã thông báo thiết bị, bạn có thể gửi thông báo.

  1. Mở thẻ Cloud Messaging (Thông báo qua đám mây) của bảng điều khiển Firebase.
  2. Nhấp vào &quot;Thông báo mới&quot;
  3. Nhập tiêu đề và văn bản thông báo.
  4. Ở bên phải màn hình, hãy nhấp vào "gửi tin nhắn thử nghiệm"
  5. Nhập mã thông báo thiết bị mà bạn đã sao chép từ bảng điều khiển JavaScript của trình duyệt, sau đó nhấp vào dấu cộng ("+")
  6. Nhấp vào "kiểm tra"

Nếu ứng dụng của bạn đang chạy ở nền trước, bạn sẽ thấy thông báo trong bảng điều khiển JavaScript.

Nếu ứng dụng của bạn đang chạy ở chế độ nền, thì một thông báo sẽ xuất hiện trong trình duyệt, như trong ví dụ sau:

de79e8638a45864c.png.

14. Quy tắc bảo mật của Cloud Firestore

Xem quy tắc bảo mật cơ sở dữ liệu

Cloud Firestore sử dụng một ngôn ngữ quy tắc cụ thể để xác định quyền truy cập, tính bảo mật và quy trình xác thực dữ liệu.

Khi thiết lập dự án Firebase ở đầu lớp học lập trình này, bạn đã chọn sử dụng các quy tắc bảo mật mặc định ở "Chế độ thử nghiệm" để không hạn chế quyền truy cập vào kho dữ liệu. Trong bảng điều khiển của Firebase, trên thẻ Quy tắc của mục Cơ sở dữ liệu, bạn có thể xem và sửa đổi các quy tắc này.

Hiện tại, bạn sẽ thấy các quy tắc mặc định không hạn chế quyền truy cập vào kho dữ liệu. Điều này có nghĩa là mọi người dùng đều có thể đọc và ghi vào bất kỳ bộ sưu tập nào trong kho dữ liệu của bạn.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Bạn sẽ cập nhật các quy tắc để hạn chế nội dung bằng cách sử dụng các quy tắc sau:

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

Các quy tắc bảo mật sẽ tự động cập nhật cho bộ Trình mô phỏng.

Xem các quy tắc bảo mật của Cloud Storage

Cloud Storage cho Firebase sử dụng ngôn ngữ quy tắc cụ thể để xác định quyền truy cập, tính bảo mật và xác thực dữ liệu.

Khi thiết lập dự án Firebase ở đầu lớp học lập trình này, bạn đã chọn sử dụng quy tắc bảo mật mặc định của Cloud Storage chỉ cho phép người dùng đã xác thực sử dụng Cloud Storage. Trong Bảng điều khiển Firebase, trên thẻ Quy tắc của mục Bộ nhớ, bạn có thể xem và sửa đổi các quy tắc. Bạn sẽ thấy quy tắc mặc định cho phép mọi người dùng đã đăng nhập đọc và ghi mọi tệp trong bộ nhớ của bạn.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Bạn sẽ cập nhật các quy tắc để thực hiện những việc sau:

  • Chỉ cho phép mỗi người dùng ghi vào các thư mục cụ thể của riêng họ
  • Cho phép mọi người đọc từ Cloud Storage
  • Đảm bảo rằng tệp được tải lên là hình ảnh
  • Hạn chế kích thước hình ảnh có thể tải lên ở mức tối đa là 5 MB

Điều này có thể được triển khai bằng cách sử dụng các quy tắc sau:

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. Xin chúc mừng!

Bạn đã sử dụng Firebase để xây dựng ứng dụng web trò chuyện theo thời gian thực!

Nội dung bạn đã đề cập

  • Firebase App Hosting
  • Xác thực Firebase
  • Cloud Firestore
  • Firebase SDK cho Cloud Storage
  • Giải pháp gửi thông báo qua đám mây của Firebase
  • Giám sát hiệu suất Firebase

Các bước tiếp theo

Tìm hiểu thêm

16. [Không bắt buộc] Thực thi bằng tính năng Kiểm tra ứng dụng

Tính năng Kiểm tra ứng dụng của Firebase giúp bảo vệ các dịch vụ của bạn khỏi lưu lượng truy cập không mong muốn và bảo vệ phần phụ trợ của bạn khỏi hành vi sai trái. Ở bước này, bạn sẽ thêm tính năng xác thực thông tin xác thực và chặn các ứng dụng không được phép bằng tính năng Kiểm tra ứng dụng và reCAPTCHA Enterprise.

Trước tiên, bạn cần bật tính năng Kiểm tra ứng dụng và reCAPTCHA.

Bật reCAPTCHA Enterprise

  1. Trong Cloud Console, hãy tìm và chọn reCaptcha Enterprise trong phần Bảo mật.
  2. Bật dịch vụ theo lời nhắc rồi nhấp vào Tạo khoá.
  3. Nhập tên hiển thị theo lời nhắc rồi chọn Trang web làm loại nền tảng.
  4. Thêm các URL đã triển khai vào Danh sách miền và đảm bảo bạn bỏ chọn tuỳ chọn "Sử dụng thử thách đánh dấu vào hộp".
  5. Nhấp vào Tạo khoá rồi lưu trữ khoá đã tạo ở nơi an toàn. Bạn sẽ cần mã này sau trong bước này.

Bật tính năng Kiểm tra ứng dụng

  1. Trong bảng điều khiển Firebase, hãy tìm phần Bản dựng trong bảng điều khiển bên trái.
  2. Nhấp vào Kiểm tra ứng dụng, sau đó nhấp vào thẻ Phương thức đăng nhập để chuyển đến phần Kiểm tra ứng dụng.
  3. Nhấp vào Đăng ký rồi nhập khoá reCaptcha Enterprise khi được nhắc, sau đó nhấp vào Lưu.
  4. Trong Chế độ xem API, hãy chọn Bộ nhớ rồi nhấp vào Thực thi. Làm tương tự cho Cloud Firestore.

Giờ thì bạn có thể thực thi tính năng Kiểm tra ứng dụng! Làm mới ứng dụng rồi thử xem hoặc gửi tin nhắn trò chuyện. Bạn sẽ nhận được thông báo lỗi:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Điều này có nghĩa là tính năng Kiểm tra ứng dụng sẽ chặn các yêu cầu chưa được xác thực theo mặc định. Bây giờ, hãy thêm tính năng xác thực vào ứng dụng.

Chuyển đến tệp environment.ts và thêm reCAPTCHAEnterpriseKey vào đối tượng 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"
  },
};

Thay thế giá trị của key bằng mã thông báo reCaptcha Enterprise.

Sau đó, hãy chuyển đến tệp app.config.ts rồi thêm các lệnh nhập sau:

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

Cũng trong tệp app.config.ts đó, hãy thêm nội dung khai báo biến toàn cục sau:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

Trong quá trình nhập, hãy thêm quy trình khởi chạy tính năng Kiểm tra ứng dụng bằng ReCaptchaEnterpriseProvider và đặt isTokenAutoRefreshEnabled thành true để cho phép mã thông báo tự động làm mới.

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

Để cho phép kiểm thử cục bộ, hãy đặt self.FIREBASE_APPCHECK_DEBUG_TOKEN thành true. Khi bạn làm mới ứng dụng trong localhost, mã gỡ lỗi này sẽ được ghi lại trong bảng điều khiển tương tự như:

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.

Bây giờ, hãy chuyển đến Apps View (Chế độ xem ứng dụng) của tính năng Kiểm tra ứng dụng trong bảng điều khiển của Firebase.

Nhấp vào trình đơn mục bổ sung rồi chọn Quản lý mã thông báo gỡ lỗi.

Sau đó, nhấp vào Thêm mã gỡ lỗi rồi dán mã gỡ lỗi từ bảng điều khiển của bạn theo lời nhắc.

Chuyển đến tệp chat.service.ts rồi thêm lệnh nhập sau:

import { AppCheck } from '@angular/fire/app-check';

Trong cùng một tệp chat.service.ts, hãy chèn tính năng Kiểm tra ứng dụng cùng với các dịch vụ Firebase khác.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
  1. Tạo một thay đổi có thông báo thay đổi "Chặn ứng dụng trái phép bằng tính năng Kiểm tra ứng dụng" rồi đẩy thay đổi đó vào kho lưu trữ GitHub.
  2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển Firebase và đợi quá trình triển khai mới hoàn tất.

Xin chúc mừng! Lúc này, tính năng Kiểm tra ứng dụng sẽ hoạt động trong ứng dụng của bạn.