1. Introducción
Última actualización: 23/2/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 los clientes no autorizados accedan a tus recursos de backend. Para ello, solicita que las solicitudes entrantes se adjunten con una certificación que indique que la solicitud proviene de tu app genuina y bloquea el tráfico que no tiene 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 backends que alojes tú mismo.
Qué compilarás
En este codelab, agregarás primero la Verificación de aplicaciones y, luego, la aplicarás para proteger una aplicación de chat.
Qué aprenderás
- Cómo supervisar tu backend para detectar accesos no autorizados
- Cómo agregar una aplicación forzosa a Firestore y Cloud Storage
- Cómo ejecutar tu aplicación con un token de depuración para desarrollo local
Requisitos
- El IDE o el editor de texto que prefieras.
- El administrador de paquetes npm, que suele incluir Node.js
- Tener instalado y configurado Firebase CLI para que funcione con tu cuenta
- Una terminal/consola
- Un navegador de tu elección, como Chrome
- El código de muestra del codelab (consulta el siguiente paso del codelab para ver cómo 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 un archivo ZIP.
Importa la app de partida
Con el IDE, abre o importa el directorio HOWMANY appcheck-start del repositorio clonado. El directorio °appcheck-start contiene el código inicial para el codelab, que será una app web de chat completamente funcional. El directorio °appcheck tendrá el código completo para el 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 asígnale el nombre FriendlyChat a tu proyecto de Firebase. Recuerda el ID de tu proyecto de Firebase.
- Desmarca la opción Habilitar Google Analytics para este proyecto.
- Haz clic en Crear proyecto.
La aplicación que vamos a compilar usa los productos de Firebase que están disponibles para las aplicaciones web:
- Firebase Authentication permite que los usuarios accedan a tu app con facilidad.
- Cloud Firestore para guardar datos estructurados en la nube y recibir notificaciones instantáneas cuando los datos cambian
- Cloud Storage para Firebase, para guardar archivos en la nube
- Firebase Hosting para alojar y entregar tus activos.
- Firebase Cloud Messaging para enviar notificaciones push y mostrar notificaciones emergentes del navegador
- Firebase Performance Monitoring para recopilar datos de rendimiento de los usuarios sobre tu app.
Algunos de estos productos necesitan una configuración especial o se deben habilitar mediante Firebase console.
Agrega una app web de Firebase al proyecto
- Haz clic en el ícono web
para crear una nueva aplicación web de Firebase. - Registra la app con el sobrenombre Friendly Chat y, luego, marca la casilla junto a Configurar Firebase Hosting para esta app. 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. Por ahora, presiona Siguiente.
- Luego, verás una opción para instalar Firebase CLI. Si aún no lo instalaste, 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. Accede a Firebase con el comando
firebase loginy, luego, haz clic en Continuar 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 app web con sus Cuentas de Google, usaremos el método de Acceso con Google.
Deberás habilitar el Acceso con Google:
- En Firebase console, busca la sección Build en el panel izquierdo.
- Haz clic en Authentication, luego en Get Started si corresponde y, por último, en la pestaña Sign-in method (o haz clic aquí para ir directamente allí).
- Habilitar el proveedor de Acceso con Google
- Configura el nombre público de tu app como Friendly Chat y elige un correo electrónico de asistencia del proyecto en el menú desplegable.
- Haz clic en Guardar.
Habilite Cloud Firestore
La aplicación web usa Cloud Firestore para guardar mensajes de chat y recibir mensajes nuevos.
Deberás habilitar Cloud Firestore:
- En la sección Compilación de Firebase console, haz clic en Base de datos de Firestore.
- Haz clic en Crear base de datos en el panel de Cloud Firestore.
- Selecciona la opción Comenzar en modo de prueba y, luego, haz clic en Siguiente después de leer la renuncia de responsabilidad sobre las reglas de seguridad.
El modo de prueba garantiza que puedas escribir con libertad en la base de datos durante el desarrollo. Ya tienes reglas de seguridad escritas en el código de partida. Las usarás para este codelab.
- Configura la ubicación en la que se almacenan tus datos de Cloud Firestore. Puedes dejar esta opción con la configuración predeterminada o elegir una región cercana. Haz clic en Habilitar para aprovisionar Firestore.
Habilite Cloud Storage
La aplicación web usa Cloud Storage para Firebase con el objetivo de almacenar, subir y compartir fotos.
Deberás habilitar Cloud Storage:
- En la sección Compilación de Firebase console, haz clic en Almacenamiento.
- Si el botón Comenzar no aparece, significa que Cloud Storage ya está habilitado y no necesitas seguir los pasos que se indican a continuación.
- Haz clic en Get Started.
- Selecciona la opción Comenzar en modo de prueba y, luego, haz clic en Siguiente después de leer la renuncia de responsabilidad sobre las reglas de seguridad.
Con las reglas de seguridad predeterminadas, cualquier usuario autenticado puede escribir lo que sea en Cloud Storage. Más adelante en este codelab, implementaremos las reglas de seguridad que ya se escribieron.
- La ubicación de Cloud Storage está preseleccionada con la misma región que elegiste para tu base de datos de Cloud Firestore. Haz clic en Listo para completar la configuración.
4. Configura Firebase
Desde el directorio appcheck-start, llama a lo siguiente:
firebase use --add
Cuando se te solicite, selecciona el ID del proyecto y asígnale un alias a tu proyecto de Firebase. Para este proyecto, simplemente puedes asignar un alias default. A continuación, deberás configurar tu proyecto local para trabajar con Firebase.
- Ve a la configuración de tu 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 asume 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.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
Desde el mismo directorio de appcheck-start, llama al siguiente comando:
firebase experiments:enable webframeworks
Esto habilita la compatibilidad con el framework web con la que se compiló este proyecto.
Ya deberíamos estar listos para ejecutar tu proyecto y probar que el proyecto predeterminado funcione.
5. Prueba la app sin la Verificación de aplicaciones
Ahora que configuraste tu aplicación y su SDK está configurado, intenta usar la aplicación 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. De esta manera, se recuperan todas las dependencias para que tu proyecto funcione. Para iniciar la app en su estado actual, puedes ejecutar firebase serve. Se te solicitará que accedas con una Cuenta de Google y, luego, intenta publicar algunos mensajes 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 capacidad predeterminada que proporciona la app. Publicar mensajes de chat y todo lo que solo debería hacerse desde una app como esta La desventaja del estado actual es que cualquier persona con la configuración de tu app del paso anterior pueda acceder a tus recursos de backend. Todavía deben obedecer las reglas de seguridad que implementan los sistemas de Firestore y Cloud Storage, pero, por lo demás, aún pueden consultar y almacenar los datos almacenados allí, y acceder a ellos.
En los próximos pasos, harás lo siguiente:
- Registrar para la Verificación de aplicaciones
- Valida la aplicación
- Comienza a aplicar reglas
6. Activa la Verificación de aplicaciones y la aplicación forzosa
Primero, elige una clave de reCAPTCHA Enterprise para tu proyecto y agrégala a la Verificación de aplicaciones. Primero, 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 finalice. 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 Sitio web. Debes especificar los dominios en los que se aloja tu app. Dado que planeas alojar esto en Firebase Hosting, usarás el nombre de hosting predeterminado que, por lo general, es ${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.
Cuando se complete, verás un ID en la parte superior de la página Key Details.
Copia este ID en el portapapeles. Esta es la clave que usarás para la Verificación de aplicaciones. Luego, visita la sección Verificación de aplicaciones de Firebase console y haz clic en Comenzar. Haz clic en Registrar y, luego, en reCAPTCHA Enterprise. Luego, coloca el ID copiado en el cuadro de texto de la clave del sitio de reCAPTCHA Enterprise. Deja el resto de la configuración con sus valores predeterminados. La página de Verificación de aplicaciones 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 ejecutando firebase serve. Aquí tienes la app web ejecutándose de forma local y puedes comenzar a realizar solicitudes en el backend de Firebase nuevamente. Debido a que las solicitudes se envían al backend de Firebase, la Verificación de aplicaciones las supervisa, pero no se aplica de manera forzosa. Si deseas ver el estado de las solicitudes que llegan, puedes visitar la sección Cloud Firestore en la pestaña APIs de la página de la Verificación de aplicaciones en Firebase console. Como aún no configuraste el cliente para que use la Verificación de aplicaciones, deberías ver algo similar a lo siguiente:
El backend tiene un 100% de solicitudes sin verificar que provienen. Esta pantalla es útil, ya que muestra que casi todas las solicitudes de 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 están ejecutando la versión más reciente del cliente. Si es así, puedes aplicar la Verificación de aplicaciones de forma segura sin preocuparte de desactivar el acceso para un cliente genuino de tu aplicación. Otra cosa que esto puede indicarte es la cantidad de intentos de acceso a tu backend que llegaron sin venir de tu app. Pueden ser usuarios que están consultando tu backend directamente sin tu conocimiento. Como puedes ver que las solicitudes no están verificadas, es momento de ver qué sucede con los usuarios que podrían tener una solicitud no verificada en tu backend antes de pasar a verificar sus solicitudes.
Solicitudes no verificadas y con aplicación forzosa
Presiona el botón Aplicar de la pantalla anterior y, luego, vuelve a presionar Aplicar si se te solicita.
Esta acción comenzará a aplicar la Verificación de aplicaciones y bloqueará las solicitudes a tus servicios de backend que no se verifiquen a través del proveedor de certificación elegido (en este caso, reCAPTCHA Enterprise). Regresa a la app web en ejecución que debería ejecutarse 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.
Esta es la Verificación de aplicaciones que bloquea las solicitudes que no pasaron un token de certificación válido en las solicitudes a tus recursos de Firebase. Por el momento, puedes desactivar la aplicación forzosa de la Verificación de aplicaciones y, en la siguiente sección, examinarás cómo agregar la Verificación de aplicaciones de reCAPTCHA Enterprise al ejemplo de Friendly Chat.
7. Agregar 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 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ás la biblioteca de la Verificación de aplicaciones para poder 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 línea siguiente, crearás una función para configurar la Verificación de aplicaciones. La función primero comprobará si estás en un entorno de desarrollo y, de ser así, imprimirá un token de depuración que puedas 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 el momento de inicializar la Verificación de aplicaciones para que funcione con el proveedor que seleccionaste. En este caso, es reCAPTCHA Enterprise. Luego, también recomendamos actualizar automáticamente el token de la Verificación de aplicaciones en segundo plano para evitar cualquier tipo de retraso por parte del usuario que interactúe con el servicio en caso de que el token de la Verificación de aplicaciones se haya obsoleto.
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 se inicialice la app, 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();
Realiza pruebas locales primero
Prueba tu aplicación de forma local primero. Si aún no entregas la aplicación de manera 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 a los usuarios acceder a tus backends restringidos desde una aplicación que se ejecuta localmente en su máquina. En cambio, como configuraste self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, te recomendamos que busques en tu Consola de JavaScript una línea similar a la siguiente:
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 de ejemplo, 55183c20-de61-4438-85e6-8065789265be) y conectarlo a la configuración de la Verificación de aplicaciones en el menú ampliado de tu app.
Asígnale al token un nombre único que no vayas a olvidar y haz clic en Save. 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 e incorporarlo a tu aplicación. Si incorporas un token en la app, es posible que se distribuya de forma accidental a los usuarios finales y que esos usuarios finales puedan explotarlo y así evitar los controles. 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 distribuirlo.
Una vez que tengas el token de depuración registrado en Firebase console, puedes volver a habilitar la aplicación forzosa de la Verificación de aplicaciones 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 entregan a 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.
Probar en producción
Cuando estés seguro de que la Verificación de aplicaciones funciona de forma local, implementa la aplicación web en producción. Desde la terminal, vuelve a llamar a firebase deploy y vuelve a cargar la página. Esto 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. Ya no deberías ver el token de depuración impreso allí, y los chats deberían cargarse en tu proyecto. Además, después de interactuar con la aplicación por un momento, puedes visitar la sección Verificación de aplicaciones de Firebase console y validar que las solicitudes a tu aplicación se hayan verificado.
8. ¡Felicitaciones!
Felicitaciones, agregó correctamente la Verificación de aplicaciones de Firebase a una aplicación web.
Puedes configurar Firebase console para que administre un token de reCAPTCHA Enterprise en entornos de producción y, además, configurar tokens de depuración para el desarrollo local. Esto garantiza que tus apps puedan seguir accediendo a los recursos de Firebase de clientes aprobados y evita que se produzcan actividades fraudulentas desde dentro de ella.
¿Qué sigue?
Consulta la siguiente documentación para agregar la Verificación de aplicaciones de Firebase a lo siguiente:
- Habilita la aplicación forzosa en Cloud Functions
- Verifica los tokens de la Verificación de aplicaciones en backends personalizados