Lớp học lập trình web kiểm tra ứng dụng

1. Giới thiệu

Cập nhật lần cuối: 23-02-2023

Làm cách nào bạn có thể ngăn chặn truy cập trái phép vào tài nguyên Firebase của mình?

Bạn có thể sử dụng Kiểm tra ứng dụng Firebase để ngăn khách hà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 xác nhận 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 các nhà cung cấp 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, Kiểm tra ứng dụng hỗ trợ reCAPTCHA v3 và reCAPTCHA Enterprise làm nhà cung cấp chứng thực.

Kiểm tra ứng dụng có thể được sử dụng để bảo vệ các yêu cầu đối với Cloud Firestore, Cơ sở dữ liệu thời gian thực, Chức năng đám mây, Xác thực Firebase với Nền tảng nhận dạng và trên các chương trình phụ trợ do bạn tự lưu trữ.

Những gì bạn sẽ xây dựng

Trong lớp học lập trình này, bạn sẽ bảo mật ứng dụng trò chuyện bằng cách trước tiên thêm rồi thực thi Kiểm tra ứng dụng.

Ứng dụng trò chuyện thân thiện bắt đầu do bạn xây dựng.

Bạn sẽ học được gì

  • Cách giám sát phần phụ trợ của bạn để phát hiện truy cập trái phép
  • Cách thêm tính thực thi vào Firestore và Cloud Storage
  • Cách chạy ứng dụng của bạn bằng mã thông báo gỡ lỗi để phát triển cục bộ

Những gì bạn cần

  • IDE/trình soạn thảo văn bản 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
  • Một thiết bị đầu cuối/bảng điều khiển
  • Trình duyệt 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 bạn chưa cài đặt Git, bạn có thể tải xuống kho lưu trữ dưới dạng tệp ZIP .

Nhập ứng dụng khởi đầu

Sử dụng IDE của bạn, mở hoặc nhập thư mục 📁 appcheck-start từ kho lưu trữ nhân bản. 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 dự án Firebase

  1. Đăng nhập vào Firebase .
  2. Trong bảng điều khiển Firebase, hãy nhấp vào Thêm dự án rồi đặt tên cho dự án Firebase của bạn là FriendlyChat. Hãy nhớ ID dự án cho dự án Firebase của bạn.
  3. Bỏ chọn Bật Google Analytics cho dự án này
  4. Nhấp vào Tạo dự án.

Ứng dụng mà chúng tôi sắp xây dựng 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 của bạn.
  • Cloud Firestore để lưu dữ liệu có cấu trúc trên đám mây và nhận thông báo ngay lập tức khi dữ liệu thay đổi.
  • Cloud Storage cho Firebase để lưu tệp trên đám mây.
  • Firebase Hosting để lưu trữ và phục vụ nội dung của bạn.
  • Firebase Cloud Messaging để 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.
  • Giám sát hiệu suất Firebase để thu thập dữ liệu hiệu suất người dùng cho ứng dụng của bạn.

Một số sản phẩm này cần có cấu hình đặc biệt hoặc cần được bật bằng bảng điều khiển Firebase.

Thêm ứng dụng web Firebase vào dự án

  1. Nhấp vào biểu tượng trang web 58d6543a156e56f9.png để tạo một ứng dụng web Firebase mới.
  2. Đăng ký ứng dụng với biệt hiệu Trò chuyện thân thiện, sau đó đánh dấu vào ô bên cạnh Đồng thời thiết lập Firebase Hosting cho ứng dụng này . Nhấn vào Đăng ký ứng dụng .
  3. Ở bước tiếp theo, bạn sẽ thấy lệnh cài đặt Firebase bằng npm và đối tượng cấu hình. Bạn sao chép đối tượng này sau trong lớp học lập trình, vì vậy bây giờ hãy nhấn Next .

Thêm Firebase vào cửa sổ ứng dụng web của bạn

  1. Sau đó, bạn thấy tùy chọn cài đặt Firebase CLI. Nếu bạn chưa cài đặt nó, hãy thực hiện ngay bằng cách sử dụng lệnh npm install -g firebase-tools . Sau đó nhấn vào Tiếp theo .
  2. Sau đó, bạn thấy tùy 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 . Bạn triển khai dịch vụ lưu trữ Firebase ở bước tiếp theo.

Kích hoạt tính năng Đăng nhập bằng Google để 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 của họ, chúng tôi sẽ sử dụng phương thức đăng nhập Google.

