Tuto Flutter.es

Agregar el servicio App Check a tu aplicación Flutter

Avatar de Pedro Cortez
Pedro Cortez

App Check es una herramienta ideal para proteger toda la información almacenada en tu back-end y evitar que caiga en manos equivocadas. En este tutorial, te explico cómo implementar esta solución de forma muy sencilla en tu aplicación Flutter.

App check en Flutter
Tabla de contenidos
  1. ¿Para qué sirve App Check?
  2. Activar App Check en Firebase para tu aplicación Flutter
  3. Implementar App Check en su aplicación Flutter
  4. App Check no funciona en emuladores

¿Para qué sirve App Check?

Para garantizar la seguridad de los archivos almacenados por ti o tus usuarios, Firebase puede solicitar que agregues App Check a tu aplicación Flutter para utilizar algunos de sus servicios. Este mecanismo ayuda a mitigar riesgos relacionados con:

  • Acceso no autorizado: Evita que atacantes utilicen tus claves de API o accedan a tus recursos.
  • Abuso de recursos: Protege tus bases de datos, funciones en la nube y otros servicios contra bots o usuarios malintencionados.
  • Fraude: Limita ataques como spam, fraudes de transacciones o sobrecarga de recursos.

App Check verifica que solo las solicitudes de aplicaciones legítimas y autenticadas puedan acceder a tus recursos, previniendo abusos y accesos no autorizados. Es una herramienta esencial para cualquier aplicación que requiera almacenar y compartir contenido multimedia.

Puedes utilizar App Check con los siguientes servicios de Firebase:

  • Firebase Authentication: Protege recursos para que solo sesiones autenticadas puedan acceder.
  • Firebase Firestore: Garantiza que solo clientes legítimos accedan a la base de datos.
  • Firebase Cloud Functions: Restringe funciones en la nube para solicitudes validadas por App Check.
  • Firebase Cloud Storage (Obligatorio): Protege archivos contra descargas o accesos no autorizados.
  • APIs personalizadas o servidores backend: Puedes configurar tus propios endpoints para aceptar solo solicitudes validadas por App Check.

Activar App Check en Firebase para tu aplicación Flutter

Sigue estos pasos para instalar App Check:

  1. Accede a la consola de Firebase, en la sección App Check, y activa el servicio.
  2. Registra tu aplicación para las plataformas que uses y aplica App Check a los servicios de Firebase necesarios.
  3. Agrega un proveedor de validación para cada plataforma:
    • Play Integrity para Android.
    • Device Check para iOS.
    • reCAPTCHA para Web y Windows.

Cada servicio requerirá elementos diferentes, por lo que voy a ayudarte a encontrarlos.

Agregar Play Integrity a tu aplicación Flutter para Android

Agregar Play Integrity para Android es relativamente sencillo. Firebase simplemente le pide que agregue el SHA-256 de su aplicación, que puede generar en Flutter con el comando:

./gradlew signingReport

Ejecútelo desde el directorio android de su aplicación Flutter.

Si tiene dificultades para obtener su SHA-256, he redactado una guía completa sobre cómo recuperar los SHA-1 y SHA-2 de su aplicación Flutter.

Agregar DeviceCheck a su aplicación Flutter para iOS

Aquí tiene una vista detallada de los pasos a seguir para configurar DeviceCheck en iOS:

Crear un App ID

Si aún no tiene uno, cree un identificador de aplicación (App ID) en el Apple Developer Console.

  1. Acceda al Apple Developer Portal y conéctese con su cuenta de desarrollador. (Si aún no tiene una cuenta, cree una. Si tiene dificultades, consulte la guía que he escrito sobre cómo publicar una aplicación en iOS, donde explico cómo crear una cuenta de desarrollador y vincularla a su aplicación Flutter).
  2. Vaya a la sección Certificates, Identifiers & Profiles, luego a Identifiers, y después seleccione App IDs.
  3. Verá una página como esta:Proporcione un nombre descriptivo para su aplicación y su Bundle ID, que puede encontrar en varios lugares, incluido el archivo firebase_options.dart de su aplicación, en la línea iosBundleId.Su Bundle ID debe ser único y no puede ser el que Flutter proporciona por defecto al crear su aplicación. Si aún no ha cambiado su Bundle ID, consulte mi guía sobre cómo instalar Firebase, donde lo explico detalladamente.
  4. No necesita marcar las opciones que se proponen aquí de inmediato. Podrá regresar a esta sección más tarde, ya sea al publicar su aplicación o al instalar otros servicios.

Crear una clave privada DeviceCheck

El siguiente paso será crear una clave privada DeviceCheck, que le permitirá activar App Check en iOS. Siga estos pasos:

  1. En el portal de Apple Developer, regrese a la sección Certificates, Identifiers & Profiles.
  2. Haga clic en Keys, luego en el botón «+» para crear una nueva clave.
  3. Asigne un nombre a su clave, sin caracteres especiales (@, &, *, ‘, «, -, ., etc.). También puede agregarle una descripción para localizarla más fácilmente.
  4. Marque DeviceCheck para activar este servicio y guarde su clave.
  5. Descargue la clave con el botón Download y súbala de inmediato a Firebase en el campo correspondiente.
  6. Copie el Key ID que aparece y péguelo en el campo «ID de clave» en Firebase.

