Một số plugin trong mẫu blog phụ thuộc vào các dịch vụ của Firebase, chẳng hạn như Realtime Database cho bộ đếm lượt xem bài viết, v.v. Do đó, nếu bạn muốn sử dụng bất kỳ plugin nào trong số này, bạn cần phải có một dự án Firebase được cấu hình với mẫu blog.
Tạo một dự án Firebase
Nếu bạn đã có một dự án Firebase được tạo trước đó, bạn có thể sử dụng nó và bỏ qua các bước tạo dự án mới được mô tả bên dưới.
- Truy cập Firebase Console.
- Nhấp vào + Tạo dự án và làm theo hướng dẫn để tạo dự án. Bạn có thể đặt tên dự án tùy ý.
- Sau khi dự án được tạo, điều hướng đến Cài đặt dự án.
- Trong phần Chung > Ứng dụng của bạn, nhấp vào </> Web và làm theo hướng dẫn để tạo ứng dụng Web trong dự án.
Bạn đã tạo một dự án Firebase cho ứng dụng Web.
Thiết lập quy tắc cho Realtime Database
Thêm các quy tắc bảo mật vào Realtime Database là rất quan trọng vì các quy tắc không an toàn cho phép bất kỳ ai trên internet có quyền đọc
và ghi
dữ liệu, cho phép họ đọc và sửa đổi bất cứ thứ gì trong cơ sở dữ liệu. Do đó, chúng ta cần thêm các hạn chế để đảm bảo rằng không ai có thể đọc hoặc sửa đổi dữ liệu mà không có quyền. Làm theo các bước dưới đây để bảo vệ cơ sở dữ liệu của bạn.
- Đi đến Dự án Firebase > Realtime Database.
- Chuyển sang tab Quy tắc.
-
Dán JSON sau đây vào trình chỉnh sửa quy tắc, thực hiện các thay đổi phù hợp và nhấp vào Xuất bản.
Cảnh báo!
Các quy tắc được cung cấp có thể được cập nhật trong tương lai bởi nhóm của chúng tôi nếu phát hiện bất kỳ vấn đề nghiêm trọng nào hoặc có các plugin mới được phát hành. Bạn nên cập nhật các quy tắc như bên dưới thường xuyên (ít nhất một lần mỗi tháng) bằng cách truy cập trang này.
Quy tắc được cập nhật lần cuối vào ngày 1 tháng 9 năm 2023 bởi Deo Kumar.{ "rules": { ".write": false, ".read": false, "blogs": { "$blog_id": { ".validate": "$blog_id.matches(/^\\d{18,22}$/) && ($blog_id === '000000000000000000' || $blog_id === '0000' || $blog_id === '0000')", "posts": { "$post_id": { ".validate": "$post_id.matches(/^\\d{18,22}$/)", "views": { ".read": true, ".write": "newData.exists()", ".validate": "newData.isNumber() && newData.val() % 1 === 0 && newData.val() === (data.exists() ? data.val() + 1 : 1)" } } } } } } }
{ "rules": { ".read": true, ".write": true } }
Lấy cấu hình Firebase
Bây giờ chúng ta cần đối tượng cấu hình của ứng dụng Web trong dự án Firebase. Làm theo các bước sau để tìm nó.
- Điều hướng đến Dự án Firebase của bạn.
- Đi đến Cài đặt dự án.
-
Trong phần Chung > Ứng dụng của bạn, chọn ứng dụng Web của bạn và nhấp vào Cấu hình. Bạn sẽ thấy một đối tượng Javascript trông giống như sau:
const firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx", authDomain: "xxxxxxxxxxxxx.firebaseapp.com", databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com", projectId: "xxxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxx.appspot.com", messagingSenderId: "000000000000", appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx", measurementId: "G-XXXXXXXXXX", };
Nếu trường
databaseURL
không có sẵn, điều đó có nghĩa là bạn chưa tạo một phiên bản Realtime Database. Hãy tạo nó thông qua phần Realtime Database và kiểm tra lại để đảm bảo trườngdatabaseURL
có sẵn.
Giữ tab trình duyệt mở vì chúng ta sẽ cần thông tin từ đối tượng này.
Thiết lập cấu hình Firebase
Bây giờ chúng ta sẽ thêm cấu hình Firebase vào blog.
- Đi đến Bảng điều khiển Blogger và điều hướng đến Bố cục.
- Tìm tiện ích Danh sách liên kết có tiêu đề Cấu hình Firebase (nếu bạn chưa đổi tên), nhấp vào nút Chỉnh sửa.
-
Tạo hoặc chỉnh sửa các liên kết hiện có cho từng cặp khóa-giá trị, với khóa là Tên trang web và giá trị (nội dung trong dấu ngoặc kép) là URL trang web như hình dưới đây.
Các liên kết của bạn sẽ trông như thế này:const firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx", authDomain: "xxxxxxxxxxxxx.firebaseapp.com", databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com", projectId: "xxxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxx.appspot.com", messagingSenderId: "000000000000", appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx", measurementId: "G-XXXXXXXXXX", };
Tên trang web URL trang web apiKey
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx
authDomain
xxxxxxxxxxxxx.firebaseapp.com
databaseURL
https://xxxxxxxxxxxxx.firebaseio.com
projectId
xxxxxxxxxxxxx
storageBucket
xxxxxxxxxxxxx.appspot.com
messagingSenderId
000000000000
appId
1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx
measurementId
G-XXXXXXXXXX
- Lưu tiện ích để áp dụng các thay đổi.
Hoàn tất! Bạn đã cấu hình thành công dự án Firebase với blog của mình.