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

Si aún no lo has hecho, agrega Firebase al proyecto de JavaScript.
Registra tu sitio en reCAPTCHA v3 y obtén la clave del sitio y la clave secreta de reCAPTCHA v3.
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.
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.

Establece la configuración avanzada (opcional)

Cuando un usuario visita tu app web, reCAPTCHA v3 evalúa el nivel de riesgo que representa la interacción del usuario y devuelve una puntuación entre 0.0 y 1.0. Una puntuación de 1.0 indica que es muy probable que se trate de una interacción positiva, mientras que una puntuación de 0.0 indica que es muy probable que se trate de un bot. La App Check te permite configurar un umbral de riesgo de la app para que puedas ajustar tu tolerancia a este riesgo.

En la mayoría de los casos de uso, se recomienda el valor de umbral predeterminado de 0.5. Si tu caso de uso requiere ajustes, puedes configurarlo en la sección App Check de Firebase console para cada una de tus apps web.

Detalles

La App Check usa el umbral de riesgo de la app que configuraste como la puntuación mínima de reCAPTCHA v3 que se requiere para que una interacción del usuario se considere legítima. Se rechazarán todas las puntuaciones de reCAPTCHA v3 que sean estrictamente inferiores al umbral de riesgo de la app que configuraste. Cuando ajustes el umbral de riesgo de la app, ten en cuenta lo siguiente:

Para supervisar la distribución de la puntuación de reCAPTCHA v3 de tu app web, visita la Consola del administrador de reCAPTCHA y selecciona el sitio correspondiente a tu app web.
Si tienes una tolerancia al riesgo de la app baja, mueve el control deslizante hacia la izquierda para aumentar el umbral de riesgo de la app.
- No se recomienda un valor de 1.0, ya que este parámetro de configuración también puede denegar el acceso a usuarios legítimos que no cumplan con este alto umbral de confianza.
Advertencia: Antes de aumentar el umbral de riesgo de la app, debes considerar inhabilitar temporalmente la aplicación de la protección de la Verificación de aplicaciones para todos los servicios que actualmente la aplican y, así, evitar interrumpir a los usuarios legítimos. Antes de reanudar la aplicación, debes supervisar las métricas de solicitudes de la Verificación de aplicaciones para verificar que no se haya interrumpido el tráfico.
Si tienes una tolerancia al riesgo de la app alta, mueve el control deslizante hacia la derecha para disminuir el umbral de riesgo de la app.
- No se recomienda un valor de 0.0, ya que este parámetro de configuración inhabilita la protección contra abusos.

Consulta la documentación de reCAPTCHA v3 para obtener más detalles.

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:

Supervisa las métricas de solicitudes App Check para Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity para iOS, la API de Maps JavaScript y la API de Places (nueva).
Supervisa las métricas de solicitudes de App Check para Cloud Functions.

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:

Habilita la aplicación forzosa de App Check para Firebase AI Logic, Data Connect, Realtime Database, Cloud Firestore, Cloud Storage, Authentication, Google Identity para iOS, la API de Maps JavaScript y la API de Places (nueva).
Habilita la aplicación forzosa de App Check para Cloud Functions.

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.