Web uygulamalarında App Check ile özel arka uç kaynaklarını koruma
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Uygulamanız için Google dışı özel arka uç kaynaklarını (ör. kendi kendine barındırılan arka ucunuz) korumak üzere App Check kullanabilirsiniz. Bunun için aşağıdakilerin ikisini de yapmanız gerekir:
- Uygulama istemcinizi, bu sayfada açıklandığı şekilde, arka uçunuza gönderilen her istekle birlikte bir App Check jetonu gönderecek şekilde değiştirin.
- Arka ucunuzu, Özel bir arka uçtan gelen App Check jetonlarını doğrulama bölümünde açıklandığı gibi, her istekte geçerli bir App Check jetonu gerektirecek şekilde değiştirin.
Başlamadan önce
reCAPTCHA Enterprise sağlayıcısını veya özel bir sağlayıcıyı kullanarak uygulamanıza App Check ekleyin.
Arka uç istekleriyle App Check jetonları gönderme
Uygulama istemcinizde, her istekten önce App Check
ile geçerli ve süresi dolmamış bir appCheck().getToken()
jetonu alın. App Check kitaplığı gerekirse jetonu yeniler.
Geçerli bir jetonunuz olduğunda, istekle birlikte arka ucunuza gönderin. Bunu nasıl yapacağınız size bağlıdır ancak URL'lerin bir parçası olarak App Check jetonları göndermeyin. Bu, sorgu parametreleri de dahil olmak üzere jetonların yanlışlıkla sızdırılmasına ve saldırıya uğramasına neden olur. Aşağıdaki örnekte, jetonun özel bir HTTP üstbilgisinde gönderildiği gösterilmektedir. Bu, önerilen yaklaşımdır.
Web
import { initializeAppCheck, getToken } from 'firebase/app-check';
const appCheck = initializeAppCheck(
app,
{ provider: provider } // ReCaptchaV3Provider or CustomProvider
);
const callApiWithAppCheckExample = async () => {
let appCheckTokenResponse;
try {
appCheckTokenResponse = await getToken(appCheck, /* forceRefresh= */ false);
} catch (err) {
// Handle any errors if the token was not retrieved.
return;
}
// Include the App Check token with requests to your server.
const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
headers: {
'X-Firebase-AppCheck': appCheckTokenResponse.token,
}
});
// Handle response from your backend.
};
Web
const callApiWithAppCheckExample = async () => {
let appCheckTokenResponse;
try {
appCheckTokenResponse = await firebase.appCheck().getToken(/* forceRefresh= */ false);
} catch (err) {
// Handle any errors if the token was not retrieved.
return;
}
// Include the App Check token with requests to your server.
const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
headers: {
'X-Firebase-AppCheck': appCheckTokenResponse.token,
}
});
// Handle response from your backend.
};
Tekrar koruması (beta)
Yeniden oynatma korumasını etkinleştirdiğiniz bir uç noktaya istekte bulunurken getToken()
yerine getLimitedUseToken()
kullanarak jeton alın:
import { getLimitedUseToken } from "firebase/app-check";
// ...
appCheckTokenResponse = await getLimitedUseToken(appCheck);
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-08-23 UTC.
[null,null,["Son güncelleme tarihi: 2025-08-23 UTC."],[],[],null,["You can use App Check to protect non-Google custom backend resources for\nyour app, like your own self-hosted backend. To do so, you'll need to do both of\nthe following:\n\n- Modify your app client to send an App Check token along with each request to your backend, as described on this page.\n- Modify your backend to require a valid App Check token with every request, as described in [Verify App Check tokens from a custom backend](/docs/app-check/custom-resource-backend).\n\nBefore you begin\n\nAdd App Check to your app, using either the\n[reCAPTCHA Enterprise provider](/docs/app-check/web/recaptcha-enterprise-provider)\nor a [custom provider](/docs/app-check/web/custom-provider).\n\nSend App Check tokens with backend requests\n\nIn your app client, before each request, get a valid, unexpired, App Check\ntoken with `appCheck().getToken()`. The App Check library will refresh the\ntoken if necessary.\n\nOnce you have a valid token, send it along with the request to your backend. The\nspecifics of how you accomplish this are up to you, but *don't send\nApp Check tokens as part of URLs*, including in query parameters, as this\nmakes them vulnerable to accidental leakage and interception. The following\nexample sends the token in a custom HTTP header, which is the recommended\napproach. \n\nWeb \n\n```javascript\nimport { initializeAppCheck, getToken } from 'firebase/app-check';\n\nconst appCheck = initializeAppCheck(\n app,\n { provider: provider } // ReCaptchaV3Provider or CustomProvider\n);\n\nconst callApiWithAppCheckExample = async () =\u003e {\n let appCheckTokenResponse;\n try {\n appCheckTokenResponse = await getToken(appCheck, /* forceRefresh= */ false);\n } catch (err) {\n // Handle any errors if the token was not retrieved.\n return;\n }\n\n // Include the App Check token with requests to your server.\n const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {\n headers: {\n 'X-Firebase-AppCheck': appCheckTokenResponse.token,\n }\n });\n\n // Handle response from your backend.\n};https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/appcheck-next/index/appcheck_nonfirebase.js#L8-L32\n```\n\nWeb \n\n```javascript\nconst callApiWithAppCheckExample = async () =\u003e {\n let appCheckTokenResponse;\n try {\n appCheckTokenResponse = await firebase.appCheck().getToken(/* forceRefresh= */ false);\n } catch (err) {\n // Handle any errors if the token was not retrieved.\n return;\n }\n\n // Include the App Check token with requests to your server.\n const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {\n headers: {\n 'X-Firebase-AppCheck': appCheckTokenResponse.token,\n }\n });\n\n // Handle response from your backend.\n};https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/appcheck/index.js#L68-L85\n```\n\nReplay protection (beta)\n\nWhen making a request to an endpoint for which you've enabled\n[replay protection](/docs/app-check/custom-resource-backend#replay-protection),\nacquire a token using `getLimitedUseToken()` instead of `getToken()`: \n\n import { getLimitedUseToken } from \"firebase/app-check\";\n\n // ...\n\n appCheckTokenResponse = await getLimitedUseToken(appCheck);"]]