Protege recursos de backend personalizados con la Verificación de aplicaciones en apps web
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Puedes usar App Check para proteger los recursos de backend personalizados que no sean de Google de tu app, como tu propio backend autoalojado. Para ello, deberás hacer lo siguiente:
Modifica el cliente de la app para que envíe un token de App Check junto con cada solicitud
al backend, como se describe en esta página.
Envía tokens de App Check con solicitudes de backend
En el cliente de la app, antes de cada solicitud, obtén un token de App Check válido que no haya vencido y que incluya appCheck().getToken(). La biblioteca de App Check actualizará el
token si es necesario.
Una vez que tengas un token válido, envíalo junto con la solicitud al backend. Tú decides los detalles para lograr hacer esto, pero no envíes
tokens de App Check como parte de las URLs, incluidos los parámetros de consulta, ya que esto
los hace vulnerables a intercepciones y filtraciones accidentales. En el siguiente
ejemplo, se envía el token en un encabezado HTTP personalizado, que es el método
recomendado.
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.};
Cuando realices una solicitud a un extremo para el que habilitaste la
protección contra la repetición,
adquiere un token con getLimitedUseToken() en lugar de getToken():
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-09-05 (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);"]]