Lớp học lập trình về tính năng Kiểm tra ứng dụng web

1. Giới thiệu

Lần cập nhật gần đây nhất: ngày 23 tháng 2 năm 2023

Làm cách nào để ngăn chặn hành vi truy cập trái phép vào các 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 của 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 kèm theo một 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. Tính năng Kiểm tra ứng dụng của 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 các ứ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 App Check để bảo vệ các yêu cầu đối với Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication bằng Identity Platform và trên những 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 App Check.

Ứng dụng trò chuyện thân thiện ban đầu do bạn tạo.

Kiến thức bạn sẽ học được

  • Cách giám sát phần phụ trợ để phát hiện truy cập trái phép
  • Cách thêm quy trình 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
  • Firebase CLI đã đượ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. Nhận 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

Bằng cách sử dụng IDE, hãy mở hoặc nhập thư mục 📁 appcheck-start từ kho lưu trữ đã 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

  1. Đă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.
  2. Nhấp vào nút này để tạo một dự án mới, rồi nhập tên dự án (ví dụ: FriendlyChat).
  3. Nhấp vào Tiếp tục.
  4. Nếu được nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase, rồi nhấp vào Tiếp tục.
  5. (Không bắt buộc) Bật tính năng hỗ trợ của AI trong bảng điều khiển của Firebase (còn gọi là "Gemini trong Firebase").
  6. Đố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.
  7. Nhấp vào Tạo dự án, đợi dự án được cấp phép rồi nhấp vào Tiếp tục.

Nâng cấp gói giá của Firebase

Để sử dụng Cloud Storage cho Firebase, dự án Firebase của bạn cầ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 thanh toán trên đám mây.

Để nâng cấp dự án lên gói Blaze, 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.
  2. Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết một tài khoản thanh toán trên Cloud với dự án của bạn.
    Nếu cần tạo một tài khoản thanh toán trên Cloud 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 một ứng dụng web Firebase vào dự án

  1. Nhấp vào biểu tượng web 58d6543a156e56f9.png để tạo một ứng dụng web Firebase mới.
  2. Đăng ký ứng dụng bằng biệt hiệu Friendly Chat, sau đó đánh dấu vào ô bên cạnh mục Thiết lập cả 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 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 vào Tiếp theo.

Cửa sổ thêm Firebase vào ứng dụng web

  1. Sau đó, bạn sẽ thấy 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 đó, hãy nhấp vào Tiếp theo.
  2. 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. 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 truy cập Bảng điều khiển. Bạn sẽ triển khai cho dịch vụ lưu trữ Firebase ở một bước sau này.

Thiết lập các sản phẩm của 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 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 về 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:

  1. 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.
  2. 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 thẻ này).
  3. Bật trình cung cấp dịch vụ đăng nhập bằng Google
  4. Đặt tên công khai cho ứng dụng của bạn thành Friendly Chat và chọn một email hỗ trợ dự án trong trình đơn thả xuống.
  5. Nhấp vào Lưu

f96888973c3d00cc.png

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:

  1. 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 Tạo rồi chọn Cơ sở dữ liệu Firestore.
  2. Nhấp vào Tạo cơ sở dữ liệu.
  3. Để nguyên Mã cơ sở dữ liệu được đặt thành (default).
  4. Chọn một vị trí cho cơ sở dữ liệu của bạn, rồi 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 của mình.
  5. 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.
    Sau này trong 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 công khai một ứ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.
  6. 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:

  1. 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 Tạo rồi chọn Bộ nhớ.
  2. Nhấp vào Bắt đầu.
  3. Chọn một vị trí cho bộ chứa lưu trữ mặc định.
    Các bộ chứa ở US-WEST1, US-CENTRAL1US-EAST1 có thể tận dụng cấp"Luôn miễn phí" của Google Cloud Storage. Các bộ chứa ở tất cả những vị trí khác đều tuân theo mức giá và mức sử dụng của Google Cloud Storage.
  4. 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.
    Sau này trong 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 công khai ứng dụng mà không thêm Quy tắc bảo mật cho Nhóm lưu trữ.
  5. 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 rồi đặt một tên thay thế cho dự án Firebase của bạn. Đối với dự án này, bạn chỉ cần đặt một biệt hiệu 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.

  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 Config (Cấu hình) trong ngăn đoạn mã SDK Firebase.
  4. Sao chép đoạn mã đối tượng cấu hình, rồi 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 giả định rằng biến này 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 cho phép 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 App Check

Bây giờ, khi 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. 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 đăng nhập, sau đó 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.

Sau khi kiểm thử cục bộ, giờ là lúc bạn xem kết quả trong giai đoạn phát hành chính thức! 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 App Check hoạt động trong thực tế vì bước này yêu cầu bạn định cấu hình một miền cho trình cung cấp chứng thực reCAPTCHA Enterprise.

