1. Introducción
Última actualización: 2023-02-23
¿Cómo puede evitar el acceso no autorizado a sus recursos de Firebase?
Puede usar Firebase App Check para evitar que clientes no autorizados accedan a sus recursos de backend al solicitar que las solicitudes entrantes vengan adjuntas con una certificación de que la solicitud proviene de su aplicación genuina y al bloquear el tráfico que no tiene una certificación adecuada. Firebase App Check depende de proveedores de certificación específicos de la plataforma para verificar la autenticidad del cliente: para aplicaciones web, App Check admite reCAPTCHA v3 y reCAPTCHA Enterprise como proveedores de certificación.
App Check se puede utilizar para proteger solicitudes a Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication con Identity Platform y en backends que usted mismo aloja.
lo que construirás
En este codelab, protegerá una aplicación de chat agregando primero y luego aplicando App Check.
lo que aprenderás
- Cómo monitorear su backend para detectar accesos no autorizados
- Cómo agregar cumplimiento a Firestore y Cloud Storage
- Cómo ejecutar su aplicación con un token de depuración para desarrollo local
Lo que necesitarás
- El IDE/editor de texto de su elección
- El administrador de paquetes npm , que normalmente viene con Node.js
- Firebase CLI instalado y configurado para funcionar con su cuenta
- Un terminal/consola
- Un navegador de tu elección, como Chrome
- El código de muestra del codelab (consulte el siguiente paso del codelab para saber cómo obtener el código).
2. Obtenga el código de muestra
Clona el repositorio GitHub del codelab desde la línea de comando:
git clone https://github.com/firebase/codelab-friendlychat-web
Alternativamente, si no tienes Git instalado, puedes descargar el repositorio como un archivo ZIP .
Importar la aplicación de inicio
Usando su IDE, abra o importe el directorio 📁 appcheck-start desde el repositorio clonado. Este directorio 📁 appcheck-start contiene el código inicial para codelab, que será una aplicación web de chat completamente funcional. El directorio 📁 appcheck tendrá el código completo para el codelab.
3. Crea y configura un proyecto de Firebase
Crear un proyecto de Firebase
- Inicia sesión en Firebase .
- En Firebase console, haz clic en Agregar proyecto y luego nombra tu proyecto de Firebase FriendlyChat. Recuerde el ID del proyecto de su proyecto de Firebase.
- Desmarque Habilitar Google Analytics para este proyecto
- Haga clic en Crear proyecto.
La aplicación que vamos a crear utiliza productos de Firebase que están disponibles para aplicaciones web:
- Autenticación de Firebase para permitir que sus usuarios inicien sesión fácilmente en su aplicación.
- 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 servir sus activos.
- Firebase Cloud Messaging para enviar notificaciones automáticas y mostrar notificaciones emergentes del navegador.
- Firebase Performance Monitoring para recopilar datos de rendimiento del usuario para su aplicación.
Algunos de estos productos necesitan una configuración especial o deben habilitarse mediante Firebase console.
Agregar una aplicación web de Firebase al proyecto
- Haga clic en el icono web
para crear una nueva aplicación web de Firebase. - Registre la aplicación con el apodo Friendly Chat y luego marque la casilla junto a Configurar también Firebase Hosting para esta aplicación . Haga clic en Registrar aplicación .
- En el siguiente paso, verá un comando para instalar Firebase usando npm y un objeto de configuración. Copia este objeto más adelante en el codelab, así que por ahora, presiona Siguiente .
- Luego verá una opción para instalar Firebase CLI. Si aún no lo ha instalado, hágalo ahora usando el comando
npm install -g firebase-tools. Luego haga clic en Siguiente . - Luego verá una opción para iniciar sesión en Firebase e implementar en el alojamiento de Firebase. Continúe e inicie sesión en Firebase usando el comando
firebase login, luego haga clic en Continuar a la consola . La implementación en el hosting de Firebase se realizará en un paso futuro.
Habilite el inicio de sesión de Google para la autenticación de Firebase
Para permitir que los usuarios inicien sesión en la aplicación web con sus cuentas de Google, utilizaremos el método de inicio de sesión de Google.
Deberá habilitar el inicio de sesión de Google:
- En la consola de Firebase, ubique la sección Construir en el panel izquierdo.
- Haga clic en Autenticación , haga clic en Comenzar si corresponde, luego haga clic en la pestaña Método de inicio de sesión (o haga clic aquí para ir directamente allí).
- Habilite el proveedor de inicio de sesión de Google
- Establezca el nombre público de su aplicación en Friendly Chat y elija un correo electrónico de soporte del proyecto en el menú desplegable.
- Clic en Guardar
Habilitar Cloud Firestore
La aplicación web utiliza Cloud Firestore para guardar mensajes de chat y recibir nuevos mensajes de chat.
Deberá habilitar Cloud Firestore:
- En la sección Generar de Firebase console, haz clic en Base de datos de Firestore .
- Haga clic en Crear base de datos en el panel de Cloud Firestore.
- Seleccione la opción Iniciar en modo de prueba y luego haga clic en Siguiente después de leer el descargo de responsabilidad sobre las reglas de seguridad.
El modo de prueba garantiza que pueda escribir libremente en la base de datos durante el desarrollo. Ya tiene reglas de seguridad escritas para usted en el código de inicio. Los usarás para este codelab.
- Establezca la ubicación donde se almacenan sus datos de Cloud Firestore. Puede dejar esto como predeterminado o elegir una región cercana a usted. Haga clic en Habilitar para aprovisionar Firestore.
Habilitar almacenamiento en la nube
La aplicación web utiliza Cloud Storage para Firebase para almacenar, cargar y compartir imágenes.
Deberá habilitar el almacenamiento en la nube:
- En la sección Compilación de Firebase console, haz clic en Almacenamiento .
- Si no hay ningún botón Comenzar , significa que Cloud Storage ya está habilitado y no es necesario seguir los pasos a continuación.
- Haga clic en Comenzar .
- Seleccione la opción Iniciar en modo de prueba y luego haga clic en Siguiente después de leer el descargo de responsabilidad sobre las reglas de seguridad.
Con las reglas de seguridad predeterminadas, cualquier usuario autenticado puede escribir cualquier cosa en Cloud Storage. Implementaremos reglas de seguridad ya escritas para nosotros más adelante en este codelab.
- La ubicación de Cloud Storage está preseleccionada con la misma región que eligió para su base de datos de Cloud Firestore. Haga clic en Listo para completar la configuración.
4. Configurar base de fuego
Desde el directorio appcheck-start , llame a:
firebase use --add
Cuando se le solicite, seleccione el ID de su proyecto y luego asigne un alias a su proyecto de Firebase. Para este proyecto, puedes simplemente dar un alias predeterminado . A continuación, deberá configurar su proyecto local para que funcione con Firebase.
- Vaya a la configuración de su proyecto en Firebase console
- En la tarjeta "Tus aplicaciones", selecciona el apodo de la aplicación para la que necesitas un objeto de configuración.
- Seleccione Configuración en el panel de fragmentos del SDK de Firebase.
- Copie el fragmento del objeto de configuración y luego agréguelo a
appcheck-start/hosting/src/firebase-config.js. El resto del codelab 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 appcheck-start , luego llame:
firebase experiments:enable webframeworks
Esto habilita el soporte del marco web con el que se creó este proyecto.
¡Deberíamos estar todos listos para ejecutar su proyecto y probar que el proyecto predeterminado funciona!
5. Pruebe la aplicación sin App Check
Ahora que tiene su aplicación configurada y el SDK configurado, intente usar la aplicación tal como fue diseñada originalmente. Primero, comience instalando todas las dependencias. Desde su terminal, navegue hasta el directorio appcheck-start/hosting . Mientras esté dentro de ese directorio, ejecute npm install . Esto recupera todas las dependencias para que su proyecto funcione. Para iniciar la aplicación en su estado actual, puede ejecutar firebase serve . La aplicación te pide que inicies sesión con una cuenta de Google; hágalo y luego intente publicar algunos mensajes de chat y algunas fotos en el chat.
Ahora que lo ha probado localmente, ¡es hora de verlo en producción! Ejecute firebase deploy para implementar la aplicación web en la web. Esta parte es un paso crucial para demostrar cómo funciona App Check en el mundo real, ya que requiere que se configure un dominio para el proveedor de certificación reCAPTCHA Enterprise.
Con suerte, está experimentando la capacidad predeterminada que proporciona la aplicación. Publicar mensajes de chat y todo lo demás que sólo debería hacerse desde una aplicación como esta. La desventaja del estado actual es que cualquier persona con la configuración de su aplicación del paso anterior puede acceder a sus recursos de backend. Aún deben obedecer las reglas de seguridad establecidas por sus sistemas Firestore y Cloud Storage, pero de lo contrario, aún pueden consultar, almacenar y acceder a los datos almacenados allí.
En los próximos pasos, vas a:
- Regístrese para la verificación de aplicaciones
- Validar la aplicación
- Comience a hacer cumplir las reglas
6. Active la verificación y aplicación de aplicaciones
Comencemos por obtener una clave empresarial reCAPTCHA para su proyecto y agregarla a App Check. Empiece por visitar la sección reCAPTCHA Enterprise de Google Cloud Console. Seleccione su proyecto y luego se le solicitará que habilite la API reCAPTCHA Enterprise. Habilite la API y espere unos minutos hasta que finalice. Luego haga clic en Crear clave junto a Claves empresariales . Luego, en esta sección, especifique un nombre para mostrar y seleccione una clave de tipo de sitio web . Debe especificar los dominios en los que está alojada su aplicación. Dado que planea alojar esto en Firebase Hosting, utiliza el nombre de alojamiento predeterminado, que generalmente es ${YOUR_PROJECT_ID}.web.app . Puede encontrar su dominio de alojamiento en la sección Alojamiento de Firebase Console. Después de completar esta información, presione Listo y Crear clave .
Una vez completado, verá una identificación en la parte superior de la página Detalles clave .
Continúe y copie esta identificación en su portapapeles. Esta es la clave que utiliza para App Check. A continuación, visite la parte de verificación de aplicaciones de Firebase console y haga clic en Comenzar . Luego, haga clic en Registrarse y luego haga clic en reCAPTCHA Enterprise y coloque la identificación copiada en el cuadro de texto para la clave del sitio de reCAPTCHA Enterprise . Deje el resto de la configuración como predeterminada. Su página de verificación de aplicaciones debería verse así:
Solicitudes no verificadas y no aplicadas
Ahora que tiene una clave registrada dentro de Firebase console, vuelva a ejecutar su sitio en el navegador ejecutando firebase serve . Aquí tiene la aplicación web ejecutándose localmente y puede comenzar a realizar solicitudes en el backend de Firebase nuevamente. A medida que las solicitudes van contra el backend de Firebase, App Check las monitorea, pero no se aplican. Si desea ver el estado de las solicitudes que llegan, puede visitar la sección Cloud Firestore en la pestaña API de la página App Check en Firebase console. Como todavía no has configurado el cliente para usar App Check, deberías ver algo similar a esto:
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 App Check integrado.
Este panel puede indicar algunas cosas. Lo primero que puede indicar es si todas sus aplicaciones cliente están ejecutando la última versión de su cliente. Si es así, puede aplicar App Check de forma segura sin preocuparse por desactivar el acceso a un cliente genuino de su aplicación. La otra cosa que esto puede indicarle es cuántos intentos de acceder a su backend se realizaron sin provenir de su aplicación. Pueden ser usuarios que consultan su backend directamente sin su conocimiento. Dado que puede ver que las solicitudes no están verificadas, es hora de ver qué sucedería con los usuarios que pueden tener una solicitud no verificada en su backend antes de continuar con la verificación de sus solicitudes.
Solicitudes no verificadas y aplicadas
Continúe y presione el botón Enforce de la pantalla anterior y luego presione Enforce nuevamente si se le solicita.
Esto comenzará a aplicar App Check; ahora bloqueará las solicitudes a sus servicios backend que no estén verificadas a través del proveedor de certificación elegido (en este caso, reCAPTCHA Enterprise). Regrese a su aplicación web en ejecución que debería estar ejecutándose en http://localhost:5000 . Cuando actualiza la página e intenta obtener datos de la base de datos, no sucede nada. Si abre la consola de Chrome para leer los errores, debería ver algo similar a lo siguiente:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Se trata de solicitudes de bloqueo de App Check que no pasaron un token de certificación válido en sus solicitudes a sus recursos de Firebase. Por el momento, puede desactivar la aplicación de App Check y, en la siguiente sección, examinará cómo agregar reCAPTCHA Enterprise App Check al ejemplo de Friendly Chat.
7. Agregue la clave reCAPTCHA Enterprise al sitio
Vamos a agregar la clave empresarial a su aplicación. Primero, abra hosting/src/firebase-config.js y agregue su clave empresarial reCAPTCHA 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 esté completo, abra hosting/src/index.js y en la línea 51, agregará una importación desde firebase-config.js para obtener su clave reCAPTCHA y también importará la biblioteca App Check para que pueda trabajar con reCAPTCHA. Proveedor empresarial.
// 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á una función para configurar App Check. La función primero verificará si se encuentra en un entorno de desarrollo y, de ser así, imprimirá un token de depuración que puede 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 App Check para que funcione con su proveedor seleccionado; en este caso, es reCAPTCHA Enterprise. Luego, también querrás actualizar automáticamente tu token de App Check en segundo plano, lo que evitaría cualquier tipo de retraso por parte del usuario al interactuar con tu servicio en caso de que su token de App Check se haya vuelto 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
}
Finalmente, una vez que se asegure de que la aplicación esté inicializada, deberá llamar a la función setupAppCheck que acaba de crear. En la parte inferior del archivo hosting/src/index.js , agregue la llamada a su método agregado recientemente.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
Pruebe localmente primero
Pruebe su aplicación localmente primero. Si aún no estás entregando la aplicación localmente, ejecuta firebase serve . Deberías notar que la aplicación aún no se carga localmente. Esto se debe a que solo registró su dominio de Firebase con el proveedor de atestación reCAPTCHA y no con el dominio localhost. Nunca debe registrar localhost como dominio aprobado, ya que esto permite a los usuarios acceder a sus servidores restringidos desde una aplicación que se ejecuta localmente en su máquina. En cambio, dado que configuró self.FIREBASE_APPCHECK_DEBUG_TOKEN = true , querrá buscar en su consola de JavaScript una línea similar a esta:
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.
Querrá tomar el token de depuración proporcionado (en el caso de ejemplo es: 55183c20-de61-4438-85e6-8065789265be ) y conectarlo a la configuración de App Check en el menú adicional de su aplicación.
Asigne al token un nombre único que recuerde y haga clic en Guardar . Esta opción le permite utilizar un token generado por el cliente con su aplicación, que es una alternativa más segura que generar un token de depuración e incrustarlo dentro de su aplicación. Incrustar un token dentro de la aplicación podría distribuirlo accidentalmente a los usuarios finales, y esos usuarios finales podrían explotarlo sin pasar por sus controles. Si desea distribuir un token de depuración, por ejemplo, en un entorno de CI, lea esta documentación para obtener más información sobre cómo distribuirlo.
Una vez que tenga el token de depuración registrado en Firebase console, puede volver a habilitar la aplicación de verificación de aplicaciones y probar que el contenido de la aplicación se carga localmente llamando firebase serve desde la terminal. Debería ver que los datos ingresados previamente se envían a la versión local de la aplicación web. Aún deberías ver el mensaje con el token de depuración impreso en la consola.
Pruébalo en producción
Una vez que esté satisfecho de que App Check funciona localmente, implemente la aplicación web en producción. Desde su terminal, llame firebase deploy nuevamente y vuelva a cargar la página. Esto empaquetará su aplicación web para que se ejecute en Firebase Hosting. Una vez que su aplicación esté alojada en Firebase Hosting, intente visitarla en ${YOUR_PROJECT_ID}.web.app . Puede abrir la consola de JavaScript y ya no debería ver el token de depuración impreso allí y debería ver los chats cargándose en su proyecto. Además, después de interactuar con la aplicación por unos momentos, puede visitar la sección App Check de Firebase console y validar que todas las solicitudes a su aplicación hayan cambiado y estén verificadas.
8. ¡Felicitaciones!
¡Felicitaciones, ha agregado exitosamente Firebase App Check a una aplicación web!
Configura la consola Firebase para manejar un token reCAPTCHA Enterprise para entornos de producción e incluso configura tokens de depuración para el desarrollo local. Esto garantiza que sus aplicaciones aún puedan acceder a los recursos de Firebase de clientes aprobados y evita que se produzca actividad fraudulenta desde su aplicación.
¿Que sigue?
Consulte la siguiente documentación para agregar Firebase App Check a:
- Habilite la aplicación en funciones de la nube
- Verificar tokens de verificación de aplicaciones en backends personalizados