Comienza a usar la Verificación de aplicaciones con reCAPTCHA v3 en apps web

En esta página, se muestra cómo habilitar App Check en una app web mediante el proveedor integrado de reCAPTCHA v3. Cuando habilitas App Check, ayudas a garantizar que solo la app pueda acceder a los recursos de Firebase de tu proyecto. Consulta una descripción general de esta función.

Ten en cuenta que reCAPTCHA v3 es invisible para los usuarios. El proveedor de reCAPTCHA v3 no requerirá que los usuarios resuelvan un desafío en ningún momento. Consulta la documentación de reCAPTCHA v3.

Si deseas usar App Check con tu propio proveedor personalizado, consulta Cómo implementar un proveedor personalizado de App Check.

1. Configura el proyecto de Firebase

  1. Si aún no lo has hecho, agrega Firebase al proyecto de JavaScript.

  2. Registra tu sitio en reCAPTCHA v3 y obtén la clave del sitio y la clave secreta de reCAPTCHA v3.

  3. Registra tus apps para que usen App Check con el proveedor de reCAPTCHA en la sección App Check de Firebase console. Deberás proporcionar la clave secreta que obtuviste en el paso anterior.

    Por lo general, debes registrar todas las apps de tu proyecto, ya que una vez que habilites la aplicación forzosa para un producto de Firebase, solo las apps registradas podrán acceder a los recursos de backend del producto.

  4. Opcional: En los parámetros de configuración del registro de la app, configura un tiempo de actividad (TTL) personalizado para los tokens de App Check que emite el proveedor. Puedes configurar el TTL en cualquier valor entre 30 minutos y 7 días. Cuando cambies este valor, ten en cuenta las siguientes compensaciones:

    • Seguridad: Los TTL más cortos proporcionan una mayor seguridad, ya que reducen el período en el que un atacante puede abusar de un token filtrado o interceptado.
    • Rendimiento: Si usas TTL más cortos, la app realizará la certificación con mayor frecuencia. Debido a que el proceso de certificación de la app agrega latencia a las solicitudes de red cada vez que se realiza, un TTL corto puede afectar el rendimiento de la app.
    • Cuota y costo: Los TTL más cortos y las certificaciones frecuentes agotan tu cuota con mayor rapidez. Además, en el caso de los servicios pagados, es posible que tengan un costo mayor. Consulta Cuotas y límites.

    El TTL predeterminado de 1 día es razonable para la mayoría de las apps. Ten en cuenta que la biblioteca de App Check actualiza los tokens aproximadamente en la mitad de la duración del TTL.

2. 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.

3. Inicializa App Check

Agrega el siguiente código de inicialización a la aplicación antes de acceder a cualquier servicio de Firebase. Deberás pasar la clave del sitio de reCAPTCHA, la cual creaste en la consola de reCAPTCHA, a activate().

Web

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

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

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

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

Web

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

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // 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.