Bạn sẽ cần bật Đăng nhập bằng Google:

  1. Trong bảng điều khiển Firebase, tìm phần Xây dựng ở 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 tab Phương thức đăng nhập (hoặc nhấp vào đây để truy cập trực tiếp vào đó).
  3. Kích hoạt nhà cung cấp dịch vụ đăng nhập Google
  4. Đặt tên công khai cho ứng dụng của bạn thành Trò chuyện thân thiện và chọn email hỗ trợ Dự án từ menu thả xuống.
  5. Nhấp vào để lưu

f96888973c3d00cc.png

Kích hoạt 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.

Bạn sẽ cần kích hoạt Cloud Firestore:

  1. Trong phần Build của bảng điều khiển Firebase, nhấp vào Cơ sở dữ liệu Firestore .
  2. Nhấp vào Tạo cơ sở dữ liệu trong ngăn Cloud Firestore.

Nút tạo cơ sở dữ liệu trên Cloud Firestore

  1. Chọn tùy chọn Bắt đầu ở chế độ thử nghiệm , sau đó nhấp vào Tiếp theo sau khi đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.

Chế độ kiểm tra đảm bảo rằng bạn có thể tự do ghi vào cơ sở dữ liệu trong quá trình phát triển. Bạn có các quy tắc bảo mật đã được viết sẵn cho bạn trong mã khởi đầu. Bạn sẽ sử dụng chúng cho lớp học lập trình này.

Cửa sổ quy tắc bảo mật cơ sở dữ liệu. tùy chọn

  1. Đặt vị trí lưu trữ dữ liệu Cloud Firestore của bạn. Bạn có thể để mặc định hoặc chọn khu vực gần bạn. Nhấp vào Bật để cung cấp Firestore.

a3d24f9f4ace1917.png

Kích hoạt bộ nhớ đám mây

Ứng dụng web sử dụng Cloud Storage cho Firebase để lưu trữ, tải lên và chia sẻ hình ảnh.

Bạn sẽ cần bật Cloud Storage:

  1. Trong phần Build của bảng điều khiển Firebase, hãy nhấp vào Storage .
  2. Nếu không có nút Bắt đầu thì có nghĩa là Cloud Storage đã được bật và bạn không cần thực hiện theo các bước bên dưới.
  3. Nhấp vào Bắt đầu .
  4. Chọn tùy chọn Bắt đầu ở chế độ thử nghiệm , sau đó nhấp vào Tiếp theo sau khi đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.

Với các quy tắc bảo mật mặc định, bất kỳ người dùng được xác thực nào cũng có thể ghi bất cứ thứ gì vào Cloud Storage. Chúng ta sẽ triển khai các quy tắc bảo mật đã được viết sẵn cho chúng ta sau này trong lớp học lập trình này.

1c875cef812a4384.png

  1. Vị trí Cloud Storage được chọn trước cùng khu vực bạn đã chọn cho cơ sở dữ liệu Cloud Firestore của mình. Nhấn Done để hoàn tất việc thiết lập.

d038569661620910.png

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 ID dự án của bạn, sau đó đặt bí danh cho dự án Firebase của bạn. Đối với dự án này, bạn chỉ có thể cung cấp bí danh mặc định . Tiếp theo, bạn sẽ cần định cấu hình dự án cục bộ của mình để hoạt động với Firebase.

  1. Chuyển đến cài đặt Dự án của bạn trong bảng điều khiển Firebase
  2. Trong thẻ "Ứng dụng của bạn", 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 Cấu hình từ khung đoạn mã Firebase SDK.
  4. Sao chép đoạn mã đối tượng cấu hình, sau đó thêm nó 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 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.appspot.com",
  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

Điều này cho phép hỗ trợ khung web mà dự án này đã được xây dựng.

Bây giờ chúng ta đã sẵn sàng để chạy dự án của bạn và kiểm tra xem dự án mặc định có hoạt động không!

5. Dùng thử ứng dụng mà không cần Kiểm tra ứng dụng

Bây giờ bạn đã định cấu hình ứng dụng của mình và thiết lập SDK, hãy thử sử dụng ứng dụng như thiết kế ban đầu. Đầu tiên, hãy bắt đầu bằng cách cài đặt tất cả các phần phụ thuộc. Từ thiết bị đầu cuối của bạn, điều hướng đến thư mục appcheck-start/hosting . Khi ở trong thư mục đó, hãy chạy npm install . Điều này tìm nạp tất cả các 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 bức ảnh lên cuộc trò chuyện.

