Protege recursos que no son de Firebase mediante la Verificación de aplicaciones en aplicaciones web

Mediante App Check, puedes proteger recursos de la app que no son de Firebase, como los backends autoalojados. 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.
Modifica tu backend para que requiera un token de App Check válido con cada solicitud, como se describe en Verifica los tokens de App Check a partir de un backend personalizado.

Antes de comenzar

Agrega App Check a tu app con el proveedor de reCAPTCHA Enterprise o un proveedor personalizado.

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';

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

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 contra la repetición (beta)

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():

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

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);