1. Introducción
Última actualización: 23/02/2023
¿Cómo puedes evitar el acceso no autorizado a tus recursos de Firebase?
Puedes usar la Verificación de aplicaciones de Firebase para evitar que clientes no autorizados accedan a tus recursos de backend. Para ello, requiere que las solicitudes entrantes incluyan una certificación que indique que provienen de tu app genuina y bloquea el tráfico que no tenga una certificación adecuada. La Verificación de aplicaciones de Firebase se basa en proveedores de certificación específicos de la plataforma para verificar la autenticidad del cliente: en el caso de las apps web, la Verificación de aplicaciones admite reCAPTCHA v3 y reCAPTCHA Enterprise como proveedores de certificación.
La Verificación de aplicaciones se puede usar para proteger las solicitudes a Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication con Identity Platform y en los backends que alojas tú mismo.
Qué compilarás
En este codelab, protegerás una aplicación de chat. Para ello, primero agregarás y, luego, aplicarás la Verificación de aplicaciones.
Qué aprenderás
- Cómo supervisar tu backend para detectar accesos no autorizados
- Cómo agregar la aplicación forzosa a Firestore y Cloud Storage
- Cómo ejecutar tu aplicación con un token de depuración para el desarrollo local
Requisitos
- El IDE o editor de texto que prefieras
- El administrador de paquetes npm, que suele incluirse con Node.js
- Firebase CLI instalado y configurado para funcionar con tu cuenta
- Una terminal o consola
- El navegador que elijas, como Chrome
- El código de muestra del codelab (consulta el siguiente paso del codelab para obtener el código)
2. Obtén el código de muestra
Clona el repositorio de GitHub del codelab desde la línea de comandos:
git clone https://github.com/firebase/codelab-friendlychat-web
Como alternativa, si no tienes Git instalado, puedes descargar el repositorio como archivo ZIP.
Importa la app de partida
En tu IDE, abre o importa el directorio 📁 appcheck-start del repositorio clonado. Este directorio 📁 appcheck-start contiene el código inicial del codelab, que será una app web de chat completamente funcional. El directorio 📁 appcheck tendrá el código completo del codelab.
3. Crea y configura un proyecto de Firebase
Crea un proyecto de Firebase
- Accede a Firebase.
- En Firebase console, haz clic en Agregar proyecto y, luego, asígnale el nombre FriendlyChat a tu proyecto de Firebase. Recuerda el ID de tu proyecto de Firebase.
- Anula la selección de Habilitar Google Analytics para este proyecto.
- Haz clic en Crear proyecto.
La aplicación que compilaremos usa productos de Firebase que están disponibles para apps web:
- Firebase Authentication para permitir que los usuarios accedan a tu app con facilidad
- Cloud Firestore para guardar datos estructurados en la nube y recibir notificaciones al instante cuando se modifiquen los datos
- Cloud Storage para Firebase, para guardar archivos en la nube
- Firebase Hosting para alojar y entregar tus recursos
- Firebase Cloud Messaging para enviar notificaciones push y mostrar notificaciones emergentes del navegador
- Firebase Performance Monitoring para recopilar datos de rendimiento de los usuarios de tu app
Algunos de estos productos necesitan una configuración especial o deben habilitarse mediante Firebase console.
Actualiza tu plan de precios de Firebase
Para usar Cloud Storage para Firebase, tu proyecto de Firebase debe tener el plan de precios de pago por uso (Blaze), lo que significa que está vinculado a una cuenta de Facturación de Cloud.
- Una cuenta de Facturación de Cloud requiere una forma de pago, como una tarjeta de crédito.
- Si es la primera vez que usas Firebase y Google Cloud, verifica si cumples con los requisitos para obtener un crédito de USD 300 y una cuenta de Facturación de Cloud de prueba gratuita.
- Si realizas este codelab como parte de un evento, pregúntale al organizador si hay créditos de Cloud disponibles.
Para actualizar tu proyecto al plan Blaze, sigue estos pasos:
- En Firebase console, selecciona la opción para actualizar tu plan.
- Selecciona el plan Blaze. Sigue las instrucciones en pantalla para vincular una cuenta de Facturación de Cloud a tu proyecto.
Si necesitas crear una cuenta de Facturación de Cloud como parte de esta actualización, es posible que debas volver al flujo de actualización en Firebase console para completarla.
Agrega una app web de Firebase al proyecto
- Haz clic en el ícono de Web
para crear una nueva app web de Firebase. - Registra la app con el sobrenombre Friendly Chat y, luego, marca la casilla junto a Configurar Firebase Hosting para esta app también. Haz clic en Registrar app.
- En el siguiente paso, verás un comando para instalar Firebase con npm y un objeto de configuración. Copiarás este objeto más adelante en el codelab, así que, por ahora, presiona Siguiente.
- Luego, verás una opción para instalar Firebase CLI. Si aún no lo has hecho, hazlo ahora con el comando
npm install -g firebase-tools. Luego, haga clic en Next. - Luego, verás una opción para acceder a Firebase y realizar la implementación en Firebase Hosting. Continúa y accede a Firebase con el comando
firebase login. Luego, haz clic en Ir a la consola. Realizarás la implementación en Firebase Hosting en un paso posterior.
Habilita el Acceso con Google para Firebase Authentication
Para permitir que los usuarios accedan a la aplicación web con sus Cuentas de Google, usaremos el método de acceso de Google.
Deberás habilitar el Acceso con Google:
- En Firebase console, busca la sección Build en el panel izquierdo.
- Haz clic en Authentication, en Get Started (si corresponde) y, luego, en la pestaña Sign-in method (o haz clic aquí para ir directamente allí).
- Habilita el proveedor de acceso de Google
- Establece el nombre público de tu app como Friendly Chat y elige un correo electrónico de asistencia del proyecto en el menú desplegable.
- Haga clic en Guardar.
Configura Cloud Firestore
La app web usa Cloud Firestore para guardar mensajes de chat y recibir mensajes nuevos.
Sigue estos pasos para configurar Cloud Firestore en tu proyecto de Firebase:
- En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Base de datos de Firestore.
- Haz clic en Crear base de datos.
- Deja el ID de la base de datos establecido en
(default). - Selecciona una ubicación para tu base de datos y, luego, haz clic en Siguiente.
Para una app real, debes elegir una ubicación que esté cerca de tus usuarios. - Haz clic en Iniciar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app públicamente sin agregar reglas de seguridad para tu base de datos. - Haz clic en Crear.
Configura Cloud Storage para Firebase
La app web usa Cloud Storage para Firebase para almacenar, subir y compartir fotos.
Sigue estos pasos para configurar Cloud Storage para Firebase en tu proyecto de Firebase:
- En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Almacenamiento.
- Haz clic en Comenzar.
- Selecciona una ubicación para tu bucket de Storage predeterminado.
Los buckets deUS-WEST1,US-CENTRAL1yUS-EAST1pueden aprovechar el nivel “Siempre gratis” de Google Cloud Storage. Los buckets de todas las demás ubicaciones siguen los precios y el uso de Google Cloud Storage. - Haz clic en Iniciar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app públicamente sin agregar reglas de seguridad para tu bucket de almacenamiento. - Haz clic en Crear.
4. Configura Firebase
Desde el directorio appcheck-start, llama al siguiente comando:
firebase use --add
Cuando se te solicite, selecciona el ID de tu proyecto y, luego, asígnale un alias. Para este proyecto, puedes asignar un alias de default. A continuación, deberás configurar tu proyecto local para que funcione con Firebase.
- Ve a la configuración del proyecto en Firebase console.
- En la tarjeta "Tus apps", selecciona el sobrenombre de la app para la que necesitas un objeto de configuración.
- Selecciona Config en el panel de fragmentos del SDK de Firebase.
- Copia el fragmento del objeto de configuración y, luego, agrégalo a
appcheck-start/hosting/src/firebase-config.js. En el resto del codelab, se supone que la variable se llama config.
firebase-config.js
const config = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.firebasestorage.app",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
Desde el mismo directorio appcheck-start, llama a lo siguiente:
firebase experiments:enable webframeworks
Esto habilita la compatibilidad con el framework web con el que se compiló este proyecto.
Ya está todo listo para ejecutar tu proyecto y probar que el proyecto predeterminado funcione.
5. Prueba la app sin la Verificación de aplicaciones
Ahora que tienes configurada la app y el SDK, intenta usarla como se diseñó originalmente. Primero, instala todas las dependencias. Desde la terminal, navega al directorio appcheck-start/hosting. Dentro de ese directorio, ejecuta npm install. Esto recupera todas las dependencias para que funcione tu proyecto. Para iniciar la app en su estado actual, puedes ejecutar firebase serve. La app te pedirá que accedas con una Cuenta de Google. Hazlo y, luego, intenta publicar algunos mensajes de chat y fotos en el chat.
Ahora que lo probaste de forma local, es hora de verlo en producción. Ejecuta firebase deploy para implementar la aplicación web en la Web. Esta parte es un paso fundamental para demostrar cómo funciona la Verificación de aplicaciones en el mundo real, ya que requiere que se configure un dominio para el proveedor de certificación de reCAPTCHA Enterprise.
Con suerte, estás experimentando la función predeterminada que proporciona la app. Publicar mensajes de chat y todo lo que solo se debe hacer desde una app como esta La desventaja del estado actual es que cualquier persona que tenga la configuración de tu app del paso anterior puede acceder a tus recursos de backend. De todas formas, deben cumplir con las reglas de seguridad que establecen tus sistemas de Firestore y Cloud Storage, pero, de lo contrario, pueden consultar, almacenar y acceder a los datos almacenados allí.
En los próximos pasos, harás lo siguiente:
- Registrar para la Verificación de aplicaciones
- Valida la aplicación
- Cómo comenzar a aplicar reglas
6. Cómo activar la Verificación de aplicaciones y la aplicación forzosa
Comencemos por obtener una clave de reCAPTCHA Enterprise para tu proyecto y agregarla a la Verificación de aplicaciones. Para comenzar, visita la sección reCAPTCHA Enterprise de la consola de Google Cloud. Selecciona tu proyecto y, luego, se te solicitará que habilites la API de reCAPTCHA Enterprise. Habilita la API y espera unos minutos hasta que se complete. Luego, haz clic en Crear clave junto a Claves empresariales. Luego, en esta sección, especifica un nombre visible y selecciona una clave de tipo Website. Debes especificar los dominios en los que se aloja tu app. Como planeas alojarlo en Firebase Hosting, usa el nombre de host predeterminado, que suele ser ${YOUR_PROJECT_ID}.web.app. Puedes encontrar tu dominio de hosting en la sección Hosting de Firebase console. Después de completar esta información, presiona Listo y Crear clave.
Una vez que se complete, verás un ID en la parte superior de la página Detalles de la clave.
Continúa y copia este ID en el portapapeles. Esta es la clave que usas para la Verificación de apps. A continuación, visita la sección Verificación de aplicaciones de Firebase console y haz clic en Comenzar. Luego, haz clic en Registrar y, luego, en reCAPTCHA Enterprise y coloca el ID copiado en el cuadro de texto de la clave de sitio de reCAPTCHA Enterprise. Deja el resto de la configuración con los valores predeterminados. Tu página de Verificación de apps debería verse de la siguiente manera:
Solicitudes no verificadas y no aplicadas
Ahora que tienes una clave registrada en Firebase console, vuelve a ejecutar tu sitio en el navegador. Para ello, ejecuta firebase serve. Ahora tienes la app web ejecutándose de forma local y puedes volver a realizar solicitudes al backend de Firebase. Como las solicitudes se realizan en el backend de Firebase, la Verificación de aplicaciones las supervisa, pero no se aplican. Si quieres ver el estado de las solicitudes que se reciben, puedes visitar la sección Cloud Firestore en la pestaña APIs de la página Verificación de aplicaciones en Firebase console. Como aún no configuraste el cliente para usar la Verificación de aplicaciones, deberías ver algo similar a lo siguiente:
El backend recibe solicitudes 100% no verificadas. Esta pantalla es útil, ya que muestra que casi todas las solicitudes de los clientes provienen de clientes que no tienen integrada la Verificación de aplicaciones.
Este panel puede indicar algunas cosas. Lo primero que puede indicar es si todas tus apps cliente ejecutan la versión más reciente del cliente. Si es así, puedes aplicar la Verificación de aplicaciones de forma segura sin preocuparte por desactivar el acceso de un cliente genuino de tu aplicación. Esto también te puede indicar cuántos intentos de acceso a tu backend se realizaron sin provenir de tu app. Es posible que se trate de usuarios que consultan tu backend directamente sin tu conocimiento. Como puedes ver que las solicitudes no están verificadas, es hora de ver qué sucedería con aquellos usuarios que podrían tener una solicitud no verificada en tu backend antes de continuar con la verificación de sus solicitudes.
Solicitudes no verificadas y aplicadas
Continúa y presiona el botón Aplicar en la pantalla anterior y, luego, vuelve a presionar Aplicar si se te solicita.
Esto comenzará a aplicar la Verificación de aplicaciones, que ahora bloqueará las solicitudes a tus servicios de backend que no se verifiquen a través del proveedor de certificación que elijas (en este caso, reCAPTCHA Enterprise). Regresa a la app web en ejecución, que debería estar ejecutándose en http://localhost:5000. Cuando actualizas la página y tratas de obtener datos de la base de datos, no sucede nada. Si abres la consola de Chrome para leer los errores, deberías ver algo similar a lo siguiente:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Esto significa que la Verificación de aplicaciones bloqueó las solicitudes que no pasaron un token de certificación válido en sus solicitudes a tus recursos de Firebase. Por el momento, puedes desactivar la aplicación de la Verificación de aplicaciones. En la siguiente sección, analizarás cómo agregar la Verificación de aplicaciones de reCAPTCHA Enterprise al ejemplo de chat amigable.
7. Agrega la clave de reCAPTCHA Enterprise al sitio
Agregaremos la clave empresarial a tu aplicación. Primero, abre hosting/src/firebase-config.js y agrega tu clave de reCAPTCHA Enterprise al siguiente fragmento de código:
const reCAPTCHAEnterpriseKey = {
// Replace with your recaptcha enterprise site key
key: "Replace with your recaptcha enterprise site key"
};
Una vez que esto se complete, abre hosting/src/index.js y, en la línea 51, agregarás una importación de firebase-config.js para recuperar tu clave de reCAPTCHA y también importar la biblioteca de Verificación de aplicaciones para que puedas trabajar con el proveedor de reCAPTCHA Enterprise.
// add from here
import {
initializeAppCheck,
ReCaptchaEnterpriseProvider,
} from 'firebase/app-check';
// to here
// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
Luego, en la siguiente línea, crearás una función para configurar la Verificación de aplicaciones. La función primero verificará si estás en un entorno de desarrollo y, de ser así, imprimirá un token de depuración que puedes usar para el desarrollo local.
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
}
// to here
Ahora es momento de inicializar la Verificación de aplicaciones para que funcione con el proveedor que seleccionaste; en este caso, reCAPTCHA Enterprise. Luego, también te recomendamos que actualices automáticamente tu token de Verificación de aplicaciones en segundo plano, lo que evitaría cualquier tipo de demora en la interacción del usuario con tu servicio en caso de que su token de Verificación de aplicaciones esté inactivo.
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
// add from here
// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
// to here
}
Por último, una vez que te asegures de que la app esté inicializada, deberás llamar a la función setupAppCheck que acabas de crear. En la parte inferior del archivo hosting/src/index.js, agrega la llamada al método que agregaste recientemente.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
Primero, realiza pruebas de forma local
Primero, prueba tu aplicación de forma local. Si aún no publicas la aplicación de forma local, ejecuta firebase serve. Deberías notar que la aplicación aún no se carga de forma local. Esto se debe a que solo registraste tu dominio de Firebase con el proveedor de certificación de reCAPTCHA y no con el dominio localhost. Nunca debes registrar localhost como un dominio aprobado, ya que esto permite que los usuarios accedan a tus backends restringidos desde una aplicación que se ejecuta de forma local en su máquina. En cambio, como configuraste self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, te recomendamos que busques en la consola de JavaScript una línea que se vea de la siguiente manera:
App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.
Deberás tomar el token de depuración proporcionado (en el caso del ejemplo, es 55183c20-de61-4438-85e6-8065789265be) y conectarlo en la configuración de la Verificación de aplicaciones en el menú ampliado de tu app.
Asigna al token un nombre único que puedas recordar y haz clic en Guardar. Esta opción te permite usar un token generado por el cliente con tu app, que es una alternativa más segura que generar un token de depuración y, luego, incorporarlo en tu aplicación. Si incorporas un token en la app, es posible que se distribuya accidentalmente a los usuarios finales, y estos podrían aprovecharlo para eludir tus verificaciones. Si deseas distribuir un token de depuración, por ejemplo, en un entorno de CI, lee esta documentación para obtener más información sobre cómo hacerlo.
Una vez que tengas el token de depuración registrado en Firebase console, podrás volver a habilitar la aplicación de App Check y probar que el contenido de la app se cargue de forma local llamando a firebase serve desde la terminal. Deberías ver que los datos ingresados anteriormente se publican en la versión local de la aplicación web. Deberías seguir viendo el mensaje con el token de depuración impreso en la consola.
Pruébala en producción
Una vez que te asegures de que App Check funcione de manera local, implementa la aplicación web en producción. Vuelve a llamar a firebase deploy desde la terminal y vuelve a cargar la página. De esta manera, se empaquetará tu aplicación web para que se ejecute en Firebase Hosting. Una vez que tu aplicación esté alojada en Firebase Hosting, intenta visitarla en ${YOUR_PROJECT_ID}.web.app. Puedes abrir la consola de JavaScript y ya no deberías ver el token de depuración impreso allí, y deberías ver que se cargan los chats en tu proyecto. Además, después de interactuar con la aplicación durante unos minutos, puedes visitar la sección de la Verificación de aplicaciones de Firebase console y validar que las solicitudes a tu aplicación se hayan cambiado para que todas se verifiquen.
8. ¡Felicitaciones!
¡Felicitaciones! Agregaste correctamente la Verificación de aplicaciones de Firebase a una aplicación web.
Configuraste Firebase console para controlar un token de reCAPTCHA Enterprise para entornos de producción y hasta configuraste tokens de depuración para el desarrollo local. De esta manera, te aseguras de que tus apps puedan seguir accediendo a los recursos de Firebase desde clientes aprobados y evitas que se produzca actividad fraudulenta desde tu aplicación.
Próximos pasos
Consulta la siguiente documentación para agregar la Verificación de aplicaciones de Firebase a los siguientes productos:
- Habilita la aplicación forzosa en Cloud Functions
- Verifica los tokens de la Verificación de aplicaciones en backends personalizados