欢迎参加我们将于 2022 年 10 月 18 日举办的 Firebase 峰会(线上线下同时进行),了解 Firebase 如何帮助您加快应用开发速度、满怀信心地发布应用并在之后需要时轻松地扩大应用规模。立即报名

Comience a usar App Check con reCAPTCHA v3 en aplicaciones web

Esta página le muestra cómo habilitar App Check en una aplicación web, utilizando el proveedor integrado reCAPTCHA v3. Cuando habilita App Check, ayuda a garantizar que solo su aplicación pueda acceder a los recursos de Firebase de su proyecto. Vea una descripción general de esta función.

reCAPTCHA v3 es un servicio sin costo. App Check también es compatible con reCAPTCHA Enterprise , un servicio pago con una cuota sin costo. Para conocer las diferencias entre reCAPTCHA v3 y reCAPTCHA Enterprise, consulte la comparación de características .

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

Si desea utilizar App Check con su propio proveedor personalizado, consulte Implementar un proveedor personalizado de App Check .

1. Configura tu proyecto de Firebase

  1. Agregue Firebase a su proyecto de JavaScript si aún no lo ha hecho.

  2. Registre su sitio para reCAPTCHA v3 y obtenga su clave de sitio y clave secreta de reCAPTCHA v3.

  3. Registre sus aplicaciones para usar App Check con el proveedor reCAPTCHA en la sección App Check de Firebase console. Deberá proporcionar la clave secreta que obtuvo en el paso anterior.

    Por lo general, debe registrar todas las aplicaciones de su proyecto, ya que una vez que habilite la aplicación para un producto de Firebase, solo las aplicaciones registradas podrán acceder a los recursos de back-end del producto.

  4. Opcional : en la configuración de registro de la aplicación, establezca un tiempo de vida (TTL) personalizado para los tokens de App Check emitidos por el proveedor. Puede establecer el TTL en cualquier valor entre 30 minutos y 7 días. Al cambiar este valor, tenga en cuenta las siguientes ventajas y desventajas:

    • Seguridad: los TTL más cortos brindan una mayor seguridad, ya que reducen la ventana en la que un atacante puede abusar de un token filtrado o interceptado.
    • Rendimiento: los TTL más cortos significan que su aplicación realizará la atestación con más frecuencia. Debido a que el proceso de atestación de la aplicación agrega latencia a las solicitudes de red cada vez que se realiza, un TTL breve puede afectar el rendimiento de su aplicación.
    • Cuota y costo: los TTL más cortos y la recertificación frecuente agotan su cuota más rápido y, para los servicios pagos, pueden costar más. Consulte Cuotas y límites .

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

2. Agregue la biblioteca App Check a su aplicación

Agregue Firebase a su aplicación web si aún no lo ha hecho. Asegúrese de importar la biblioteca App Check.

3. Inicializar verificación de aplicaciones

Agregue el siguiente código de inicialización a su aplicación antes de acceder a cualquier servicio de Firebase. Deberá pasar su clave de sitio reCAPTCHA, que creó en la consola reCAPTCHA, para activate() .

Web version 9

const { initializeApp } = require("firebase/app");
const { initializeAppCheck, ReCaptchaV3Provider } = require("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
});

Web version 8

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);

Próximos pasos

Una vez que la biblioteca App Check esté instalada en su aplicación, impleméntela.

La aplicación cliente actualizada comenzará a enviar tokens de verificación de aplicaciones junto con cada solicitud que haga a Firebase, pero los productos de Firebase no requerirán que los tokens sean válidos hasta que habilite la aplicación en la sección Verificación de aplicaciones de la consola de Firebase.

Supervise las métricas y habilite la aplicación

Sin embargo, antes de habilitar la aplicación, debe asegurarse de que hacerlo no interrumpa a sus usuarios legítimos existentes. Por otro lado, si observa un uso sospechoso de los recursos de su aplicación, es posible que desee habilitar la aplicación antes.

Para ayudarlo a tomar esta decisión, puede consultar las métricas de App Check para los servicios que utiliza:

Habilitar la aplicación de verificación de aplicaciones

Cuando comprenda cómo App Check afectará a sus usuarios y esté listo para continuar, puede habilitar la aplicación de App Check:

Usar App Check en entornos de depuración

Si, después de haber registrado su aplicación para App Check, desea ejecutar su aplicación en un entorno que App Check normalmente no clasificaría como válido, como localmente durante el desarrollo o desde un entorno de integración continua (CI), puede crear una compilación de depuración de su aplicación que usa el proveedor de depuración de App Check en lugar de un proveedor de atestación real.

Consulte Usar App Check con el proveedor de depuración en aplicaciones web .