Tích hợp SDK Firebase với ứng dụng web

Firebase App Hosting là lựa chọn phù hợp cho các ứng dụng web động được xây dựng bằng SDK Firebase JavaScript và Firebase Admin SDK cho Node.js. Trong một ứng dụng web đầy đủ tính năng, các SDK Firebase như Authentication, Cloud Firestore và App Check đóng vai trò quan trọng. Hướng dẫn này mô tả một số chiến lược chính giúp tối ưu hoá SDK Firebase và bắt đầu xây dựng Firebase vào ứng dụng web của bạn trên Firebase App Hosting.

Tự động khởi chạy Firebase Admin SDK và SDK web

Các môi trường của Google như Firebase App Hosting cung cấp quy trình khởi chạy ứng dụng đơn giản thông qua lệnh gọi hàm khởi tạo không có đối số tại thời điểm xây dựng và thời gian chạy. Đây là một tính năng của cả Firebase Admin SDK cho Node.js (một SDK phía máy chủ giúp khai thác nhiều chức năng của Firebase và có thể rất hữu ích trong ứng dụng web của bạn) và SDK Firebase JavaScript.

Với initializeApp(), bạn có thể cho phép Firebase App Hosting tự động điền cấu hình ứng dụng web cho bạn, đồng thời vẫn giữ tuỳ chọn kiểm soát chi tiết đối với các giá trị cụ thể nếu bạn muốn ghi đè các giá trị mặc định.

Khởi chạy mà không có đối số

Để khởi chạy SDK Firebase Admin SDK hoặc Firebase JavaScript bằng các giá trị cấu hình mặc định, hãy sử dụng initializeApp() mà không cung cấp bất kỳ đối số nào.

Admin SDK

import { initializeApp } from 'firebase-admin/app';
const app = initializeApp();

Đối với Admin SDK, chiến lược khởi chạy này hoạt động trong App Hosting cũng như các môi trường máy chủ khác của Google, bao gồm cả các hàm Cloud Run, App Engine và Cloud Run.

SDK JavaScript

import { initializeApp } from 'firebase/app';
const app = initializeApp();

Đối với SDK JavaScript, chiến lược khởi chạy này hoạt động trong App Hosting.

Ghi đè giá trị được điền tự động

Bạn có thể ghi đè cấu hình mặc định được chèn tự động. Xin lưu ý rằng các tuỳ chọn này khác nhau giữa Admin SDK và SDK JavaScript.

Admin SDK ghi đè

Để chỉ định các tuỳ chọn khởi chạy tuỳ chỉnh cho các dịch vụ như Cơ sở dữ liệu theo thời gian thực, Cloud Storage hoặc Cloud Functions, hãy sử dụng biến môi trường FIREBASE_CONFIG. Nếu nội dung của biến FIREBASE_CONFIG bắt đầu bằng ký tự {, thì nội dung đó sẽ được phân tích cú pháp dưới dạng đối tượng JSON. Nếu không, SDK sẽ giả định rằng chuỗi này là đường dẫn của tệp JSON chứa các tuỳ chọn.

# apphosting.yaml

env:
  - variable: FIREBASE_CONFIG
    value: '{"databaseURL":"https://project-id-default-rtdb.firebaseio.com","projectId":"my-project-id"}'

Ghi đè SDK JavaScript

Để ghi đè các giá trị FIREBASE_WEBAPP_CONFIG mặc định mà App Hosting chèn vào để khởi chạy SDK JavaScript, bạn có thể chỉ định các giá trị trong apphosting.yaml:

# apphosting.yaml

env:
  - variable: FIREBASE_WEBAPP_CONFIG
    value: '{"apiKey":"myApiKey","appId":"app:123","authDomain":"project-id.firebaseapp.com","databaseURL":"https://project-id-default-rtdb.firebaseio.com","messagingSenderId":"0123456789","projectId":"project-id","storageBucket":"project-id.firebasestorage.app"}'

Sử dụng tính năng khởi chạy tự động trong các môi trường khác

Quá trình khởi chạy tự động được thiết lập bằng một tập lệnh postinstall khi bạn cài đặt SDK JavaScript của Firebase. Tập lệnh postinstall tìm kiếm biến môi trường FIREBASE_WEBAPP_CONFIG, được đặt tự động trong môi trường tạo bản dựng Cloud Build App Hosting.

Nếu đang cài đặt SDK JS bên ngoài Cloud Build, bạn sẽ cần phải tự đặt biến môi trường này khi cài đặt SDK JavaScript của Firebase.

Cách thiết lập môi trường theo cách thủ công khi cài đặt:

  1. Sao chép đối tượng cấu hình ứng dụng web Firebase từ bảng điều khiển Firebase.

  2. Từ dòng lệnh, hãy đặt biến môi trường FIREBASE_WEBAPP_CONFIG trước khi chạy lệnh npm install.

FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase

Bất cứ khi nào bạn thay đổi dự án Firebase hoặc ứng dụng web, hãy chạy lại lệnh này. Bạn cũng có thể cần phải xoá các bộ nhớ đệm trung gian (như .next/cache).

Sử dụng FirebaseServerApp cho SSR

Nếu đã từng làm việc với Firebase JS SDK hoặc các SDK ứng dụng khác của Firebase trong quá trình phát triển ứng dụng web, thì có thể bạn đã quen thuộc với giao diện FirebaseApp và cách sử dụng giao diện này để định cấu hình các thực thể ứng dụng. Để hỗ trợ các thao tác tương tự ở phía máy chủ, Firebase cung cấp FirebaseServerApp.

FirebaseServerApp là một biến thể của FirebaseApp để sử dụng trong môi trường kết xuất phía máy chủ (SSR). Thư viện này bao gồm các công cụ để tiếp tục phiên Firebase bao gồm cả việc phân chia kết xuất phía máy khách (CSR) / kết xuất phía máy chủ.

Sử dụng FirebaseServerApp để:

  • Thực thi mã phía máy chủ trong bối cảnh người dùng, trái ngược với Firebase Admin SDK có toàn quyền quản trị.
  • Bật tính năng sử dụng App Check trong môi trường SSR.
  • Tiếp tục phiên Firebase Auth được tạo trong ứng dụng.

Để biết thông tin chi tiết đầy đủ về cách sử dụng FirebaseServerApp cho các mục đích này, hãy xem bài viết Sử dụng Firebase trong các ứng dụng web động có SSR.

Bật App Check trong ứng dụng web

Bạn có thể sử dụng App Check để tăng cường bảo mật cho ứng dụng web động trên App Hosting. Bằng cách triển khai một số chiến lược cụ thể phía máy chủ được mô tả trong bài viết Sử dụng Firebase trong các ứng dụng web động có SSR, bạn có thể bảo vệ phần phụ trợ App Hosting khỏi hành vi sai trái.