Mettre en place Firebase Storage et App Check pour Flutter

À quoi sert Firebase Storage ?

Firebase Storage est un service conçu pour stocker et gérer des fichiers volumineux tels que des images, des vidéos, des documents PDF ou des fichiers audio. C’est donc un outil parfait pour stocker et partager des contenus multimédia, ne pouvant pas être conservés dans une simple base de données.

Quelle différence avec Firebase Firestore ?

La différence entre Firebase Storage et Firebase Firestore, que j’ai déjà présenté dans un autre guide, réside dans le type de données que vous allez y stocker. Là où Storage va vous permettre de stocker des fichiers volumineux, comme des photos ou des musiques, Firestore est une base de données NoSQL orientée document. Il est donc plutôt conçu pour conserver des textes, des valeurs numériques, des listes, etc.

Ces deux solutions sont donc assez complémentaires, puisqu’elles vont vous permettre de conserver toutes les ressources dont vous aurez besoin pour construire une application dynamique.

Comment implémenter Firebase Storage dans une application Flutter

Pour intégrer Firebase Storage dans une application Flutter, nous allons suivre plusieurs étapes, incluant l’activation d’App Check pour sécuriser vos fichiers.

Prérequis

1. Flutter installé et configuré.
2. Un projet Firebase configuré.
   • Activez Firebase pour votre application Flutter via la console Firebase.
3. Ajoutez les fichiers de configuration Firebase :
   • google-services.json pour Android.
   • GoogleService-Info.plist pour iOS.
4. Ajoutez les dépendances firebase storage et app check, dans votre fichier pubspec.yaml.

dependencies:
  firebase_core: ^3.10.1 // changer par la dernière version
  firebase_storage: ^12.4.0 // changer par la dernière version
  firebase_app_check: ^0.3.2 // changer par la dernière version

Initialiser Firebase

Avant de pouvoir utilise le service Storage, dans votre application Flutter, il va vous falloir initialiser Firebase, si vous ne l’avez pas déjà fait. Pour cela, importez firebase core dans vos fichiers dart, avec cette ligne d’import :

import 'package:firebase_core/firebase_core.dart';

Il ne vous reste alors plus qu’à initialiser Firebase, au démarrage de votre application, en modifiant votre fonction Main de la manière qui suit :

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  ); // Ajouter ce bloc
  runApp(MyApp());
}

Activer Firebase Storage

Pour pouvoir l’utiliser dans votre projet, vous allez d’abord de voir activer le service Firebase Storage et ouvrir un espace de stockage appelé docket. Pour cela, rendez-vous dans votre projet, sur la page vue d’ensemble (overview). En haut de la page, juste en dessous des plateformes que vous avez intégrées à votre projet, vous devriez avoir un bouton « Storage ».

En cliquant dessous, vous arriverez sur la page de présentation de Storage. Vous pouvez cliquer sur « Par où commencer ? » pour lire la documentation, ou « Premier pas » pour directement activer ce service.

Firebase va alors simplement vous demander de choisir où vous souhaitez stocker vos données, et de configurer votre docket. Vous êtes ici libre de choisir les options qui vous conviennent, mais je vous conseille toutefois de directement changer les règles de votre docket, de la manière suivante, pour plus de sécurité :

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null && request.appCheck != null;
    }
  }
}

// Seules les personnes authentifiées, pourront accéder au docket

Ajouter App check

Pour garantir la sécurité des fichiers que vous avez stockés, Firebase requiert d’ajouter la solution App Check à votre application. 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. Par exemple, cela évite le scrapping ou l’accès à vos ressources par des bots. C’est donc un outil important pour toute application nécessitant le stockage et le partage de contenu multimédia.

J’ai rédigé tout un guide, consacré à comment ajouter le service App Check pour IOS, Android et web avec Flutter. Pensez simplement à activer Firebase Storage.