Bây giờ bạn đã thử nghiệm nó tại địa phương, đã đến lúc xem nó được đưa vào sản xuất! Chạy firebase deploy để triển khai ứng dụng web lên web. Phần này là một bước quan trọng trong việc minh họa cách hoạt động của Kiểm tra ứng dụng trong thế giới thực vì nó yêu cầu phải định cấu hình miền cho nhà cung cấp chứng thực reCAPTCHA Enterprise.

Hy vọng rằng bạn đang trải nghiệm khả 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 đượ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 từ bước trước đều có thể truy cập tài nguyên phụ trợ của bạn. Họ vẫn cần tuân theo các quy tắc bảo mật do hệ thống Firestore và Cloud Storage của bạn áp dụng, nhưng nếu không, họ vẫn có thể truy vấn, lưu trữ và truy cập dữ liệu được lưu trữ ở đó.

Trong một số 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 các quy tắc

6. Bật Kiểm tra và thực thi ứng dụng

Hãy bắt đầu bằng cách lấy Khóa doanh nghiệp reCAPTCHA cho dự án của bạn và thêm khóa đó vào Kiểm tra ứng dụng. Bạn bắt đầu bằng cách truy cập phần reCAPTCHA Enterprise của Google Cloud Console. Chọn dự án của bạn và sau đó bạn sẽ được nhắc bật API reCAPTCHA Enterprise. Kích hoạt API và đợi vài phút để nó hoàn tất. Sau đó nhấn Create Key bên cạnh Enterprise key . Sau đó, trong phần này, chỉ định tên hiển thị và chọn khóa Loại trang web . Bạn cần chỉ định miền mà ứng dụng của bạn được lưu trữ trên đó. Vì bạn dự định lưu trữ nội dung này trên Firebase Hosting nên bạn 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 đầy đủ các thông tin này nhấn DoneCreate Key .

màn hình khóa tạo reCAPTCHA

Sau khi hoàn tất, bạn sẽ thấy ID ở đầu trang Chi tiết chính .

Cửa sổ đăng ký doanh nghiệp reCAPTCHA

Hãy tiếp tục và sao chép ID này vào khay nhớ tạm của bạn. Đây là chìa khóa mà bạn sử dụng để Kiểm tra ứng dụng. Tiếp theo, hãy truy cập phần Kiểm tra ứng dụng của bảng điều khiển Firebase và nhấp vào Bắt đầu . Sau đó, nhấp vào Đăng ký rồi nhấp vào reCAPTCHA Enterprise và đặt ID đã sao chép vào hộp văn bản cho Khóa trang web reCAPTCHA Enterprise . Để phần còn lại của cài đặt làm mặc định. Trang Kiểm tra ứng dụng của bạn sẽ trông giống như thế này:

Cửa sổ ứng dụng Kiểm tra ứng dụng nơi bạn đăng ký mã thông báo doanh nghiệp reCAPTCHA của mình

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

Bây giờ bạn đã có khóa đăng ký trong bảng điều khiển 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 chạy cục bộ và bạn có thể bắt đầu thực hiện lại các yêu cầu đối với phần phụ trợ của Firebase. Khi các yêu cầu đi ngược lại 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 thực hiện, bạn có thể truy cập phần Cloud Firestore trong tab 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 khách để sử dụng Kiểm tra ứng dụng nên bạn sẽ thấy nội dung tương tự như sau:

Trang tổng quan Kiểm tra ứng dụng hiển thị 100% yêu cầu của khách hàng chưa được xác minh đối với ứng dụng của bạn.

Phần phụ trợ có 100% yêu cầu chưa được xác minh được gửi đến. Màn hình này rất hữu ích vì nó cho thấy hầu hết tất cả các yêu cầu của khách hàng đều đến từ các khách hàng chưa tích hợp Kiểm tra ứng dụng.

Bảng điều khiển này có thể chỉ ra một số điều. Điều đầu tiên nó có thể cho biết 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 đúng như vậy thì bạn có thể thực thi Kiểm tra ứng dụng một cách an toàn mà không cần lo lắng về việc tắt quyền truy cập đối với ứng dụng khách chính hãng của ứng dụng của bạn. Một điều khác mà điều này có thể cho bạn biết là có bao nhiêu lần thử truy cập vào phần phụ trợ của bạn mà không đến từ bên trong ứng dụng của bạn. Đây có thể là 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 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 gửi đến chương trình phụ trợ của bạn trước khi bạn chuyển sang việc xác minh yêu cầu của họ.

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

