Proteja recursos que no sean de Firebase con App Check en aplicaciones web

Puede proteger los recursos que no son de Firebase de su aplicación, como los backends autohospedados, con App Check. Para hacerlo, deberá hacer las dos cosas siguientes:

• Modifique su cliente de aplicación para enviar un token de verificación de aplicación junto con cada solicitud a su backend, como se describe en esta página.
• Modifique su backend para requerir un token de verificación de aplicaciones válido con cada solicitud, como se describe en Verificar tokens de verificación de aplicaciones desde un backend personalizado .

Antes de que empieces

Agregue App Check a su aplicación, utilizando el proveedor reCAPTCHA v3, el proveedor reCAPTCHA Enterprise o un proveedor personalizado .

Enviar tokens de verificación de aplicaciones con solicitudes de back-end

En su cliente de aplicación, antes de cada solicitud, obtenga un token de verificación de aplicación válido y vigente con appCheck().getToken() . La biblioteca App Check actualizará el token si es necesario.

Una vez que tenga un token válido, envíelo junto con la solicitud a su backend. Los detalles de cómo lograr esto dependen de usted, pero no envíe tokens de verificación de aplicaciones como parte de las URL , incluso en los parámetros de consulta, ya que esto los hace vulnerables a filtraciones e intercepciones accidentales. El siguiente ejemplo envía el token en un encabezado HTTP personalizado, que es el enfoque recomendado.

const { initializeAppCheck, getToken } = require('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.
};
index.js

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.
};
index.js