Une fois le service activé, ajoutez simple une instance dans votre fonction main, pour l’initialiser.

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

  // Initialise App Check
  await FirebaseAppCheck.instance.activate(
    webProvider: ReCaptchaV3Provider('remplace_par_votre_clé'), //Pour le web
    androidProvider: AndroidProvider.debug, //Pour android
    appleProvider: AppleProvider.appAttest, //Pour IOS
  );

  runApp(MyApp());
}

Ajouter Firebase Auth

Seuls les utilisateurs connectés à votre application via Firebase Auth pourront accéder aux ressources que vous aurez stockées. Si vous n’avez pas encore implémenté, cette solution, je vous explique dans ce guide, comment implémenter Firebase Auth avec Flutter.

Vous pouvez soit designer tout votre système, d’authentification, ou simplement créer un utilisateur de test et ajouter ce bloc dans votre fonction main :

  await FirebaseAuth.instance.signInWithEmailAndPassword(
    email: "email",
    password: "mdp",
  );

Utiliser Firebase Storage depuis votre application Flutter

Maintenant, que toute la partie implémentation est terminée, il nous reste le plus intéressant : Ajouter nos fonctions Storage à notre code en dart.

Récupérer des informations stockées dans Firebase Storage

Pour commencer, voyons comment récupérer un fichier que j’aurais stocké dans Storage et que je voudrais afficher en front (par exemple une image).

Tout d’abord, je vais importer mon package firebase storage dans mon fichier dart avec la ligne suivante :

import 'package:firebase_storage/firebase_storage.dart';

Je vais ensuite créer une fonction qui va me permettre de récupérer le fichier stocké à l’URL fourni. Cette adresse se trouve dans les détails de votre fichier, dans la partie « Emplacement du fichier ».

Future<String> getImageURL(String path) async {
  final ref = FirebaseStorage.instance.ref().child(path);
  return await ref.getDownloadURL();
}
//path correspond au nom du fichier que je veux récupérer.
//Par exemple si l'URL complet de votre ressource est gs://projet-de-test-d17db.firebasestorage.app/ma_photo_de_profil.jpeg , alors renseignez ma_photo_de_profil.jpeg

Vous pouvez ensuite stocker votre fichier dans une variable, ou bien l’utiliser dans un widget FutureBuilder, pour l’afficher en front. C’est par exemple une bonne manière de stocker la photo de profil d’un utilisateur et de l’afficher quand il ouvre l’application :

class DisplayImage extends StatelessWidget {
  final String imagePath = "url_de_ma_photo";


  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: getImageURL(imagePath),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        }
        if (snapshot.hasError) {
          return Text('Erreur : ${snapshot.error}');
        }
        return Image.network(snapshot.data as String);
      },
    );
  }
}

Voici un exemple très simple qui permet d’afficher une photo stockée dans Firebase Storage :

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:tutoflutter/firebase_options.dart';
import 'package:firebase_app_check/firebase_app_check.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  print('App started');
  await Firebase.initializeApp(
    name: "TutoFlutter",
    options: DefaultFirebaseOptions.currentPlatform,
  );

  await FirebaseAppCheck.instance.activate(
    androidProvider: AndroidProvider.debug,
    appleProvider: AppleProvider.debug,
    webProvider: ReCaptchaV3Provider('Remplacer_par_votre_clé')
  );

  await FirebaseAuth.instance.signInWithEmailAndPassword(
    email: "remplacez_par_un_email_d'utilisateur_valide",
    password: "remplacer_par_son_mdp",
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirebaseStorageExample(),
    );
  }
}

class FirebaseStorageExample extends StatefulWidget {
  @override
  _FirebaseStorageExampleState createState() => _FirebaseStorageExampleState();
}

class _FirebaseStorageExampleState extends State<FirebaseStorageExample> {
  FirebaseAuth auth = FirebaseAuth.instance;
  final String imagePath = "remplacer_par_votre_url";

  Future<String> getImageURL(String path) async {
    final ref = FirebaseStorage.instance.ref().child(path);
    return await ref.getDownloadURL();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Upload Firebase')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FutureBuilder(
              future: getImageURL(imagePath),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return CircularProgressIndicator();
                }
                if (snapshot.hasError) {
                  print('Erreur : ${snapshot.error}');
                  return Text('Erreur : ${snapshot.error}');
                }
                return Image.network(snapshot.data as String);
              },
            )
          ],
        ),
      ),
    );
  }
}

