1. Giới thiệu
Lần cập nhật gần đây nhất: 23/2/2023
Làm cách nào để ngăn chặn hành vi truy cập trái phép vào tài nguyên Firebase của bạn?
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 khách 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 gửi đến phải kèm theo chứng thực rằng yêu cầu đó đến từ ứng dụng chính hãng 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 phù hợp. Kiểm tra ứng dụng Firebase dựa vào nhà cung cấp dịch vụ chứng thực theo nền tảng cụ thể để xác minh tính xác thực của ứng dụng: đối với ứng dụng web, 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, Cloud Functions, Xác thực Firebase bằng Nền tảng nhận dạng và trên 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 giám sát phần phụ trợ để phát hiện hành vi truy cập trái phép
- Cách thêm quy tắc 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ộ
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
- 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. Lấy 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 đầu
Sử dụng IDE, 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ẽ có 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 một dự án Firebase
- Đăng nhập vào bảng điều khiển của Firebase bằng Tài khoản Google của bạn.
- Nhấp vào nút để tạo dự án mới, sau đó nhập tên dự án (ví dụ:
FriendlyChat).
- Nhấp vào Tiếp tục.
- Nếu được nhắc, hãy xem và chấp nhận điều khoản của Firebase, sau đó nhấp vào Tiếp tục.
- (Không bắt buộc) Bật tính năng trợ giúp AI trong bảng điều khiển của Firebase (gọi là "Gemini trong Firebase").
- Đối với lớp học lập trình này, bạn không cần Google Analytics, vì vậy, hãy tắt lựa chọn Google Analytics.
- Nhấp vào Create project (Tạo dự án), đợi dự án cấp phép rồi nhấp vào Continue (Tiếp tục).
Nâng cấp gói giá Firebase
Để sử dụng Cloud Storage cho Firebase, dự án Firebase của bạn cần sử dụng gói giá trả tiền theo mức dùng (Blaze), tức là dự án đó được liên kết với một tài khoản thanh toán Cloud.
- Tài khoản thanh toán trên Cloud 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 trị giá 300 USD và tài khoản thanh toán dùng thử miễn phí trên Cloud hay không.
- Nếu bạn đang 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:
- Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói của bạn.
- 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 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
- 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 hộp bên cạnh Also set up Firebase Hosting for this app (Đồng thời thiết lập dịch vụ 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, hãy nhấn vào Next (Tiếp theo).
- Sau đó, bạn sẽ thấy một lựa 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 đó, 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 và đăng nhập vào Firebase bằng lệnh
firebase login, sau đó nhấp vào Continue to Console (Tiếp tục đến bảng điều khiển). Bạn sẽ triển khai lên Lưu trữ Firebase ở bước sau.
Thiết lập các sản phẩm Firebase
Ứng dụng mà chúng ta sẽ 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 trên 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ó 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.
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 của Firebase, hãy tìm mục Tạo ở 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 nhà cung cấp dịch vụ đăng nhập bằng Google
- Đặt tên công khai cho ứng dụng của bạn là Friendly Chat và chọn một 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 này sử dụng Cloud Firestore để lưu tin nhắn trò chuyện và nhận tin nhắn trò chuyện mới.
Sau đâ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 bảng điều khiển 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.
- Giữ nguyên Mã cơ sở dữ liệu là
(default). - Chọn một vị trí cho cơ sở dữ liệu của bạn, sau đó nhấp vào Next (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 của mình. - 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 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 hiển thị 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 này 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 của bạn:
- Trong bảng điều khiển bên trái của bảng điều khiển Firebase, hãy mở rộng mục Build (Tạo) rồi chọn Storage (Bộ nhớ).
- Nhấp vào Bắt đầu.
- Chọn một vị trí cho bộ chứa Cloud Storage mặc định.
Các bộ chứa ởUS-WEST1,US-CENTRAL1vàUS-EAST1có thể tận dụng bậc "Luôn miễn phí" cho Google Cloud Storage. 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. Khô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ộ chứa Cloud Storage. - Nhấp vào Tạo.
4. Định cấu hình Firebase
Trong 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 của bạn. Đối với dự án này, bạn chỉ cần đặt bí danh là default. 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ã Firebase SDK.
- 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",
};
Trong cùng thư mục appcheck-start, hãy 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 tra xem dự án mặc định có hoạt động hay không!
5. Dùng thử ứng dụng mà không có tính năng Kiểm tra ứng dụng
Giờ đây, khi đã đị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. Trong dòng lệnh, 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 yêu cầu bạn đăng nhập bằng Tài khoản Google; hãy làm như vậy, sau đó thử đăng một vài tin nhắn trò chuyện và một vài ảnh lên cuộc trò chuyện.
Giờ bạn đã thử nghiệm cục bộ, đã đến lúc xem ứng dụng trong môi trường thực tế! Chạy firebase deploy để triển khai ứng dụng web lên web. Đây là một bước quan trọng trong việc minh hoạ cách Kiểm tra ứng dụng hoạt động trong thực tế vì bước này yêu cầu bạn phải định cấu hình một miền cho nhà cung cấp dịch vụ 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 việc khác chỉ nên thực hiện từ 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 từ bước trước đều có thể truy cập vào tài nguyên phụ trợ của bạn. Họ vẫn cần tuân thủ các quy tắc bảo mật do hệ thống Firestore và Cloud Storage của bạn đặt ra, nhưng nếu không, họ 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ý 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 rồi thêm khoá đó vào Kiểm tra ứng dụng. Bạn 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 reCAPTCHA Enterprise API. Bật API và đợi vài phút để quá trình này hoàn tất. Sau đó, nhấp vào Tạo khoá bên cạnh Khoá doanh nghiệp. Sau đó, trong phần 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 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 Lưu trữ Firebase, nên bạn sẽ sử dụng tên máy chủ lưu trữ mặc định, thường là ${YOUR_PROJECT_ID}.web.app. Bạn có thể tìm thấy tên miền được lưu trữ của mình trong phần Lưu trữ của bảng điều khiển của Firebase. Sau khi điền thông tin này, hãy nhấn vào Done (Xong) và Create Key (Tạo khoá).
Sau khi hoàn tất, bạn sẽ thấy một mã nhận dạng ở đầu trang Thông tin chính.
Hãy sao chép mã nhận dạng này vào bảng nhớ tạm. Đây là khoá bạn 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 Register (Đă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 reCAPTCHA Enterprise Site Key (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
Bây giờ, bạn đã có một khoá đã đăng ký trong bảng điều khiển của Firebase, hãy quay lại chạy trang web của bạn trong trình duyệt bằng cách chạy firebase serve. Tại đây, bạn có ứng dụng web đang chạy cục bộ và có thể bắt đầu gửi lại yêu cầu đến phần phụ trợ Firebase. Khi các yêu cầu được gửi đến phần phụ trợ của Firebase, các yêu cầu này sẽ được Kiểm tra ứng dụng giám sát nhưng không được thực thi. Nếu muốn xem trạng thái của các yêu cầu đang được gửi đến, 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 của Firebase. Vì 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 kết quả tương tự như sau:
Phần phụ trợ có 100% yêu cầu chưa được xác minh. Màn hình này rất hữu ích vì cho thấy hầu hết tất cả yêu cầu của ứng dụng đều đến từ những ứng dụng chưa tích hợp 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à chỉ số 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ó, thì bạn có thể yên tâm thực thi tính năng Kiểm tra ứng dụng mà không cần lo lắng về việc tắt quyền truy cập của một ứng dụng khách chính hãng trong ứng dụng của bạn. Điều này cũng có thể cho bạn biết số lần cố gắng truy cập vào phần phụ trợ của bạn mà không xuất phát từ ứng dụng của bạn. Đâ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 rằng các yêu cầu không đượ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 đối với phần phụ trợ của bạn trước khi bạn chuyển sang xác minh yêu cầu của họ.
Yêu cầu chưa được xác minh và yêu cầu được thực thi
Hãy tiếp tục và nhấn vào nút Enforce (Thực thi) trên màn hình trước, sau đó nhấn lại vào Enforce (Thực thi) nếu được nhắc.
Thao tác này sẽ bắt đầu thực thi Kiểm tra ứng dụng; giờ đây, thao tác này sẽ chặn các yêu cầu đến dịch vụ phụ trợ của bạn mà không được xác minh thông qua nhà cung cấp dịch vụ 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 tại 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 của Chrome để đọc lỗi, bạn sẽ thấy thông báo tương tự như sau:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Đây là những yêu cầu bị Kiểm tra ứng dụng chặn do không chuyển mã thông báo chứng thực hợp lệ trong yêu cầu đến tài nguyên Firebase của bạn. Hiện tại, bạn có thể tắt chế độ thực thi Kiểm tra ứng dụng và trong phần tiếp theo, bạn sẽ tìm hiểu cách thêm tính năng Kiểm tra ứng dụng reCAPTCHA Enterprise vào ví dụ về Friendly Chat.
7. Thêm khoá reCAPTCHA Enterprise vào trang web
Chúng tôi 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 rồi 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 lệnh nhập từ firebase-config.js để tìm nạp khoá reCAPTCHA, đồng thời nhập thư viện Kiểm tra ứng dụng để 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 đó, ở dòng tiếp theo, bạn sẽ tạo một hàm để thiết lập 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ã gỡ lỗi mà bạn có thể 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ờ, đã đến lúc khởi động Kiểm tra ứng dụng để hoạt động với nhà cung cấp 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 Kiểm tra ứng dụng ở chế độ nền để tránh mọi sự chậm 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 Kiểm tra ứng dụng 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 rằng ứ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 bạn vừa thêm.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
Thử nghiệm 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 trên máy, 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. Điều này là do bạn chỉ đăng ký miền Firebase với nhà cung cấp dịch vụ chứng thực reCAPTCHA chứ không đăng ký miền localhost. Bạn không bao giờ được đăng ký localhost làm miền được phê duyệt vì điều 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ì bạn đã đặt self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, nên bạn cần kiểm tra bảng điều khiển JavaScript để tìm một dòng tương tự 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 nên lấy mã thông báo gỡ lỗi được cung cấp (trong ví dụ này là : 55183c20-de61-4438-85e6-8065789265be) và đưa 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 của bạn.
Đặt cho mã thông báo một tên riêng biệt mà bạn sẽ nhớ, rồi nhấp vào Lưu. Lựa chọn này cho phép bạn sử dụng mã thông báo do ứng dụng khách tạo cho ứng dụng của bạn. Đây là một giải pháp an toàn hơn so với việc tạo mã thông báo gỡ lỗi và nhúng mã đó vào ứng dụng. Việc nhúng mã thông báo trong ứ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 này để bỏ qua các bước kiểm tra của bạn. Nếu bạn muốn phân phối mã thông báo gỡ lỗi, chẳng hạn như 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 đó.
Sau khi đăng ký mã thông báo gỡ lỗi trong bảng điều khiển của Firebase, bạn có thể bật lại chế độ thực thi Kiểm tra ứng dụng và kiểm tra để đảm bảo nội dung ứng dụng tải trên thiết 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 đến 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 ra bảng điều khiển.
Dùng thử trong môi trường thực tế
Khi bạn đã hài lòng với việc Kiểm tra ứng dụng hoạt động trên máy, hãy triển khai ứng dụng web vào môi trường thực tế. Từ thiết bị đầu cuối, 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 Lưu trữ Firebase. Sau khi ứng dụng của bạn được lưu trữ trên Lưu trữ Firebase, hãy thử truy cập vào ứng dụng 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 sẽ thấy các cuộc trò chuyện đang tải trong dự án của mình. Ngoài ra, sau khi tương tác với ứng dụng trong giây lát, bạn có thể truy cập vào mục Kiểm tra ứng dụng trong bảng điều khiển của Firebase và xác thực rằng các yêu cầu đến ứng dụng của bạn đã chuyển sang trạng thái được xác minh.
8. Xin chúc mừng!
Xin chúc mừng, bạn đã thêm thành cô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 của Firebase để xử lý mã thông báo reCAPTCHA Enterprise cho môi trường thực tế, thậm chí còn thiết lập mã thông báo gỡ lỗi cho quá trình 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 tài nguyên Firebase từ các ứng dụng khách được phê duyệt và ngăn chặn hoạt động gian lận xảy ra trong ứng dụng của bạn.
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 Kiểm tra ứng dụng trên phần phụ trợ tuỳ chỉnh