1. Giới thiệu
Lần cập nhật gần đây nhất: 23/2/2023
Bạn có thể ngăn chặn hành vi truy cập trái phép vào tài nguyên Firebase bằng cách nào?
Bạn có thể sử dụng tính năng Kiểm tra ứng dụng Firebase để ngăn các ứng dụng trái phép truy cập vào tài nguyên phụ trợ của bạn bằng cách yêu cầu các yêu cầu đến phải đính kèm chứng thực rằng yêu cầu đó đến từ ứng dụng chính thức của bạn và bằng cách chặn lưu lượng truy cập không có chứng thực thích hợp. Tính năng Kiểm tra ứng dụng Firebase dựa vào nhà cung cấp dịch vụ chứng thực dành riêng cho nền tảng để xác minh tính xác thực của ứng dụng khách: đối với ứng dụng web, tính năng Kiểm tra ứng dụng hỗ trợ reCAPTCHA v3 và reCAPTCHA Enterprise làm nhà cung cấp dịch vụ chứng thực.
Bạn có thể dùng tính năng Kiểm tra ứng dụng để bảo vệ các yêu cầu gửi đến Cloud Firestore, Cơ sở dữ liệu theo thời gian thực, Hàm trên đám mây, tính năng Xác thực Firebase bằng Cloud Identity và trên các phần phụ trợ mà bạn tự lưu trữ.
Sản phẩm bạn sẽ tạo ra
Trong lớp học lập trình này, bạn sẽ bảo mật một ứng dụng trò chuyện bằng cách thêm rồi thực thi tính năng Kiểm tra ứng dụng.
Kiến thức bạn sẽ học được
- Cách theo dõi phần phụ trợ để phát hiện hành vi truy cập trái phép
- Cách thêm biện pháp thực thi vào Firestore và Cloud Storage
- Cách chạy ứng dụng bằng mã gỡ lỗi để phát triển cục bộ
Những gì bạn cần
- IDE/trình chỉnh sửa văn bản mà bạn chọn
- Trình quản lý gói npm, thường đi kèm với Node.js
- Giao diện dòng lệnh (CLI) của Firebase đã được cài đặt và định cấu hình để hoạt động với tài khoản của bạn
- 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. Tải mã mẫu
Sao chép kho lưu trữ GitHub của lớp học lập trình từ dòng lệnh:
git clone https://github.com/firebase/codelab-friendlychat-web
Ngoài ra, nếu chưa cài đặt Git, bạn có thể tải kho lưu trữ xuống dưới dạng tệp ZIP.
Nhập ứng dụng khởi động
Sử dụng IDE, hãy mở hoặc nhập thư mục 📁 appcheck-start từ kho lưu trữ được sao chép. Thư mục 📁 appcheck-start này chứa mã khởi đầu cho lớp học lập trình. Đây sẽ là một ứng dụng web trò chuyện có đầy đủ chức năng. Thư mục 📁 appcheck sẽ chứa mã hoàn chỉnh cho lớp học lập trình.
3. Tạo và thiết lập dự án Firebase
Tạo dự án Firebase
- Đăng nhập vào Firebase.
- 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 là FriendlyChat. Ghi nhớ mã dự án cho dự án Firebase của bạn.
- Bỏ đánh dấu vào mục Bật Google Analytics cho dự án này
- Nhấp vào Tạo dự án.
Ứng dụng mà chúng ta 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 trê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ữ Firebase để lưu trữ và phân phát tài sản của bạn.
- Giải pháp gửi thông báo 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 của trình duyệt.
- Tính năng 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.
Một số sản phẩm trong số này cần có 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
Để sử dụng Cloud Storage cho Firebase, dự án Firebase của bạn phải sử dụng gói giá trả theo mức sử dụng (Blaze), tức là dự án đó được liên kết với một tài khoản Cloud Billing.
- 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 dùng thử miễn phí trên Cloud Billing 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ó khoản tín dụng Google 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:
- Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói.
- 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 Cloud Billing với dự án của bạn.
Nếu cần tạo tài khoản Cloud Billing trong quá trình nâng cấp này, bạn có thể cần quay lại quy trình nâng cấp trong bảng điều khiển Firebase để hoàn tất quá trình nâng cấp.
Thêm ứng dụng web Firebase vào dự án
- Nhấp vào biểu tượng web
để tạo một ứng dụng web Firebase mới. - Đăng ký ứng dụng bằng biệt hiệu Friendly Chat, sau đó đánh dấu vào ô bên cạnh Also set up Firebase Hosting for this app (Cũng thiết lập tính năng Lưu trữ Firebase cho ứng dụng này). Nhấp vào Register app (Đăng ký ứng dụng).
- Ở bước tiếp theo, bạn sẽ thấy một lệnh để cài đặt Firebase bằng npm và một đối tượng cấu hình. Bạn sẽ sao chép đối tượng này sau trong lớp học lập trình, vì vậy, hiện tại, hãy nhấn Tiếp theo.
- Sau đó, bạn sẽ thấy một tuỳ chọn để cài đặt Giao diện dòng lệnh (CLI) của Firebase. Nếu bạn chưa cài đặt, hãy cài đặt ngay bằng lệnh
npm install -g firebase-tools. Sau đó, hãy nhấp vào Tiếp theo. - Sau đó, bạn sẽ thấy một lựa chọn để đăng nhập vào Firebase và triển khai lên dịch vụ lưu trữ Firebase. Hãy tiếp tục đăng nhập vào Firebase bằng lệnh
firebase login, sau đó nhấp vào Tiếp tục đến Bảng điều khiển. Bạn sẽ triển khai lên dịch vụ lưu trữ Firebase trong một bước sau này.
Bật tính năng Đăng nhập bằng Google cho tính năng Xác thực Firebase
Để cho phép người dùng đăng nhập vào ứng dụng web bằng Tài khoản Google, chúng ta sẽ sử dụng phương thức đăng nhập bằng Google.
Bạn cần bật tính năng Đăng nhập bằng Google:
- 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.
- Nhấp vào Xác thực, nhấp vào Bắt đầu nếu có, sau đó nhấp vào thẻ Phương thức đăng nhập (hoặc nhấp vào đây để chuyển thẳng đến đó).
- Bật trình cung cấp dịch vụ đăng nhập bằng Google
- Đặt tên công khai của ứng dụng thành Friendly Chat (Trò chuyện thân thiện) và chọn một địa chỉ email hỗ trợ dự án trong trình đơn thả xuống.
- 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:
- Trong bảng điều khiển bên trái của Firebase, hãy mở rộng mục Build (Tạo) rồi chọn Firestore database (Cơ sở dữ liệu Firestore).
- Nhấp vào Tạo cơ sở dữ liệu.
- Đặt Mã nhận dạng cơ sở dữ liệu thành
(default). - Chọn một vị trí cho cơ sở dữ liệu, sau đó nhấp vào Tiếp theo.
Đối với một ứng dụng thực tế, bạn nên chọn một vị trí gần với người dùng. - 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 công khai ứng dụng mà không thêm Quy tắc bảo mật cho cơ sở dữ liệu của bạn. - 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.
Sau đây là cách thiết lập Cloud Storage cho Firebase trong dự án Firebase:
- 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ớ.
- Nhấp vào Bắt đầu.
- Chọn vị trí cho bộ chứa Bộ nhớ mặc định.
Các bộ chứa trongUS-WEST1,US-CENTRAL1vàUS-EAST1có thể tận dụng cấp"Luôn miễn phí" cho Google Cloud Storage. Các bộ chứa ở tất cả các vị trí khác tuân theo mức giá và mức sử dụng của Google Cloud Storage. - 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ớ. - Nhấp vào Tạo.
4. Định cấu hình Firebase
Từ thư mục appcheck-start, hãy gọi:
firebase use --add
Khi được nhắc, hãy chọn Mã dự án, sau đó đặt bí danh cho dự án Firebase. Đối với dự án này, bạn chỉ cần đặt bí danh là mặc định. Tiếp theo, bạn cần định cấu hình dự án cục bộ để hoạt động với Firebase.
- Chuyển đến phần Cài đặt dự án trong bảng điều khiển của Firebase
- 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.
- Chọn Config (Cấu hình) trong ngăn đoạn mã SDK Firebase.
- Sao chép đoạn mã đối tượng cấu hình, sau đó thêm đoạn mã đó vào
appcheck-start/hosting/src/firebase-config.js. Phần còn lại của lớp học lập trình này giả định biến có tên là config.
firebase-config.js
const config = {
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",
};
Từ cùng thư mục appcheck-start, sau đó gọi:
firebase experiments:enable webframeworks
Thao tác này sẽ bật tính năng hỗ trợ khung web mà dự án này được xây dựng.
Giờ đây, chúng ta đã sẵn sàng chạy dự án và kiểm thử để đảm bảo dự án mặc định hoạt động!
5. Dùng thử ứng dụng mà không cần tính năng Kiểm tra ứng dụng
Giờ đây, bạn đã định cấu hình ứng dụng và thiết lập SDK, hãy thử sử dụng ứng dụng như thiết kế ban đầu. Trước tiên, hãy bắt đầu bằng cách cài đặt tất cả các phần phụ thuộc. Trên thiết bị đầu cuối, hãy chuyển đến thư mục appcheck-start/hosting. Khi ở trong thư mục đó, hãy chạy npm install. Thao tác này sẽ tìm nạp tất cả các phần phụ thuộc để dự án của bạn hoạt động. Để khởi động ứng dụng ở trạng thái hiện tại, bạn có thể chạy firebase serve. Ứng dụng sẽ yêu cầu bạn đăng nhập bằng Tài khoản Google. Hãy đăng nhập rồi thử đăng một vài tin nhắn trò chuyện và một vài bức ảnh vào cuộc trò chuyện.
Giờ đây, bạn đã kiểm thử cục bộ, hãy xem ứng dụng trong môi trường phát hành chính thức! Chạy firebase deploy để triển khai ứng dụng web lên web. Đây là bước quan trọng trong việc minh hoạ cách hoạt động của tính năng Kiểm tra ứng dụng trong thực tế vì bạn cần định cấu hình một miền cho nhà cung cấp chứng thực reCAPTCHA Enterprise.
Hy vọng bạn đang trải nghiệm chức năng mặc định mà ứng dụng cung cấp. Đăng tin nhắn trò chuyện và mọi thứ khác chỉ nên thực hiện trong một ứng dụng như thế này. Nhược điểm của trạng thái hiện tại là bất kỳ ai có cấu hình ứng dụng của bạn ở bước trước đều có thể truy cập vào tài nguyên phụ trợ của bạn. Các ứng dụng này vẫn cần tuân thủ các quy tắc bảo mật mà hệ thống Firestore và Cloud Storage của bạn áp dụng, nhưng ngoài ra, các ứng dụng này vẫn có thể truy vấn, lưu trữ và truy cập vào dữ liệu được lưu trữ ở đó.
Trong vài bước tiếp theo, bạn sẽ:
- Đăng ký sử dụng tính năng Kiểm tra ứng dụng
- Xác thực việc thực thi
- Bắt đầu thực thi quy tắc
6. Bật tính năng Kiểm tra ứng dụng và thực thi
Hãy bắt đầu bằng cách lấy Khoá reCAPTCHA Enterprise cho dự án của bạn và thêm khoá đó vào App Check. Bạn có thể bắt đầu bằng cách truy cập vào phần reCAPTCHA Enterprise của Google Cloud Console. Chọn dự án của bạn, sau đó bạn sẽ được nhắc bật API reCAPTCHA Enterprise. Bật API và đợi vài phút để quá trình này hoàn tất. Sau đó, hãy nhấp vào Tạo khoá bên cạnh Khoá doanh nghiệp. Sau đó, trong mục này, hãy chỉ định tên hiển thị và chọn khoá loại Trang web. Bạn cần chỉ định các miền lưu trữ ứng dụng của mình. Vì bạn dự định lưu trữ ứng dụng này trên Firebase Hosting, nên bạn sẽ sử dụng tên lưu trữ mặc định, thường là ${YOUR_PROJECT_ID}.web.app. Bạn có thể tìm thấy miền lưu trữ của mình trong phần Lưu trữ của Bảng điều khiển Firebase. Sau khi điền thông tin này, hãy nhấn vào Xong rồi nhấn vào Tạo khoá.
Sau khi hoàn tất, bạn sẽ thấy một mã nhận dạng ở đầu trang Chi tiết khoá.
Hãy sao chép mã này vào bảng nhớ tạm. Đây là khoá mà bạn sử dụng cho tính năng Kiểm tra ứng dụng. Tiếp theo, hãy truy cập vào phần Kiểm tra ứng dụng của bảng điều khiển Firebase rồi nhấp vào Bắt đầu. Sau đó, hãy nhấp vào Đăng ký, rồi nhấp vào reCAPTCHA Enterprise và đặt mã nhận dạng đã sao chép vào hộp văn bản cho Khoá trang web reCAPTCHA Enterprise. Giữ nguyên các chế độ cài đặt còn lại theo mặc định. Trang Kiểm tra ứng dụng sẽ có dạng như sau:
Yêu cầu chưa được xác minh và chưa được thực thi
Giờ đây, bạn đã có một khoá đã đăng ký trong bảng điều khiển Firebase, hãy quay lại chạy trang web trong trình duyệt bằng cách chạy firebase serve. Tại đây, ứng dụng web đang chạy cục bộ và bạn có thể bắt đầu tạo lại các yêu cầu đối với phần phụ trợ Firebase. Vì các yêu cầu này vi phạm phần phụ trợ Firebase, nên chúng đang được App Check theo dõi nhưng chưa được thực thi. Nếu muốn xem trạng thái của các yêu cầu đang diễn ra, bạn có thể truy cập vào mục Cloud Firestore trong thẻ API của trang Kiểm tra ứng dụng trong bảng điều khiển Firebase. Vì bạn chưa định cấu hình ứng dụng để sử dụng tính năng Kiểm tra ứng dụng, nên bạn sẽ thấy thông báo tương tự như sau:
100% yêu cầu chưa được xác minh được gửi đến phần phụ trợ. Màn hình này rất hữu ích vì cho thấy gần như tất cả các yêu cầu của ứng dụng đều đến từ những ứng dụng không tích hợp tính năng Kiểm tra ứng dụng.
Trang tổng quan này có thể cho biết một số điều. Điều đầu tiên mà thông tin này có thể cho biết là liệu tất cả ứng dụng khách của bạn có đang chạy phiên bản mới nhất của ứng dụng khách hay không. Nếu có, bạn có thể thực thi tính năng Kiểm tra ứng dụng một cách an toàn mà không lo lắng về việc tắt quyền truy cập cho ứng dụng khách chính hãng của ứng dụng. Một thông tin khác mà chỉ số này có thể cho bạn biết là số lần truy cập vào phần phụ trợ của bạn mà không phải từ trong ứng dụng. Đây có thể là những người dùng đang truy vấn trực tiếp phần phụ trợ của bạn mà bạn không biết. Vì bạn có thể thấy các yêu cầu chưa được xác minh, nên đã đến lúc xem điều gì sẽ xảy ra với những người dùng có thể có yêu cầu chưa được xác minh đến phần phụ trợ của bạn trước khi bạn chuyển sang xác minh các yêu cầu của họ.
Yêu cầu chưa được xác minh và đã được thực thi
Hãy tiếp tục nhấn nút Enforce (Thực thi) trên màn hình trước, rồi nhấn lại nút Enforce (Thực thi) nếu được nhắc.
Thao tác này sẽ bắt đầu thực thi tính năng Kiểm tra ứng dụng; tính năng này hiện sẽ chặn các yêu cầu đến các dịch vụ phụ trợ không được xác minh thông qua nhà cung cấp chứng thực mà bạn đã chọn (trong trường hợp này là reCAPTCHA Enterprise). Quay lại ứng dụng web đang chạy của bạn. Ứng dụng này sẽ chạy ở http://localhost:5000. Khi bạn làm mới trang và cố gắng lấy dữ liệu từ cơ sở dữ liệu, không có gì xảy ra. Nếu mở bảng điều khiển Chrome để đọc lỗi, bạn sẽ thấy nội dung tương tự như sau:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Đây là các yêu cầu mà tính năng Kiểm tra ứng dụng chặn do không truyền mã thông báo chứng thực hợp lệ trong các yêu cầu của chúng đến tài nguyên Firebase. Hiện tại, bạn có thể tắt tính năng thực thi App Check. Trong phần tiếp theo, bạn sẽ tìm hiểu cách thêm App Check reCAPTCHA Enterprise vào ví dụ về Friendly Chat.
7. Thêm khoá reCAPTCHA Enterprise vào trang web
Chúng ta sẽ thêm khoá doanh nghiệp vào ứng dụng của bạn. Trước tiên, hãy mở hosting/src/firebase-config.js và thêm Khoá reCAPTCHA Enterprise vào đoạn mã sau:
const reCAPTCHAEnterpriseKey = {
// Replace with your recaptcha enterprise site key
key: "Replace with your recaptcha enterprise site key"
};
Sau khi hoàn tất, hãy mở hosting/src/index.js và trên dòng 51, bạn sẽ thêm một tệp nhập từ firebase-config.js để tìm nạp khoá reCAPTCHA và cũng nhập thư viện App Check để có thể làm việc với nhà cung cấp reCAPTCHA Enterprise.
// add from here
import {
initializeAppCheck,
ReCaptchaEnterpriseProvider,
} from 'firebase/app-check';
// to here
// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
Sau đó, trên dòng tiếp theo, bạn sẽ tạo một hàm để thiết lập tính năng Kiểm tra ứng dụng. Trước tiên, hàm này sẽ kiểm tra xem bạn có đang ở trong môi trường phát triển hay không. Nếu có, hàm này sẽ in một mã thông báo gỡ lỗi mà bạn có thể sử dụng để phát triển cục bộ.
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
}
// to here
Bây giờ, bạn cần khởi chạy tính năng Kiểm tra ứng dụng để hoạt động với nhà cung cấp mà bạn đã chọn – trong trường hợp này là reCAPTCHA Enterprise. Sau đó, bạn cũng nên tự động làm mới mã thông báo App Check ở chế độ nền. Điều này sẽ ngăn mọi loại độ trễ khi người dùng tương tác với dịch vụ của bạn trong trường hợp mã thông báo App Check của họ đã hết hạn.
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
// add from here
// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
// to here
}
Cuối cùng, sau khi đảm bảo ứng dụng đã được khởi chạy, bạn cần gọi hàm setupAppCheck mà bạn vừa tạo. Ở cuối tệp hosting/src/index.js, hãy thêm lệnh gọi vào phương thức mà bạn đã thêm gần đây.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
Kiểm thử cục bộ trước
Trước tiên, hãy kiểm thử ứng dụng của bạn trên máy. Nếu bạn chưa phân phát ứng dụng cục bộ, hãy chạy firebase serve. Bạn sẽ nhận thấy rằng ứng dụng vẫn không tải được trên máy. Nguyên nhân là do bạn chỉ đăng ký miền Firebase với nhà cung cấp chứng thực reCAPTCHA chứ không phải miền localhost. Bạn không bao giờ được đăng ký localhost làm miền được phê duyệt vì việc này cho phép người dùng truy cập vào phần phụ trợ bị hạn chế của bạn từ một ứng dụng chạy cục bộ trên máy của họ. Thay vào đó, vì đã đặt self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, bạn nên kiểm tra trong bảng điều khiển JavaScript để tìm một dòng có dạng như sau:
App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.
Bạn sẽ muốn lấy mã thông báo gỡ lỗi được cung cấp (trong trường hợp ví dụ là : 55183c20-de61-4438-85e6-8065789265be) và cắm mã này vào cấu hình Kiểm tra ứng dụng trong trình đơn mục bổ sung cho ứng dụng.
Đặt tên riêng biệt cho mã thông báo mà bạn sẽ nhớ rồi nhấp vào Lưu. Tuỳ chọn này cho phép bạn sử dụng mã thông báo do ứng dụng tạo với ứng dụng của mình. Đây là một giải pháp thay thế an toàn hơn so với việc tạo mã thông báo gỡ lỗi và nhúng mã thông báo đó vào ứng dụng. Việc nhúng mã thông báo vào ứng dụng có thể khiến mã thông báo đó vô tình được phân phối cho người dùng cuối và những người dùng cuối đó có thể khai thác mã thông báo đó mà không cần qua các bước kiểm tra của bạn. Ví dụ: nếu bạn muốn phân phối mã thông báo gỡ lỗi trong môi trường CI, hãy đọc tài liệu này để tìm hiểu thêm về cách phân phối mã thông báo gỡ lỗi.
Sau khi đăng ký mã thông báo gỡ lỗi trong bảng điều khiển Firebase, bạn có thể bật lại tính năng thực thi App Check và kiểm tra để đảm bảo nội dung ứng dụng tải cục bộ bằng cách gọi firebase serve từ thiết bị đầu cuối. Bạn sẽ thấy dữ liệu đã nhập trước đó được phân phát cho phiên bản cục bộ của ứng dụng web. Bạn vẫn sẽ thấy thông báo có mã thông báo gỡ lỗi được in vào bảng điều khiển.
Thử nghiệm trong môi trường phát hành công khai
Khi bạn hài lòng rằng tính năng Kiểm tra ứng dụng hoạt động trên máy, hãy triển khai ứng dụng web sang môi trường phát hành công khai. Từ dòng lệnh, hãy gọi lại firebase deploy rồi tải lại trang. Thao tác này sẽ đóng gói ứng dụng web của bạn để chạy trên tính năng Lưu trữ Firebase. Sau khi ứng dụng của bạn được lưu trữ trên Firebase Hosting, hãy thử truy cập vào ứng dụng của bạn tại ${YOUR_PROJECT_ID}.web.app. Bạn có thể mở bảng điều khiển JavaScript và sẽ không còn thấy mã thông báo gỡ lỗi được in ở đó nữa. Đồng thời, bạn sẽ thấy các cuộc trò chuyện đang tải trong dự án. Ngoài ra, sau khi tương tác với ứng dụng trong vài phút, bạn có thể truy cập vào mục Kiểm tra ứng dụng của bảng điều khiển Firebase và xác thực rằng các yêu cầu đối với ứng dụng của bạn đã chuyển sang trạng thái tất cả đều được xác minh.
8. Xin chúc mừng!
Xin chúc mừng! Bạn đã thêm thành công tính năng Kiểm tra ứng dụng Firebase vào một Ứng dụng web!
Bạn thiết lập bảng điều khiển Firebase để xử lý mã thông báo reCAPTCHA Enterprise cho môi trường phát hành chính thức và thậm chí thiết lập mã thông báo gỡ lỗi cho hoạt động phát triển cục bộ. Điều này đảm bảo rằng ứng dụng của bạn vẫn có thể truy cập vào các tài nguyên Firebase từ ứng dụng khách đã phê duyệt và ngăn hoạt động gian lận xảy ra trong ứng dụng của bạn.
Bước tiếp theo là gì?
Hãy xem tài liệu sau để thêm tính năng Kiểm tra ứng dụng Firebase vào:
- Bật tính năng Thực thi trong Cloud Functions
- Xác minh mã thông báo của tính năng Kiểm tra ứng dụng trên phần phụ trợ tuỳ chỉnh