Bắt đầu sử dụng tính năng Kiểm tra ứng dụng với một nhà cung cấp tuỳ chỉnh trên các ứng dụng web
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Trang này hướng dẫn bạn cách bật App Check trong một ứng dụng web bằng cách sử dụng trình cung cấp App Check tuỳ chỉnh của bạn. Khi bật App Check, bạn sẽ giúp đảm bảo rằng chỉ ứng dụng của bạn mới có thể truy cập vào các tài nguyên Firebase của dự án.
Tạo một đối tượng trình cung cấp App Check cho trình cung cấp tuỳ chỉnh của bạn. Đối tượng này phải có một phương thức getToken(), thu thập mọi thông tin mà trình cung cấp App Check tuỳ chỉnh của bạn yêu cầu làm bằng chứng về tính xác thực và gửi thông tin đó đến dịch vụ thu nạp mã thông báo của bạn để đổi lấy mã thông báo App Check. SDK App Check xử lý việc lưu mã thông báo vào bộ nhớ đệm, vì vậy, hãy luôn lấy mã thông báo mới trong quá trình triển khai getToken().
Web
import{CustomProvider}from"firebase/app-check";constappCheckCustomProvider=newCustomProvider({getToken:()=>{returnnewPromise((resolve,_reject)=>{// TODO: Logic to exchange proof of authenticity for an App Check token and// expiration time.// ...constappCheckToken={token:tokenFromServer,expireTimeMillis:expirationFromServer*1000};resolve(appCheckToken);});}});
constappCheckCustomProvider={getToken:()=>{returnnewPromise((resolve,_reject)=>{// TODO: Logic to exchange proof of authenticity for an App Check token and// expiration time.// ...constappCheckToken={token:tokenFromServer,expireTimeMillis:expirationFromServer*1000};resolve(appCheckToken);});}};
Thêm mã khởi chạy sau đây vào ứng dụng của bạn, trước khi bạn truy cập vào bất kỳ dịch vụ nào của Firebase:
Web
import{initializeApp}from"firebase/app";import{initializeAppCheck}from"firebase/app-check";constapp=initializeApp({// Your firebase configuration object});constappCheck=initializeAppCheck(app,{provider:appCheckCustomProvider,// Optional argument. If true, the SDK automatically refreshes App Check// tokens as needed.isTokenAutoRefreshEnabled:true});
firebase.initializeApp({// Your firebase configuration object});constappCheck=firebase.appCheck();appCheck.activate(appCheckCustomProvider,// Optional argument. If true, the SDK automatically refreshes App Check// tokens as needed.true);
Sau khi cài đặt thư viện App Check trong ứng dụng, hãy triển khai thư viện đó.
Ứng dụng khách đã cập nhật sẽ bắt đầu gửi mã thông báo App Check cùng với mọi yêu cầu mà ứng dụng đó gửi đến Firebase, nhưng các sản phẩm của Firebase sẽ không yêu cầu mã thông báo phải hợp lệ cho đến khi bạn bật chế độ thực thi trong phần App Check của bảng điều khiển Firebase.
Theo dõi các chỉ số và bật chế độ thực thi
Tuy nhiên, trước khi bật chế độ thực thi, bạn nên đảm bảo rằng việc này sẽ không làm gián đoạn người dùng hợp pháp hiện tại. Mặt khác, nếu thấy có dấu hiệu sử dụng tài nguyên ứng dụng của bạn một cách đáng ngờ, thì bạn nên bật tính năng thực thi sớm hơn.
Để đưa ra quyết định này, bạn có thể xem các chỉ số App Check cho những dịch vụ mà bạn sử dụng:
Theo dõi App Checkcác chỉ số về yêu cầu cho Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity cho iOS, Maps JavaScript API và Places API (Mới).
Khi hiểu rõ cách App Check sẽ ảnh hưởng đến người dùng và bạn đã sẵn sàng tiếp tục, bạn có thể bật chế độ thực thi App Check:
Bật chế độ thực thi App Check cho Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity cho iOS, Maps JavaScript API và Places API (Mới).
Nếu sau khi đăng ký ứng dụng cho App Check, bạn muốn chạy ứng dụng trong một môi trường mà App Check thường không phân loại là hợp lệ, chẳng hạn như cục bộ trong quá trình phát triển hoặc từ môi trường tích hợp liên tục (CI), bạn có thể tạo bản gỡ lỗi của ứng dụng sử dụng trình cung cấp gỡ lỗi App Check thay vì trình cung cấp chứng thực thực.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-30 UTC."],[],[],null,["This page shows you how to enable App Check in a web app, using [your custom\nApp Check provider](/docs/app-check/web/custom-provider). When you enable App Check, you\nhelp ensure that only your app can access your project's Firebase resources.\n\nIf you want to use App Check with one of the built-in providers, see the\ndocs for\n[App Check with reCAPTCHA Enterprise](/docs/app-check/web/recaptcha-enterprise-provider).\n\nBefore you begin\n\n- [Add Firebase to your JavaScript project](/docs/web/setup) if you haven't\n already done so.\n\n- [Implement your custom App Check provider's server-side logic](/docs/app-check/custom-provider).\n\n1. Add the App Check library to your app\n\n[Add Firebase to your web app](/docs/web/setup) if you haven't already. Be sure\nto import the App Check library.\n\n2. Create the App Check provider object\n\nCreate an App Check provider object for your custom provider. This object\nmust have a `getToken()` method, which collects whatever information your custom\nApp Check provider requires as proof of authenticity, and sends it to your\ntoken acquisition service in exchange for an App Check token. The\nApp Check SDK handles token caching, so always get a new token in your\nimplementation of `getToken()`. \n\nWeb \n\n```javascript\nimport { CustomProvider } from \"firebase/app-check\";\n\nconst appCheckCustomProvider = new CustomProvider({\n getToken: () =\u003e {\n return new Promise((resolve, _reject) =\u003e {\n // TODO: Logic to exchange proof of authenticity for an App Check token and\n // expiration time.\n\n // ...\n\n const appCheckToken = {\n token: tokenFromServer,\n expireTimeMillis: expirationFromServer * 1000\n };\n\n resolve(appCheckToken);\n });\n }\n});https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/appcheck-next/index/appcheck_custom_provider.js#L8-L29\n```\n\nWeb \n\n```javascript\nconst appCheckCustomProvider = {\n getToken: () =\u003e {\n return new Promise((resolve, _reject) =\u003e {\n // TODO: Logic to exchange proof of authenticity for an App Check token and\n // expiration time.\n\n // ...\n\n const appCheckToken = {\n token: tokenFromServer,\n expireTimeMillis: expirationFromServer * 1000\n };\n\n resolve(appCheckToken);\n });\n }\n};https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/appcheck/index.js#L24-L43\n```\n\n3. Initialize App Check\n\nAdd the following initialization code to your application, before you access any\nFirebase services: \n\nWeb \n\n```javascript\nimport { initializeApp } from \"firebase/app\";\nimport { initializeAppCheck } from \"firebase/app-check\";\n\nconst app = initializeApp({\n // Your firebase configuration object\n});\n\nconst appCheck = initializeAppCheck(app, {\n provider: appCheckCustomProvider,\n\n // Optional argument. If true, the SDK automatically refreshes App Check\n // tokens as needed.\n isTokenAutoRefreshEnabled: true \n});https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/appcheck-next/index/appcheck_initialize_custom_provider.js#L8-L21\n```\n\nWeb \n\n```javascript\nfirebase.initializeApp({\n // Your firebase configuration object\n});\n\nconst appCheck = firebase.appCheck();\nappCheck.activate(\n appCheckCustomProvider,\n\n // Optional argument. If true, the SDK automatically refreshes App Check\n // tokens as needed.\n true);https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/appcheck/index.js#L53-L63\n```\n| **Note:** The SDK will not automatically refresh App Check tokens by default. That functionality must be explicitly enabled by providing `true` as a second argument to `activate()` or by calling `firebase.appCheck().setTokenAutoRefreshEnabled(true)`. For more, see [the App Check reference docs](/docs/reference/js/firebase.appcheck.AppCheck).\n\nNext steps\n\nOnce the App Check library is installed in your app, deploy it.\n\nThe updated client app will begin sending App Check tokens along with every\nrequest it makes to Firebase, but Firebase products will not require the tokens\nto be valid until you enable enforcement in the App Check section of the\nFirebase console.\n\nMonitor metrics and enable enforcement\n\nBefore you enable enforcement, however, you should make sure that doing so won't\ndisrupt your existing legitimate users. On the other hand, if you're seeing\nsuspicious use of your app resources, you might want to enable enforcement\nsooner.\n\nTo help make this decision, you can look at App Check metrics for the\nservices you use:\n\n- [Monitor App Check request metrics](/docs/app-check/monitor-metrics) for Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity for iOS, Maps JavaScript API, and Places API (New).\n- [Monitor App Check request metrics for Cloud Functions](/docs/app-check/monitor-functions-metrics).\n\nEnable App Check enforcement\n\nWhen you understand how App Check will affect your users and you're ready to\nproceed, you can enable App Check enforcement:\n\n- [Enable App Check enforcement](/docs/app-check/enable-enforcement) for Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity for iOS, Maps JavaScript API, and Places API (New).\n- [Enable App Check enforcement for Cloud Functions](/docs/app-check/cloud-functions).\n\nUse App Check in debug environments\n\nIf, after you have registered your app for App Check, you want to run your\napp in an environment that App Check would normally not classify as valid,\nsuch as locally during development, or from a continuous integration (CI)\nenvironment, you can create a debug build of your app that uses the\nApp Check debug provider instead of a real attestation provider.\n\nSee [Use App Check with the debug provider in web apps](/docs/app-check/web/debug-provider)."]]
