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.

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 chỉnh sửa 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
• 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 này (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 cửa sổ dòng lệnh, tạo một thư mục mới trên máy tính rồi thay đổi 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. Đặt tên bất kỳ tên nào bạn muốn.
   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 [e-mail]:[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 mục Bật Google Analytics cho dự án này
4. Nhấp vào Create Project (Tạo dự án).

Lưu ý quan trọng: Dự án Firebase của bạn sẽ có tên là friendlyChat, nhưng Firebase sẽ tự động chỉ định một Mã dự án duy nhất cho dự án đó ở dạng friendlychat-1234. Giá trị nhận dạng duy nhất này là cách dự án của bạn được xác định (kể cả trong CLI), trong khi ContactChat chỉ đơn giản là tên hiển thị.

Ứng dụng mà bạn sắp tạo sử dụng các sản phẩm của Firebase có sẵn cho các ứ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 của bạn.
• 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 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, dự án Firebase của bạn cần phải sử dụng Gói giá linh hoạt, tức là dự án được liên kết với một tài khoản thanh toán trên đám mây.

• Tài khoản thanh toán Cloud yêu cầu phải 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 trị giá 300 USD và tài khoản thanh toán miễn phí trên đám mây dành cho ưu đãi dùng thử miễn phí hay không.

Để nâng cấp dự án của bạn lên Gói linh hoạt, 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. Trong hộp thoại này, hãy chọn Gói linh hoạt, sau đó làm theo hướng dẫn trên màn hình để liên kết dự án của bạn với một tài khoản thanh toán Cloud.
   Nếu cần tạo một tài khoản thanh toán Cloud, 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.

Lưu ý: Bạn có thể hạ cấp dự án của mình xuống Spark sau khi hoàn thành lớp học lập trình này.

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

1. Nhấp vào biểu tượng web để 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. Không chọn hộp bên cạnh Cũng thiết lập tính năng 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.

Thiết lập chế độ 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 của họ, bạn sẽ sử dụng phương thức đăng nhập của 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 hiển thị 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.

Bật 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.

Bạn sẽ cần bật Cloud Firestore:

1. Trong bảng điều khiển của Firebase, hãy chuyển đến Firestore.
2. Nhấp vào Tạo cơ sở dữ liệu > Tiếp theo > Bắt đầu ở chế độ thử nghiệm > Tiếp theo.
   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.
3. Hãy dùng vị trí mặc định hoặc chọn vị trí mà bạn chọn.
   Đối với ứng dụng thực tế, bạn cần chọn vị trí gần người dùng. Xin lưu ý rằng bạn không thể thay đổi vị trí này sau này và vị trí này cũng sẽ tự động là vị trí của bộ chứa Cloud Storage mặc định của bạn (bước tiếp theo).
4. Nhấp vào Xong.

Bật Cloud Storage

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

Bạn sẽ cần bật Cloud Storage:

1. Trong bảng điều khiển của Firebase, hãy chuyển đến mục Bộ nhớ.
2. Nhấp vào Bắt đầu > Bắt đầu ở chế độ thử nghiệm > Tiếp theo.
   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 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 bộ chứa Storage.
3. Bạn phải chọn vị trí cho bộ chứa của mình (do đã thiết lập Firestore ở bước trước).
4. Nhấp vào Xong.

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.

Lưu ý: Để cài đặt CLI, bạn cần cài đặt npm, thường đi kèm với Node.js.

1. Cài đặt CLI bằng cách chạy lệnh npm sau:

npm -g install firebase-tools@latest

Không hoạt động? Bạn có thể cần phải thay đổi quyền npm.

2. 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 rằng phiên bản của Firebase CLI là phiên bản 13.9.0 trở lên.

3. Cho phép giao diện dòng lệnh (CLI) của Firebase 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 này, bạn cần liên kết ứng dụng của mình với dự án Firebase.

4. Đả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.
5. 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

6. Khi được nhắc, hãy chọn Mã dự án, sau đó đặt bí danh cho dự án Firebase của bạn.

Bí danh sẽ hữu ích nếu bạn có nhiều môi trường (sản xuất, 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.

7. 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

2. Sau đó, trong một bảng điều khiển từ 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.

3. 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
4. Nhấn enter rồi làm theo các lời nhắc còn lại.
5. Tạo một cam kết có thông báo xác nhận "Cài đặt AngularFire" và đẩy thông báo đó vào kho lưu trữ GitHub của bạn.

6. Tạo phần phụ trợ Lưu trữ ứng dụng

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

Lưu ý: Tính năng Lưu trữ ứng dụng Firebase đang ở chế độ bản xem trước công khai.

Ở 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:

2. 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:
3. 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 đó.
4. 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 chế độ phát hành tự động
5. Đặt tên cho phần phụ trợ là friendlychat-codelab.
6. 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 đã định cấu hình trước đó trên trình đơn thả xuống "Chọn một ứng dụng web Firebase hiện có".
7. 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!

   Lưu ý: Bạn có thể giám sát các dịch vụ cơ bản của Google Cloud trong phần phụ trợ Lưu trữ ứng dụng bằng cách truy cập các đường liên kết trên bảng điều khiển. Tìm hiểu thêm trong phần Xem nhật ký và chỉ số.

8. Sau khi quá trình phát hành hoàn tất, hãy nhấp vào miền miễn phí của bạn trong phần "miền". Quá trình này có thể mất vài phút thì mới bắt đầu hoạt động do quá trình truyền DNS.

Bạn đã triển khai ứng dụng web đầu tiên! 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.

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 này hiện không thể làm gì được, nhưng với sự trợ giúp của bạn, ứng dụng này sẽ sớm hoạt động!

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 sẽ cần định cấu hình Firebase SDK để cho biết dự án Firebase nào bạn đang sử dụng.

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.

4. Sao chép đoạn mã đối tượng cấu hình, rồi 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.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

Đoạn mã ở trên phải chứa đối tượng cấu hình Firebase dành riêng cho ứng dụng của bạn, chứ không phải giá trị phần giữ chỗ của chúng tôi!

Xem chế độ thiết lập AngularFire

Bạn sẽ thấy rằng 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

AngularFire hiện đã sẵn sàng để sử dụng vì đã đượ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 gồm các 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, chức năng login sẽ được kích hoạt. Đối với lớp học lập trình này, bạn muốn cho phép 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 đoạn 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 đoạn 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 đăng xuất. AngularFire cung cấp một hàm để nhận đối tượng có thể quan sát và 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. Thao tác 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ể ghi nhận được 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ử đăng nhập vào ứng dụng

1. Tạo một cam kết có thông báo xác thực "Thêm xác thực của Google" và đẩy thông báo đó 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à chờ 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 một thông báo lỗi cho biết 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 dịch vụ xác thực trong bảng điều khiển của Firebase.
4. Sau khi đăng nhập, ảnh hồ sơ và tên người dùng của bạn sẽ hiển thị:

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 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 của Firebase, nhưng bạn sẽ thực hiện trong chính ứng dụng để minh hoạ cách ghi cơ bản trong 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.

Mẹo: Để tìm hiểu thêm về mô hình dữ liệu của Cloud Firestore, hãy tham khảo các tài liệu và tập hợp trong tài liệu này.

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 cho phép người dùng viết thông báo 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. Thao tác này sẽ thêm một đối tượng thông báo có nội dung của các trường thông báo vào thực thể Cloud Firestore của bạn trong tập hợp messages. Phương thức add() sẽ 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 đoạn 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 gói cam kết có thông báo cam kết như "Đăng các cuộc trò chuyện mới lên Firestore" và đẩy nội dung đó 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à chờ 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 tin nhắn như "Xin chào!" 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 được 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 phần Build (Tạo), hãy nhấp vào Firestore Database (Cơ sở dữ liệu khôi phục) (hoặc nhấp vào đây và bạn sẽ thấy bộ sưu tập thông báo cùng với thông báo mới được thêm của mình:

10. Đọc tin nhắn

Đồng bộ hoá thư

Để đọ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 cuối cùng của cuộc trò chuyện để tránh hiển thị lịch sử 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 đoạn 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 nào 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 nâng cao. Hàm callback sẽ được kích hoạt khi có bất kỳ thay đổi nào đối với 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 conversations in the UI" (Hiển thị 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 của Firebase và chờ 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). Vui lòng 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 thông báo 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 phải đượ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!

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.

Nhận khoá API AI của Google

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 đá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 câu trả lời 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 của Firebase trên trang Tạo bot trò chuyện bằng tiện ích 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 thu thập trên Firestore: messages
   • Trường lời nhắc: text
   • Trường phản hồi: response
   • Trường đơn đặt hàng: 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 này hoàn tất quá trình cài đặt

Kiểm thử tính năng AI

friendlyChat đã 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ở FamilyChat 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. Có một ghi chú ✨ ai generated ở cuối để cho biết rõ việc ứng dụng này được tạo bằng AI tạo sinh chứ không phải của một 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. Cloud Storage cho Firebase là một dịch vụ lưu trữ tệp/blob và 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 cho mình 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ể lấy thông tin 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 ô 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 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 đoạn 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ử việc gửi hình ảnh

1. Tạo một lệnh xác nhận có thông báo xác nhận "Add the owner to post images" (Thêm khả năng đăng hình ảnh) và đẩy API 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 của Firebase và chờ 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 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:

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)

Giờ đây, bạn sẽ thêm tính năng hỗ trợ cho thông báo trên 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 trên nhiều nền tảng cho phép bạn gửi tin nhắn và thông báo một cách đáng tin cậy mà không mất phí.

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

Ứng dụng web cần một service worker có khả năng nhận và hiển thị thông báo trên web.

Bạn phải thiết lập trình cung cấp dịch vụ nhắn tin khi thêm AngularFire. Hãy đảm bảo rằng mã sau có trong phần nhập của /angularfire-start/src/app/app.module.ts

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

app/app.module.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 thông báo đã được bật trên thiết bị hoặc trình duyệt, bạn sẽ được cấp một mã thông báo thiết bị. Mã thông báo thiết bị này là mã 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

2. Tìm hàm saveMessagingDeviceToken.
3. Thay thế toàn bộ hàm bằng đoạn 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, ban đầu mã này sẽ không hoạt động. Để ứng dụng của bạn có thể truy xuất mã thông báo của thiết bị, người dùng cần cấp cho ứng dụng quyền hiện 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ợ).

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 đoạn 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 lệnh xác nhận có thông báo xác nhận "Add the owner to post images" (Thêm khả năng đăng hình ảnh) và đẩy API 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 của Firebase và chờ quá trình triển khai mới hoàn tất.
3. Làm mới friendlyChat. Sau khi đăng nhập, hộp thoại cấp quyền gửi thông báo sẽ xuất hiện:
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 của 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 của thiết bị, bạn có thể gửi thông báo.

1. Mở thẻ Gửi thông báo qua đám mây trong bảng điều khiển của Firebase.
2. Nhấp vào "Thông báo mới"
3. Nhập tiêu đề thông báo và nội dung 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 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 chạy trong nền thì một thông báo sẽ xuất hiện trên trình duyệt, như trong ví dụ sau:

Trong lớp học lập trình tiếp theo, Firebase SDK for Cloud Functions, bạn sẽ tìm hiểu cách tự động hoá việc gửi thông báo từ phần phụ trợ cho mỗi tin nhắn mới được đăng trong ứng dụng trò chuyện.

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.

Ngay bây giờ, 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. Tức là người dùng nào cũng có thể đọc và ghi vào bất kỳ tập hợ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;
    }
  }
}

