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:

Antes de que empieces

Agregue App Check a su aplicación, utilizando el proveedor reCAPTCHA v3 predeterminado 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.

Web versión 9

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

Web versión 8

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