Comienza a usar la Verificación de aplicaciones mediante un proveedor personalizado en apps web

En esta página, se muestra cómo habilitar App Check en una app web mediante tu proveedor personalizado de App Check. Cuando habilitas App Check, ayudas a garantizar que solo la app pueda acceder a los recursos de Firebase de tu proyecto.

Si quieres usar App Check con uno de los proveedores integrados, consulta los documentos sobre App Check con reCAPTCHA Enterprise.

Antes de comenzar

1. Agrega la biblioteca App Check a tu app

Si aún no lo has hecho, agrega Firebase a la app web. Asegúrate de importar la biblioteca App Check.

2. Crea el objeto del proveedor de App Check

Crea un objeto del proveedor de App Check para tu proveedor personalizado. Este objeto debe tener un método getToken(), que recopila toda la información que tu proveedor personalizado de App Check requiere como prueba de autenticidad. Luego, la envía al servicio de adquisición de tokens a cambio de un token de App Check. El SDK de App Check controla el almacenamiento en caché de tokens, por lo que siempre debes obtener un token nuevo en la implementación de getToken().

Web

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

const appCheckCustomProvider = new CustomProvider({
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
});
appcheck_custom_provider.js

Web

const appCheckCustomProvider = {
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
};
index.js

3. Inicializa App Check

Agrega el siguiente código de inicialización a la aplicación antes de acceder a cualquier servicio de Firebase:

Web

import { initializeApp } from "firebase/app";
import { initializeAppCheck } from "firebase/app-check";

const app = initializeApp({
  // Your firebase configuration object
});

const appCheck = initializeAppCheck(app, {
  provider: appCheckCustomProvider,

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true    
});
appcheck_initialize_custom_provider.js

Web

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
appCheck.activate(
  appCheckCustomProvider,

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);
index.js

Próximos pasos

Una vez que la biblioteca de App Check esté instalada en la app, debes implementarla.

La app cliente actualizada comenzará a enviar tokens de App Check junto con cada solicitud que realice a Firebase, pero los productos de Firebase no requerirán que los tokens sean válidos hasta que habilites la aplicación forzosa en la sección de App Check de Firebase console.

Supervisa las métricas y habilita la aplicación forzosa

Sin embargo, antes de habilitar la aplicación forzosa, debes asegurarte de que esto no interrumpa a tus usuarios legítimos existentes. Por otro lado, si ves un uso sospechoso de los recursos de tu app, te convendrá habilitar la aplicación más pronto.

Para ayudarte a tomar esta decisión, puedes consultar las métricas de App Check para los servicios que usas:

Habilita la aplicación forzosa de App Check

Cuando comprendas cómo App Check afectará a los usuarios y tengas todo listo para continuar, puedes habilitar la aplicación forzosa de App Check:

Usa App Check en entornos de depuración

Si, después de registrar la app en App Check, quieres ejecutarla en un entorno que App Check no suele clasificar como válido, como de forma local durante el desarrollo, o desde un entorno de integración continua (CI), puedes crear una compilación de depuración de la app que use el proveedor de depuración de App Check, en lugar de un proveedor de certificación real.

Consulta Cómo usar App Check con el proveedor de depuración en apps web.