Chroń niestandardowe zasoby backendu za pomocą App Check w aplikacji internetowej
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Możesz używać App Check do ochrony niestandardowych zasobów backendu nienależących do Google, takich jak własny backend hostowany samodzielnie. Aby to zrobić, musisz wykonać obie te czynności:
Zmodyfikuj klienta aplikacji, aby wysyłał App Check token wraz z każdym żądaniemApp Check do backendu, zgodnie z opisem na tej stronie.
W kliencie aplikacji przed każdym żądaniem uzyskaj prawidłowy, niewygasły token App Check z appCheck().getToken(). Biblioteka App Check w razie potrzeby odświeży token.
Gdy uzyskasz prawidłowy token, wyślij go wraz z żądaniem do backendu. Sposób, w jaki to zrobisz, zależy od Ciebie, ale nie wysyłaj tokenówApp Check jako części adresów URL, w tym w parametrach zapytania, ponieważ sprawia to, że są one podatne na przypadkowe wycieki i przechwytywanie. W tym przykładzie token jest wysyłany w niestandardowym nagłówku HTTP, co jest zalecanym rozwiązaniem.
Web
import{initializeAppCheck,getToken}from'firebase/app-check';constappCheck=initializeAppCheck(app,{provider:provider}// ReCaptchaV3Provider or CustomProvider);constcallApiWithAppCheckExample=async()=>{letappCheckTokenResponse;try{appCheckTokenResponse=awaitgetToken(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.constapiResponse=awaitfetch('https://yourbackend.example.com/yourApiEndpoint',{headers:{'X-Firebase-AppCheck':appCheckTokenResponse.token,}});// Handle response from your backend.};
constcallApiWithAppCheckExample=async()=>{letappCheckTokenResponse;try{appCheckTokenResponse=awaitfirebase.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.constapiResponse=awaitfetch('https://yourbackend.example.com/yourApiEndpoint',{headers:{'X-Firebase-AppCheck':appCheckTokenResponse.token,}});// Handle response from your backend.};
Wysyłając żądanie do punktu końcowego, w przypadku którego włączono ochronę przed powtórzeniem, uzyskaj token za pomocą getLimitedUseToken() zamiast getToken():
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-08-30 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);"]]