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

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

  • Modifique el cliente de su 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 App Check válido con cada solicitud, como se describe en Verificar tokens de App Check desde un backend personalizado .

Antes de que empieces

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

Enviar tokens de verificación de aplicaciones con solicitudes de backend

En su aplicación cliente, 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 servidor. Los detalles específicos de cómo lograr esto dependen de usted, pero no envíe tokens de verificación de aplicaciones como parte de las URL , incluidos 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.

Web modular API

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

Web namespaced API

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

Protección de reproducción (beta)

Al realizar una solicitud a un punto final para el cual ha habilitado la protección de reproducción , adquiera un token usando getLimitedUseToken() en lugar de getToken() :

import { getLimitedUseToken } from "firebase/app-check";

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);