Biến quy tắc request.auth là một biến đặc biệt chứa thông tin về người dùng đã xác thực. Biến quy tắc request.resource trỏ đến dữ liệu mới đang được ghi. Bạn có thể xem thêm thông tin trong tài liệu này.

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

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

Cloud Storage cho Firebase 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 quy tắc bảo mật mặc định của Cloud Storage, quy tắc này chỉ cho phép người dùng đã xác thực sử dụng Cloud Storage. Trong bảng điều khiển của Firebase, trong 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 bất kỳ tệp nào trong bộ chứa lưu trữ 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 các tệp bạn tải lên là hình ảnh
• Giới hạn kích thước tối đa của hình ảnh 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;
    }
  }
}

Biến quy tắc request.auth là một biến đặc biệt chứa thông tin về người dùng đã xác thực. Biến quy tắc request.resource chứa thông tin về tệp đã tải lên. Bạn có thể xem thêm thông tin trong tài liệu này.

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

Tiếp tục chuyển đến lớp học lập trình Cloud Functions for Firebase để tìm hiểu cách sử dụng Firebase SDK cho Cloud Functions và thêm một số tác vụ phụ trợ vào ứng dụng nhắn tin. Bạn có thể bắt đầu ngay ở Bước 5 của lớp học lập trình đó vì bạn đã thiết lập dự án Firebase.