Agregar su ID de equipo

Finalmente, la última información que debe agregar es su Team ID, que puede encontrar nuevamente en el Apple Developer Portal, en la sección Détails de l’abonnement. Este ID tiene 10 caracteres y está compuesto por números y letras mayúsculas.

Una vez que haya agregado este identificador, debería poder activar DeviceCheck para su aplicación Flutter.

Agregar reCAPTCHA a su aplicación Flutter para la web

Añadir reCAPTCHA es relativamente sencillo:

  1. Acceda a la plataforma Google reCAPTCHA.
  2. Haga clic en «Get started with enterprise» y cree un proyecto si aún no tiene uno.
  3. Una vez creada la cuenta, Google le ofrecerá generar una clave. Asigne un nombre, seleccione «Sitio web» como plataforma e indique su Bundle ID como nombre de dominio.
  4. Copie la clave que se genera y péguela en Firebase para las plataformas web y Windows.

Implementar App Check en su aplicación Flutter

Ahora que App Check está activado en Firebase, solo queda implementarlo en su aplicación Flutter.

  1. Añada el paquete App Check en su archivo pubspec.yaml:
firebase_app_check: ^0.3.2

2. Luego importe los siguientes paquetes en sus archivos Dart:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_app_check/firebase_app_check.dart';

3. Finalmente, modifique su función main para admitir el servicio App Check al iniciar la aplicación:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Inicializar App Check
  await FirebaseAppCheck.instance.activate(
    webProvider: ReCaptchaV3Provider('remplace_por_su_clave'),
    androidProvider: AndroidProvider.debug, // Cambiar por .playIntegrity cuando pase a producción
    appleProvider: AppleProvider.debug, // Cambiar por .deviceCheck cuando pase a producción
  );

  runApp(MyApp());
}

Explicación:

  • Firebase.initializeApp(): Inicializa su proyecto Firebase.
  • FirebaseAppCheck.instance.activate(): Activa App Check.
  • webProvider: Para aplicaciones web, se utiliza ReCaptchaV3Provider y se proporciona la clave de sitio reCAPTCHA v3.
  • androidProvider: Para Android, puede elegir entre DebugProvider, SafetyNetProvider o PlayIntegrityProvider.
  • appleProvider: Para iOS y macOS, puede elegir entre DebugProvider, DeviceCheckProvider o AppAttestProvider.

App Check no funciona en emuladores

App Check no funcionará en emuladores, ya que depende de mecanismos que verifican:

  1. Que la aplicación se ejecute en un dispositivo auténtico.
  2. Que la aplicación sea oficial y no haya sido modificada.
  3. Que las señales de integridad provengan de un entorno seguro.

Como los emuladores no tienen estas capacidades, deberá registrar manualmente un token de depuración en la consola Firebase.

Token de depuración para Android

  1. Añada esta línea en su archivo build.gradle:
dependencies {
    ...
    implementation 'com.google.firebase:firebase-appcheck-debug:16.0.0-beta01' // Añadir esta implementación
}

2. Ejecute su aplicación en el emulador y en el terminal use:

adb logcat | grep DebugAppCheckProvider

Deberia ver un mensaje de este tipo : 

D DebugAppCheckProvider: Enter this debug secret into the allow list in
the Firebase Console for your project: 123a4567-b89c-12d3-e456-789012345678

3. Copia el token que se indica y dirígete al lugar donde activaste PlayIntegrity :

Haz clic en Gestionar los tokens de depuración y agrega el que copiaste. Una vez hecho esto, PlayIntegrity debería funcionar en el emulador Android que acabas de registrar.

Para iOS

Para iOS, comienza por agregar esta línea en tu archivo ios > Podfile:

target 'Runner' do
  use_frameworks!
  use_modular_headers!
  pod 'Firebase/AppCheck' //Agregar esta línea
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
  target 'RunnerTests' do
    inherit! :search_paths
  end
end

Luego, abre la carpeta ios de tu aplicación en XCode y ejecútala. Esta línea debería aparecer en tus registros:

Firebase App Check Debug Token: TU_TOKEN

Agrega este token a tu solución Device Check, para que App Check pueda funcionar en tu emulador iOS.

Para la web

Finalmente, para la web, comienza por agregar esta etiqueta en la parte <body> de tu archivo web > index.html:

<script>self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;</script>

De nuevo, ejecuta tu aplicación en el navegador de tu elección y busca en los registros:

App Check debug token: TU TOKEN. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Agrega este token a la solución reCAPTCHA, para que App Check pueda funcionar en tu emulador web.

Avatar de Pedro Cortez

Pedro Cortez

¡Hola! Me llamo Pierre y me lancé a la aventura de Flutter en octubre de 2023. Tenía una idea para una aplicación móvil, pero no tenía ningún conocimiento de programación y no sabía por dónde empezar. Al investigar, encontré algunos videos que hablaban de Flutter y sus ventajas, y decidí intentarlo. Sin embargo, esta herramienta aún es bastante nueva, y la mayoría de los recursos están en inglés, son de pago o están dirigidos a personas con conocimientos avanzados en programación. Por eso decidí lanzar este blog, para que los francófonos que empiezan desde cero, como yo, puedan quizás encontrar respuestas a sus preguntas.

Pour aller plus loin