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

Mediante la Verificación de aplicaciones, 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 Verificación de aplicaciones junto con cada solicitud al backend, como se describe en esta página.
Modifica tu backend para que requiera un token válido de Verificación de aplicaciones con cada solicitud, como se describe en Verifica los tokens de la Verificación de aplicaciones en un backend personalizado.

Antes de comenzar

Agrega la Verificación de aplicaciones a tu app a través del proveedor de reCAPTCHA Enterprise o un proveedor personalizado.

Envía tokens de la Verificación de aplicaciones con solicitudes de backend

En el cliente de la app, antes de cada solicitud, obtén un token válido de la Verificación de aplicaciones que no haya expirado y que incluya appCheck().getToken(). La biblioteca de la Verificación de aplicaciones actualizará el token de ser 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 la Verificación de aplicaciones como parte de las URL, 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);