Web uygulamalarında reCAPTCHA v3 ile Uygulama Kontrolü'nü kullanmaya başlayın
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Bu sayfada, yerleşik reCAPTCHA v3 sağlayıcısını kullanarak bir web uygulamasında App Check özelliğinin nasıl etkinleştirileceği gösterilmektedir. App Check özelliğini etkinleştirdiğinizde, projenizin Firebase kaynaklarına yalnızca uygulamanızın erişebilmesini sağlarsınız. Bu özelliğe genel bakış.
reCAPTCHA v3'ün kullanıcılar tarafından görünmediğini unutmayın. reCAPTCHA v3 sağlayıcısı, kullanıcıların herhangi bir zamanda bir sorunu çözmesini gerektirmez. reCAPTCHA v3 belgelerini inceleyin.
Uygulamalarınızı, Firebase konsolunun App Check bölümündeki reCAPTCHA sağlayıcısıyla App Check kullanmak üzere kaydedin. Önceki adımda aldığınız gizli anahtarı sağlamanız gerekir.
Genellikle projenizin tüm uygulamalarını kaydetmeniz gerekir. Çünkü bir Firebase ürünü için zorunlu kılmayı etkinleştirdiğinizde yalnızca kayıtlı uygulamalar ürünün arka uç kaynaklarına erişebilir.
İsteğe bağlı: Uygulama kaydı ayarlarında, sağlayıcı tarafından verilen App Check jetonları için özel bir geçerlilik süresi (TTL) ayarlayın. TTL'yi 30 dakika ile 7 gün arasında herhangi bir değere ayarlayabilirsiniz. Bu değeri değiştirirken aşağıdaki dengelemeleri göz önünde bulundurun:
Güvenlik: Sızdırılmış veya müdahale edilmiş bir jetonun saldırgan tarafından kötüye kullanılabileceği süreyi kısalttığı için daha kısa TTL'ler daha güçlü güvenlik sağlar.
Performans: Daha kısa TTL'ler, uygulamanızın doğrulama işlemini daha sık gerçekleştireceği anlamına gelir. Uygulama onayı işlemi her gerçekleştirildiğinde ağ isteklerine gecikme eklediğinden kısa bir TTL, uygulamanızın performansını etkileyebilir.
Kota ve maliyet: Daha kısa TTL'ler ve sık yeniden onaylama, kotanızı daha hızlı tüketir ve ücretli hizmetlerde daha fazla maliyete neden olabilir.
Kotalar ve sınırlar bölümüne bakın.
Varsayılan TTL değeri olan 1 gün çoğu uygulama için uygundur. App CheckKitaplığın, TTL süresinin yaklaşık yarısında jetonları yenilediğini unutmayın.
Herhangi bir Firebase hizmetine erişmeden önce uygulamanıza aşağıdaki ilk kullanıma hazırlama kodunu ekleyin. reCAPTCHA konsolunda oluşturduğunuz reCAPTCHA site anahtarınızıactivate()'ye iletmeniz gerekir.
Web
import{initializeApp}from"firebase/app";import{initializeAppCheck,ReCaptchaV3Provider}from"firebase/app-check";constapp=initializeApp({// Your firebase configuration object});// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this// key is the counterpart to the secret key you set in the Firebase console.constappCheck=initializeAppCheck(app,{provider:newReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),// Optional argument. If true, the SDK automatically refreshes App Check// tokens as needed.isTokenAutoRefreshEnabled:true});
firebase.initializeApp({// Your firebase configuration object});constappCheck=firebase.appCheck();// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this// key is the counterpart to the secret key you set in the Firebase console.appCheck.activate('abcdefghijklmnopqrstuvwxy-1234567890abcd',// Optional argument. If true, the SDK automatically refreshes App Check// tokens as needed.true);
App Check kitaplığı uygulamanıza yüklendikten sonra dağıtın.
Güncellenen istemci uygulaması, Firebase'e yaptığı her istekle birlikte App Check jetonları göndermeye başlar. Ancak Firebase ürünleri, Firebase konsolunun App Check bölümünde zorunlu kılmayı etkinleştirene kadar jetonların geçerli olmasını gerektirmez.
Metrikleri izleme ve yaptırım uygulama
Ancak zorunlu kılmayı etkinleştirmeden önce, bu işlemin mevcut meşru kullanıcılarınızın hizmetten yararlanmasını engellemeyeceğinden emin olmanız gerekir. Diğer yandan, uygulama kaynaklarınızın şüpheli bir şekilde kullanıldığını görüyorsanız yaptırımı daha erken etkinleştirmek isteyebilirsiniz.
Bu kararı vermenize yardımcı olması için kullandığınız hizmetlerin App Check metriklerine bakabilirsiniz:
Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity for iOS, Maps JavaScript API ve Places API (Yeni) için App Check istek metriklerini izleyin.
App Check özelliğinin kullanıcılarınızı nasıl etkileyeceğini anladığınızda ve devam etmeye hazır olduğunuzda App Check zorunluluğunu etkinleştirebilirsiniz:
App Check zorunlu kılma özelliğini Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity for iOS, Maps JavaScript API ve Places API (Yeni) için etkinleştirin.
Cloud Functions için App Check zorunlu kılma özelliğini etkinleştirin.
Hata ayıklama ortamlarında App Check kullanma
Uygulamanızı App Check için kaydettikten sonra, uygulamanızı normalde App Check için geçerli olarak sınıflandırılmayacak bir ortamda (ör. geliştirme sırasında yerel olarak veya sürekli entegrasyon (CI) ortamında) çalıştırmak istiyorsanız uygulamanızın gerçek bir onay sağlayıcı yerine App Check hata ayıklama sağlayıcısını kullanan bir hata ayıklama sürümünü oluşturabilirsiniz.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2025-08-30 UTC."],[],[],null,["This page shows you how to enable App Check in a web app, using the built-in\nreCAPTCHA v3 provider. When you enable App Check, you help ensure that only\nyour app can access your project's Firebase resources. See an\n[Overview](/docs/app-check) of this feature.\n\n\u003cbr /\u003e\n\n| App Check also supports [reCAPTCHA Enterprise](/docs/app-check/web/recaptcha-enterprise-provider), which has more security features and fraud signals than reCAPTCHA v3. reCAPTCHA Enterprise gives you up to 10,000 assessments per month at no cost.\n|\n| \u003cbr /\u003e\n|\n| **You should use reCAPTCHA Enterprise for new integrations, and we strongly\n| recommend that developers of apps using reCAPTCHA v3 upgrade when possible.**\n|\n| To learn the differences between reCAPTCHA v3 and reCAPTCHA Enterprise, see the\n| [comparison of features](https://cloud.google.com/recaptcha-enterprise/docs/compare-versions).\n\n\u003cbr /\u003e\n\nNote that reCAPTCHA v3 is invisible to users. The reCAPTCHA v3 provider will not\nrequire users to solve a challenge at any time. See the\n[reCAPTCHA v3 documentation](https://developers.google.com/recaptcha/docs/v3).\n\nIf you want to use App Check with your own custom provider, see\n[Implement a custom App Check provider](/docs/app-check/web/custom-provider).\n\n1. Set up your Firebase project\n\n1. [Add Firebase to your JavaScript project](/docs/web/setup) if you haven't\n already done so.\n\n2. [Register your site for reCAPTCHA v3](https://www.google.com/recaptcha/admin/create) and get\n your reCAPTCHA v3 site key and secret key.\n\n3. Register your apps to use App Check with the reCAPTCHA provider in the\n [**App Check**](//console.firebase.google.com/project/_/appcheck) section of the\n Firebase console. You will need to provide the *secret key* you got in\n the previous step.\n\n You usually need to register all of your project's apps, because once you\n enable enforcement for a Firebase product, only registered apps will be able\n to access the product's backend resources.\n4. \u003cbr /\u003e\n\n \u003cbr /\u003e\n\n **Optional** : In the app registration settings, set a custom time-to-live\n (TTL) for App Check tokens issued by the provider. You can set the TTL\n to any value between 30 minutes and 7 days. When changing this value, be\n aware of the following tradeoffs:\n - Security: Shorter TTLs provide stronger security, because it reduces the window in which a leaked or intercepted token can be abused by an attacker.\n - Performance: Shorter TTLs mean your app will perform attestation more frequently. Because the app attestation process adds latency to network requests every time it's performed, a short TTL can impact the performance of your app.\n - Quota and cost: Shorter TTLs and frequent re-attestation deplete your quota faster, and for paid services, potentially cost more. See [Quotas \\& limits](/docs/app-check#quotas_limits).\n\n The default TTL of\n **1 day**\n is reasonable for most apps. Note that the App Check library refreshes\n tokens at approximately half the TTL duration.\n\n \u003cbr /\u003e\n\n \u003cbr /\u003e\n\n2. 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\n3. Initialize App Check\n\nAdd the following initialization code to your application, before you access any\nFirebase services. You will need to pass your reCAPTCHA *site key* , which you\ncreated in the reCAPTCHA console, to `activate()`. \n\nWeb \n\n```javascript\nimport { initializeApp } from \"firebase/app\";\nimport { initializeAppCheck, ReCaptchaV3Provider } from \"firebase/app-check\";\n\nconst app = initializeApp({\n // Your firebase configuration object\n});\n\n// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this\n// key is the counterpart to the secret key you set in the Firebase console.\nconst appCheck = initializeAppCheck(app, {\n provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),\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.js#L8-L23\n```\n\nWeb \n\n```javascript\nfirebase.initializeApp({\n // Your firebase configuration object\n});\n\nconst appCheck = firebase.appCheck();\n// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this\n// key is the counterpart to the secret key you set in the Firebase console.\nappCheck.activate(\n 'abcdefghijklmnopqrstuvwxy-1234567890abcd',\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#L6-L18\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)."]]
