Ajouter le service App Check sur son application Flutter

À quoi sert App Check ?

Pour garantir la sécurité des fichiers que vous avez stockés ou ceux de vos utilisateurs, Firebase peut vous demander d’ajouter App Check à votre application Flutter, pour pouvoir utiliser certains de ses services. En effet, celui-ci permet de réduire les risques associés à :

L’accès non autorisé : Empêcher les attaquants d’utiliser vos clés d’API ou d’accéder à vos ressources.
Les abus de ressources : Protéger vos bases de données, fonctions cloud et autres services des robots ou des utilisateurs malveillants.
La fraude : Limiter les attaques telles que les spam, fraudes de transaction, ou surcharge des ressources.

En effet, ce mécanisme de protection va vérifier que seules les requêtes provenant d’applications légitimes et authentifiées peuvent accéder à vos ressources, empêchant ainsi les abus et les accès non autorisés. C’est donc un outil important pour toute application nécessitant le stockage et le partage de contenu multimédia.

Vous pouvez notamment l’utiliser avec :

Firebase Authentication : App Check complète Firebase Authentication en protégeant les ressources pour que seules les sessions authentifiées et légitimes soient autorisées.
Firebase Firestore : Il s’assure que seuls les clients authentiques accèdent à votre base de données.
Firebase Cloud Functions : Les fonctions cloud peuvent être restreintes pour que seules les requêtes validées par App Check soient exécutées.
Firebase Cloud Storage (Obligatoire) : Protège vos fichiers et empêche les téléchargements ou accès non autorisés.
Custom APIs ou serveurs backend : Vous pouvez configurer vos propres endpoints pour accepter uniquement les requêtes validées par App Check.

Activer le service App Check pour mon application Flutter dans Firebase

Pour installer App check, voici les étapes à suivre :

Allez dans la console Firebase, dans la section App Check et activez le service si ce n’est pas déjà fait.
Sur la page qui s’ouvre, vous aurez le choix d’enregistrer votre application, pour différentes plateformes, et d’appliquer App check sur différents services de Firebase.
Ajoutez un fournisseur d’attestation pour chaque plateforme sur lesquelles fonctionne votre application. Choisissez :
- Play Integrity pour Android ;
- Device check pour IOS ;
- reCAPTCHA pour le web et windows.

Chaque service va demander des éléments différents, je vais donc vous aider à les trouver.

Ajouter Play Integrity à votre application Flutter pour Android

Ajouter Play Integrity pour Android est relativement simple. Firebase, vous demande simplement d’ajouter le SHA-256 de votre application que vous pouvez générer dans Flutter grâce à la commande ./gradlew signingReport en vous plaçant dans votre fichier android .

Si vous avez des difficultés à obtenir votre SHA-256, j’ai rédigé tout un guide sur comment récupérer les SHA-1 et SHA-2 de son application Flutter.

Ajouter DeviceCheck à votre application Flutter pour iOS

Voici un aperçu détaillé des étapes à suivre pour configurer DeviceCheck sur iOS :

Créer un App ID

Si vous n’en avez pas déjà un, créez un identifiant d’app (App ID) dans Apple Developer Console

Allez sur Apple Developer Portal et connectez-vous avec votre compte développeur (Créez votre compte si vous n’en avez pas encore un. Si vous avez des difficultés, reprenez le guide que j’ai écrit sur comment publier une application sur IOS, qui explique comment se faire un compte de développer et le lier à son application Flutter.).
Allez dans Certificates, Identifiers & Profiles, dans la section Identifiers, puis App IDs.

Vous devriez arriver sur cette page :

Fournissez un nom descriptif pour votre application et votre Bundle ID trouvable à plusieurs endroits, notamment dans le fichier firebase_options.dart de votre application à la ligne iosBundleId.

Votre BundleId doit être unique et ne peut pas être celui que Flutter vous fournit par défaut lorsque vous créez votre application. Si vous n’avez pas encore changé votre bundle id, je vous l’explique ici dans mon guide sur comment installer Firebase.

Vous n’avez pas besoin de cocher les options proposées ici tout de suite. Vous pourrez y revenir plus tard, au moment de publier votre application, ou bien d’installer d’autres services.

Créer une clé privée DeviceCheck

La seconde étape va être de créer une clé privée DeviceCheck, que vous allez pouvoir utiliser pour active App Check sur IOS. Pour cela, voilà les étapes à suivre :

Toujours dans Apple developer, retournez dans Certificates, Identifiers & Profils.
Cliquez sur Keys, puis sur le bouton + pour créer une nouvelle clé.
Donnez un nom à votre clé, sans caractères spéciaux (@, &, *, ‘, « , -, . , etc). Vous pouvez également lui donner une description, pour plus facilement la retrouver.
Cochez DeviceCheck pour activer ce service et enregistrez votre clé.
Téléchargez la clé avec le bouton download, et uploadez la tout de suite dans Firebase à l’endroit dédié.
Copiez le Key ID qui est également renseigné et collez-le dans le champ « ID de clé » dans Firebase.