Hãy tiếp tục và nhấn nút Thực thi từ màn hình trước, sau đó nhấn Thực thi lại nếu được nhắc.

Trang tổng quan về số liệu chưa được xác minh có nút Thực thi được đánh dấu

Thao tác này sẽ bắt đầu thực thi Kiểm tra ứng dụng; giờ đây nó sẽ chặn các yêu cầu tới các dịch vụ phụ trợ chưa đượ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 và ứng dụng này sẽ 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 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à yêu cầu chặn Kiểm tra ứng dụng không chuyển mã thông báo chứng thực hợp lệ trong yêu cầu của chúng tới tài nguyên Firebase của bạn. Hiện tại, bạn có thể tắt thực thi Kiểm tra ứng dụng và trong phần tiếp theo, bạn sẽ xem xét cách thêm Kiểm tra ứng dụng doanh nghiệp reCAPTCHA vào ví dụ Trò chuyện thân thiện.

7. Thêm khóa reCAPTCHA Enterprise vào trang web

Chúng tôi sẽ thêm khóa 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 Khóa doanh nghiệp reCAPTCHA của bạn 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 quá trình này hoàn tất, hãy mở hosting/src/index.js và trên dòng 51, bạn sẽ thêm nội dung nhập từ firebase-config.js để tìm nạp khóa reCAPTCHA và cũng nhập thư viện Kiểm tra ứng dụng để bạn có thể làm việc với reCAPTCHA Nhà cung cấp doanh nghiệp.

// 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 và nếu có, hãy in 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ờ là lúc khởi chạy Kiểm tra ứng dụng để hoạt động với nhà cung cấp đã chọn của bạn–trong trường hợp này, đó là reCAPTCHA Enterprise. Sau đó, bạn cũng muốn tự động làm mới mã thông báo Kiểm tra ứng dụng của mình ở chế độ nền, điều này sẽ ngăn chặn mọi loại độ trễ do 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ọ đã cũ.

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, khi bạn chắc chắn 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 đã thêm gần đây.

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

Kiểm tra cục bộ trước

Trước tiên hãy kiểm tra ứng dụng của bạn tại địa phương. Nếu bạn chưa phục vụ ứng dụng cục bộ, hãy chạy firebase serve . Bạn nên lưu ý 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 của mình 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ờ nên đă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 sẽ muốn kiểm tra trong bảng điều khiển JavaScript của mình để tìm một dòng trông giống như thế này:

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 menu mục bổ sung cho ứng dụng của bạn.

Trang tổng quan Kiểm tra ứng dụng cho biết vị trí Quản lý mã thông báo gỡ lỗi

Đặt cho mã thông báo một tên duy nhất mà bạn sẽ nhớ và nhấp vào Lưu . Tùy chọn này cho phép bạn sử dụng mã thông báo do khách hàng tạo với ứng dụng của mình, đây là giải pháp thay thế an toàn hơn 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 của bạn. Việc nhúng mã thông báo và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 đó mà không qua 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 đó.

Mẫu điền mã thông báo gỡ lỗi bằng bí danh

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 Kiểm tra ứng dụng và kiểm tra xem nội dung ứng dụng có tải cục bộ hay không 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 cung cấp 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 trên bảng điều khiển.

Hãy thử nó trong sản xuất

Sau khi bạn hài lòng rằng Kiểm tra ứng dụng hoạt động cục bộ, hãy triển khai ứng dụng web vào sản xuất. Từ thiết bị đầu cuối của bạn, hãy gọi firebase deploy lại và tải lại trang. Điều này sẽ đóng gói ứng dụng web của bạn để chạy trên Firebase Hosting. Sau khi ứng dụng của bạn được lưu trữ trên Firebase Hosting, hãy thử truy cập ứ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 và sẽ thấy các cuộc trò chuyện đang tải trong dự án của bạn. Ngoài ra, sau khi tương tác với ứng dụng một lúc, bạn có thể truy cập phần 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 tới ứng dụng của bạn đã chuyển sang tất cả đang đượ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 Ứ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 sản xuất và thậm chí thiết lập mã thông báo gỡ lỗi để 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 tài nguyên Firebase từ các khách hàng được phê duyệt và ngăn chặn hoạt động gian lận xảy ra từ bên trong ứng dụng của bạn.

Cái gì tiếp theo?

Hãy xem tài liệu sau để thêm Kiểm tra ứng dụng Firebase vào:

Tài liệu tham khảo