Hy vọng bạn đang trải nghiệm khả năng mặc định mà ứng dụng này mang lại. Đăng tin nhắn trò chuyện và mọi thứ khác chỉ nên được 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 ở bước trước đều có thể truy cập vào các tài nguyên phụ trợ. Các hàm này 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, chúng 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 App Check và chế độ thực thi

Hãy bắt đầu bằng cách lấy một khoá reCAPTCHA Enterprise cho dự án của bạn và thêm khoá đó vào App Check. 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 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 một tên hiển thị và chọn khoá loại Trang web. Bạn cần chỉ định các miền mà ứng dụng của bạn được lưu trữ. Vì bạn dự định lưu trữ tệp 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ữ trong mục 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 XongTạo khoá.

Màn hình tạo khoá reCAPTCHA

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.

Cửa sổ đăng ký reCAPTCHA Enterprise

Hãy sao chép mã nhận dạng này vào bảng nhớ tạm. Đây là khoá mà bạn dùng cho App Check. Tiếp theo, hãy truy cập vào phần App Check của bảng điều khiển Firebase rồi nhấp vào Bắt đầu. Sau đó, 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 App Check của bạn sẽ có dạng như sau:

Cửa sổ ứng dụng App Check nơi bạn đăng ký mã thông báo reCAPTCHA Enterprise

Yêu cầu chưa được xác minh và chưa được thực thi

Giờ đây, khi bạn đã đăng ký một khoá 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à bạn có thể bắt đầu đưa ra yêu cầu đối với phần phụ trợ Firebase một lần nữa. Vì các yêu cầu đi ngược lại với phần phụ trợ Firebase, nên các yêu cầu này đang được App Check 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 App Check trong bảng điều khiển Firebase. Vì bạn chưa định cấu hình ứng dụng để sử dụng App Check, nên bạn sẽ thấy thông báo tương tự như sau:

Một trang tổng quan App Check cho thấy 100% yêu cầu của ứng dụng khách chưa được xác minh cho ứng dụng của bạn.

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

Trang tổng quan này có thể cho biết một số thông tin. Đ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ể 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 một ứng dụng khách chính hãng của ứng dụng. Một điều khác mà thông tin này có thể cho bạn biết là có bao nhiêu lượt thử truy cập vào phần phụ trợ của bạn mà không phải từ bên 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 rằng 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 đối với 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

Tiếp theo, hãy nhấn nút Thực thi trên màn hình trước, rồi nhấn lại vào nút Thực thi nếu được nhắc.

Trang tổng quan về các chỉ số chưa được xác minh, có nút Thực thi được làm nổi bật

Thao tác này sẽ bắt đầu thực thi App Check; giờ đây, App Check sẽ chặn các yêu cầu đến các dịch vụ phụ trợ của bạn mà 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. Ứ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, sẽ không có gì xảy ra. Nếu mở bảng điều khiển Chrome để đọc cá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à App Check chặn các yêu cầu không truyền mã chứng thực hợp lệ trong các yêu cầu đến tài nguyên Firebase của bạn. Tạm thời, bạn có thể tắt chế độ thực thi App Check và trong phần tiếp theo, bạn sẽ xem xét 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 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à ở 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 App Check để có thể làm việc với trì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 App Check. 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ã gỡ lỗi mà bạn có thể dùng cho quá trình 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

Giờ là lúc bạn cần khởi chạy App Check để 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. Việc này sẽ ngăn chặ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 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 mà bạn vừa thêm.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

Trước tiên, hãy kiểm thử cục bộ

Trước tiên, hãy kiểm thử ứng dụng của bạn trên thiết bị. 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 cục bộ. Điều này là do bạn chỉ đăng ký miền Firebase với trình cung cấp 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 các phần phụ trợ bị hạn chế của bạn từ một ứng dụng đang 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 sẽ muốn kiểm tra 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ã 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 App Check trong trình đơn tràn cho ứng dụng của bạn.

Trang tổng quan App Check cho biết vị trí của phần Quản lý mã gỡ lỗi

Đặ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 với ứng dụng của mình. Đây là một lựa chọn 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 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.

Ví dụ về việc điền mã thông báo gỡ lỗi bằng một biệt hiệu

Sau khi đăng ký mã 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 App Check và kiểm thử để đả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 kênh phát hành công khai

Sau khi bạn hài lòng với việc App Check hoạt động cục bộ, hãy triển khai ứng dụng web cho bản phát hành công khai. 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 dịch vụ 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ã gỡ lỗi được in ở đó nữa, đồng thời sẽ thấy các cuộc trò chuyện tải trong dự án của mình. 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 App Check của bảng điều khiển Firebase rồi 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 được xác minh.

8. Xin chúc mừng!

Xin chúc mừng, bạn đã thêm thành công API Xác thực ứng dụng của 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 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 quá trình phát triển cục bộ. Điều này đảm bảo rằng các ứng dụng của bạn vẫn có thể truy cập vào các tài nguyên Firebase từ những máy 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:

Tài liệu tham khảo