Bạn muốn tìm hiểu thêm về Cloud Firestore? Có thể bạn muốn tìm hiểu về các tập hợp con và giao dịch? Truy cập lớp học lập trình web Cloud Firestore để tham gia lớp học lập trình chuyên sâu hơn về Cloud Firestore.

Bạn muốn tìm hiểu thêm về tính năng Giám sát hiệu suất Firebase dành cho web? Tham khảo lớp học lập trình về giám sát hiệu suất Firebase cho web để tìm hiểu sâu hơn về tính năng Giám sát hiệu suất Firebase.

Tìm hiểu thêm

• firebase.google.com

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. Trong bước này, bạn sẽ thêm tính năng xác thực thông tin đăng nhập và chặn các ứng dụng trái phép bằng tính năng Kiểm tra ứng dụng và reCAPTCHA Enterprise.

Bước này phụ thuộc vào việc hoàn thành các bước trước đó, hãy đảm bảo rằng friendlyChat đang chạy cục bộ bằng trình mô phỏng hoặc được triển khai bằng dịch vụ Firebase.

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 bảng điều khiển Cloud, hãy tìm và chọn reCaptcha Enterprise trong phần Bảo mật.
2. Bật dịch vụ khi được nhắc, rồi nhấp vào Create key (Tạo khoá).
3. Nhập tên hiển thị khi được 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 rằng bạn đã bỏ chọn tuỳ chọn "Sử dụng hộp đánh dấu xác thực".
5. Nhấp vào Tạo khoá rồi lưu trữ khoá đã tạo ở nơi nào đó để giữ 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 của Firebase, hãy tìm mục Build (Tạo) trên bảng điều khiển bên trái.
2. Nhấp vào App Kiểm tra, 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ự với Cloud Firestore.

Lúc này, tính năng Kiểm tra ứng dụng sẽ được thực thi! 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 quy trình xác thực vào ứng dụng.

Chuyển đến tệp environment.ts rồi 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.appspot.com',
    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.module.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.module.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 hoạt động 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 App Kiểm tra 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ã 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 và thêm dữ liệu 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 cam kết có thông báo cam kết "Chặn các ứng dụng trái phép bằng tính năng Kiểm tra ứng dụng" và đẩy ứng dụng đó 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à chờ quá trình triển khai mới hoàn tất.

Xin chúc mừng! Tính năng Kiểm tra ứng dụng hiện đã hoạt động trong ứng dụng của bạn.