Catch up on everthing we announced at this year's Firebase Summit. Learn more

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 dos acciones 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.
  • Modificar su base de requerir una aplicación válida Compruebe símbolo con cada solicitud, como se describe en Verificar la aplicación Verificar fichas de un motor de costumbre .

Antes de que empieces

Añadir App cheque a su aplicación, ya sea usando el predeterminado proveedor de reCAPTCHA v3 , o un proveedor personalizado .

Enviar tokens de App Check con solicitudes de backend

En el cliente de aplicación, antes de cada solicitud, obtener una vencido, App Comprobar válida, Token con appCheck().getToken() . La biblioteca de 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 se logra esto son de usted, pero no envían App Verificar fichas como parte de la URL, incluso en los parámetros de consulta, ya que esto los hace vulnerables a la fuga accidental e intercepción. El siguiente ejemplo envía el token en un encabezado HTTP personalizado, que es el enfoque recomendado.

Versión web 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.
};

Versión web 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.
};