Ajouter votre ID d’équipe

Enfin, la dernière information à ajouter est votre identifiant d’équipe que vous pouvez trouver encore une fois dans Apple Developer, dans « Détails de l’abonnement ». Celui-ci doit faire 10 caractères et se compose de chiffres et de lettres en majuscule.

Une fois ce dernier identifiant ajouté, vous devriez pouvoir activer Device check pour votre application Flutter.

Ajouter reCAPTCHA à votre application Flutter pour le web

reCAPTCHA est relativement simple à ajouter :

Pour commencer, rendez-vous sur la plateforme Google reCAPTCHA.
Cliquez sur « Get started with enterprise » et créez un projet si vous n’en avez pas déjà un.
Une fois le compte créé, Google va directement vous proposer de créer une clé. Donnez-lui un nom, choisissez « Site web » comme plateforme et indiquiez votre bundle id comme nom de domaine.
Copiez la clé qui est générée et collez-la dans Firebase pour vos plateformes web et windows.

Implémenter App Check sur mon application Flutter

Maintenant qu’App Check est activé dans Firebase, il ne vous reste plus qu’à l’implémenter dans votre application Flutter. Pour cela, commencez par ajouter le package App Check dans votre fichier pubspec.yaml :

firebase_app_check: ^0.3.2

Puis importez les packages suivant dans vos fichier darts :

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

Enfin, modifiez votre fonction main pour prendre en charge le service App Check au démarrage de votre application :


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

  // Initialise App Check
  await FirebaseAppCheck.instance.activate(
    webProvider: ReCaptchaV3Provider('remplace_par_votre_clé'),
    androidProvider: AndroidProvider.debug, //Remplacer par .playIntegrity, quand vous passez en prod
    appleProvider: AppleProvider.debug,
    //Remplacer par .deviceCheck, quand vous passez en prod
  );

  runApp(MyApp());
}

Explication :

Firebase.initializeApp() : Initialise votre projet Firebase.
FirebaseAppCheck.instance.activate() : Active App Check.
- webProvider : Pour les applications web, vous utiliserez le ReCaptchaV3Provider et fournirez votre clé de site reCAPTCHA v3.
- androidProvider : Pour Android, vous pouvez choisir entre DebugProvider, SafetyNetProvider ou PlayIntegrityProvider.
- appleProvider : Pour iOS et macOS, vous pouvez choisir entre DebugProvider, DeviceCheckProvider ou AppAttestProvider.

App Check ne fonctionne pas sur emulateur

Si vous tentez de faire fonctionner App Check sur émulateur, vous allez vous rendre compte que celui-ci ne marche pas. Pas de panique, ceci est tout à fait normal. En effet, App Check repose sur des mécanismes qui vérifient que :

L’application s’exécute sur un appareil authentique.
L’application est officielle et n’a pas été modifiée (via un « app attestation » tel que SafetyNet sur Android, ou App Attest sur iOS).
Les signaux d’intégrité proviennent d’un environnement sécurisé.

Les émulateurs ne fournissent pas ces garanties, car ils ne disposent pas des outils et des API matériels pour générer ces signaux. Vous allez donc devoir enregistrer à la main un jeton de debogage dans la console Firebase, pour faire fonctionner App Check.

Pour Android

Pour Android, commencez par ajouter cette ligne dans votre fichier build.gradle

dependencies {
    ...
    implementation 'com.google.firebase:firebase-appcheck-debug:16.0.0-beta01' //Ajouter cette implementation
}

Lancez votre application dans l’emulateur et dans le terminal, lancez cette commande :

adb logcat | grep DebugAppCheckProvider

Vous devriez voir un message de ce type apparaitre :

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

Copiez le jeton qui est indiqué et rendez-vous là où vous avez activé PlayIntegrity.

Cliquez sur Gérer les jetons de débogage et ajoutez celui que vous avez copié. Une fois cela fait, PlayIntegrity devrait fonctionner sur l’emulateur Android que vous venez d’enregistrer.

Pour IOS

Pour IOS, commencez par ajouter cette ligne dans votre fichier ios > Podfile :

target 'Runner' do
  use_frameworks!
  use_modular_headers!
  pod 'Firebase/AppCheck' //Ajouter cette ligne
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
  target 'RunnerTests' do
    inherit! :search_paths
  end
end

Ouvrez ensuite le dossier IOS de votre application, dans XCode et lancez la. Cette ligne devrait alors apparaitre dans vos logs :

Firebase App Check Debug Token: VOTRE_TOKEN

Ajoutez ce token à votre solution Device Check, pour que App Check puisse désormais fonctionner sur votre emulateur IOS.

Pour le web

Enfin, pour le web, commencez par ajouter ce tag dans la partie body de votre ficher web > index.html :

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

Là encore, lancez votre application sur le navigateur de votre choix et cherchez dans vos logs :

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

Ajoutez ce token à la solution reCAPTCHA, pour que App Check puisse fonctionner sur votre emulateur web.