Envoyer, modifier, et supprimer des fichiers dans Firebase Storage

Stocker des photos manuellement dans Storage est déjà une première étape, mais comment faire pour stocker un document téléversé par un utilisateur ?

Envoyer ou modifier un fichier dans Storage

Pour envoyer un fichier local à Firebase Storage, procédez comme suit :

1. Obtenez le fichier à téléverser et stockez-le dans une variable de type File. par exemple, récupérez une photo dans la galerie de l’utilisateur :

import 'package:image_picker/image_picker.dart';

  final ImagePicker _picker = ImagePicker(); //Créer une instance de Image Picker
  File? _imageFile; //Stock la photo de l'utilisateur
  
//Fonction permettant d'accéder à la galerie de l'utilisateur et de récupérer une photo
  Future<void> _pickImage() async {
    final XFile? pickedImage = await _picker.pickImage(source: ImageSource.gallery);
    if (pickedImage != null) {
      setState(() {
        _imageFile = File(pickedImage.path);
      });
    }
  }
  
  

2. Ensuite, nommez votre document et téléversez le dans Storage :

// Envoi l'image sélectionnée, dans Firebase Storage
  Future<void> _uploadImage() async {
    if (_imageFile == null) {
      print('Aucune image sélectionnée.');
      return;
    }

    try {
      final ref = FirebaseStorage.instance
          .ref()
  .child('user_photos/${DateTime.now().millisecondsSinceEpoch}.jpg'); //Remplacez par le nom que vous voulez
      await ref.putFile(_imageFile!);
      print('Image téléversée avec succès !');
    } catch (e) {
      print('Erreur lors du téléversement : $e');
    }
  }

Pour modifier un document, il vous suffit simplement de réenregistrer une nouvelle ressource, avec le même URL.

Supprimer un fichier dans Storage

Pour supprimer un fichier spécifique dans Firebase Storage, utilisez la méthode delete() :

Future<void> deleteFile(String path) async {
  try {
    final ref = FirebaseStorage.instance.ref().child(path);
    await ref.delete();
    print('Fichier supprimé avec succès de $path!');
  } catch (e) {
    print('Erreur lors de la suppression : $e');
  }
}

Prix de Firebase Storage

Voici un tableau récapitulatif des tarifs de Firebase Storage pour le plan Blaze (facturation à l’utilisation) :

Ces tarifs sont basés sur le plan Blaze de Firebase Storage. Les prix sont indiqués en dollars américains (USD). Pour plus de détails, vous pouvez consulter la documentation officielle de Firebase.

Stockage de données : Représente l’espace utilisé pour stocker des fichiers (images, vidéos, documents, etc.) dans le cloud Firebase Storage. La capacité de stockage est mesurée en gigaoctets (Go).

Par exemple, si vous téléversez un fichier vidéo de 2 Go dans Firebase Storage, cela sera comptabilisé dans votre quota de stockage.

Téléchargements (Data egress) : Correspond à la quantité de données téléchargées à partir de Firebase Storage par les utilisateurs finaux. C’est généralement mesuré en gigaoctets (Go).

Par exemple, si un utilisateur final télécharge un fichier image de 5 Mo depuis votre application, cela s’ajoute au total des téléchargements pour le mois.

Opérations de téléchargement : Chaque requête effectuée pour télécharger un fichier à partir de Firebase Storage est comptée comme une opération de téléchargement.

Par exemple, si un utilisateur demande l’accès à 3 fichiers distincts dans votre application. Ces 3 requêtes sont comptées comme 3 opérations de téléchargement.

Opérations de téléversement (Upload operations) : Chaque requête effectuée pour téléverser (uploader) un fichier vers Firebase Storage est comptée comme une opération de téléversement.

Par exemple, si 10 utilisateurs téléversent chacun une photo dans votre application, cela équivaut à 10 opérations de téléversement.