Premiers pas avec App Check avec un fournisseur personnalisé dans les applications Web
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Cette page vous explique comment activer App Check dans une application Web à l'aide de votre fournisseur App Check personnalisé. Lorsque vous activez App Check, vous vous assurez que seule votre application peut accéder aux ressources Firebase de votre projet.
Si vous souhaitez utiliser App Check avec l'un des fournisseurs intégrés, consultez la documentation sur App Check avec reCAPTCHA Enterprise.
Créez un objet fournisseur App Check pour votre fournisseur personnalisé. Cet objet doit comporter une méthode getToken(), qui collecte toutes les informations requises par votre fournisseur App Check personnalisé comme preuve d'authenticité et les envoie à votre service d'acquisition de jetons en échange d'un jeton App Check. Le SDK App Check gère la mise en cache des jetons. Par conséquent, obtenez toujours un nouveau jeton dans votre implémentation de 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);});}};
Ajoutez le code d'initialisation suivant à votre application, avant d'accéder à un service 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);
Une fois la bibliothèque App Check installée dans votre application, déployez-la.
L'application cliente mise à jour commencera à envoyer des jetons App Check avec chaque requête qu'elle envoie à Firebase, mais les produits Firebase n'exigeront pas que les jetons soient valides tant que vous n'aurez pas activé l'application dans la section App Check de la console Firebase.
Surveiller les métriques et activer l'application
Toutefois, avant d'activer l'application, vous devez vous assurer que cela ne perturbera pas vos utilisateurs légitimes existants. En revanche, si vous constatez une utilisation suspecte des ressources de votre application, vous pouvez activer l'application plus tôt.
Pour vous aider à prendre cette décision, vous pouvez examiner les métriques App Check pour les services que vous utilisez :
Surveillez les métriques des requêtes App Check pour Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity pour iOS, l'API Maps JavaScript et l'API Places (nouveau).
Une fois que vous avez compris l'impact de App Check sur vos utilisateurs et que vous êtes prêt à continuer, vous pouvez activer l'application de App Check :
Activez l'application de App Check pour Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity pour iOS, l'API Maps JavaScript et l'API Places (nouveau).
Utiliser App Check dans les environnements de débogage
Si, après avoir enregistré votre application pour App Check, vous souhaitez l'exécuter dans un environnement que App Check ne classerait normalement pas comme valide (par exemple, localement pendant le développement ou à partir d'un environnement d'intégration continue (CI)), vous pouvez créer une version de débogage de votre application qui utilise le fournisseur de débogage App Check au lieu d'un véritable fournisseur d'attestation.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/30 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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)."]]