Firebase Cloud Storage

Par hekram, 28 février, 2025

Dans chaque article, nous verrons différentes fonctionnalités que Firebase propose. Firebase est un outil puissant qui offre de nombreuses fonctionnalités. Nous nous concentrerons uniquement sur celles qui seront utiles si nous intégrons Firebase dans notre projet à l'avenir. Nous avons déjà abordé l'authentification et Firestore. Aujourd'hui, nous nous concentrerons sur Firebase Cloud Storage.

Qu'est-ce que Firebase Cloud Storage ?

Firebase Cloud Storage est un service qui permet de stocker et gérer des fichiers comme des images, vidéos et documents. Il assure des téléchargements fiables, même avec une connexion instable, et protège les fichiers grâce à Firebase Authentication et des règles de sécurité. Facile à intégrer, Il convient aussi bien aux petites applications qu'aux grandes plateformes comme Spotify ou Google Photos.

Pourquoi l’utiliser ?

Il y a plusieurs raisons d'utiliser Firebase Cloud Storage :

  1. Stockage sécurisé et performant Firebase Cloud Storage repose sur l’infrastructure Google Cloud, ce qui garantit une grande rapidité et une sécurité élevée pour stocker et récupérer des fichiers tels que des vidéos, photos et documents.

  2. Sécurisation des fichiers Firebase Cloud Storage s’intègre avec Firebase Authentication, ce qui simplifie la gestion des accès. Grâce aux règles de sécurité Firebase, il est possible de restreindre ou autoriser l’accès aux fichiers en fonction de critères comme le nom du fichier, sa taille ou son type, définis directement sur Firebase.

  3. Facilité d’intégration avec les applications Web et mobiles Firebase Cloud Storage s’intègre facilement avec les applications Web, Android et iOS grâce aux Firebase SDKs. Il permet d’envoyer, récupérer et gérer des fichiers facilement. Même si d'autres services Firebase comme Firestore, Realtime Database ou Firebase Hosting sont intégrés, cela ne perturbe pas son fonctionnement.

  4. Règles de sécurité avancées Grâce aux Firebase Security Rules, il est possible de définir précisément qui a le droit d’accéder aux fichiers, en fonction de l’identité de l’utilisateur, du type de fichier ou d’autres critères. Firebase Authentication renforce également la sécurité en facilitant la gestion des permissions et en protégeant les données sensibles.

Les fonctionnalités principales

Il existe plusieurs fonctionnalités, mais nous nous concentrerons sur quatre principales, idéales pour un projet avec Firebase Cloud Storage, quel que soit le langage utilisé, comme le Web, le mobile, Flutter, C++ ou Unity. Cependant, l’intégration varie selon le langage. Ici, nous allons voir comment l’utiliser avec Flutter, mais il est aussi possible de l’implémenter sur le Web ou d’autres plateformes.

  1. Upload de fichiers : Permet d’envoyer et stocker des fichiers comme des images, vidéos et documents. Chaque fichier est enregistré sous un chemin spécifique. On peut aussi ajouter des informations comme le type de fichier.
  2. Téléchargement et affichage : Permet de récupérer et afficher les fichiers stockés. Chaque fichier a une URL de téléchargement unique. On peut restreindre l’accès aux fichiers selon les permissions.
  3. Gestion des permissions : Permet de définir qui peut voir, modifier ou supprimer un fichier. Firebase Authentication contrôle l’accès aux fichiers et les règles de sécurité protègent les fichiers sensibles.
  4. Performances : Réduit la taille des fichiers avant l’envoi. Utilise des URLs temporaires pour limiter l’accès. Gère les erreurs et reprend automatiquement les téléchargements interrompus.

Comment l’utiliser ?

D'abord, pour utiliser Firebase Cloud Storage dans notre projet, il faut savoir que l'intégration varie selon le langage. Ici, nous allons voir le code pour le Web en React.

  • Configuration de Firebase Cloud Storage :Dans votre projet, commencez par installer Firebase s'il n'est pas déjà présent. Ensuite, importez Firebase Cloud Storage et ajoutez le SDK JavaScript en précisant le nom du bucket, disponible dans la console Firebase.
import { getStorage } from "firebase/storage";
// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  storageBucket: 'BUCKET_NAME'
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Storage and get a reference to the service
const storage = getStorage(app);
  • Uploader un fichier : Alors, Upload un fichier permet de l'envoyer vers Firebase Cloud Storage, de créer une référence avec ref(), d’utiliser uploadBytes() pour stocker le fichier et d'afficher un message lorsque l'upload est terminé. Voici le code qui fait cela :
const storage = getStorage();
const storageRef = ref(storage, 'some-child');
// 'file' comes from the Blob or File API
uploadBytes(storageRef, file).then((snapshot) => {
  console.log('Uploaded a blob or file!');
});
  • Télécharger et afficher un fichier : Alors, télécharger un fichier permet d’obtenir son URL depuis Firebase Cloud Storage, de créer une référence avec ref(), de récupérer l’URL avec getDownloadURL(), d’insérer l’image dans une balise et de gérer les erreurs si le fichier est introuvable ou inaccessible. Voici le code qui fait cela :
const storage = getStorage();
const starsRef = ref(storage, 'images/stars.jpg');
// Get the download URL
getDownloadURL(starsRef)
  .then((url) => {
    // Insert url into an <img> tag to "download"
  })
  .catch((error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/object-not-found':
        // File doesn't exist
        break;
      case 'storage/unauthorized':
        // User doesn't have permission to access the object
        break;
      case 'storage/canceled':
        // User canceled the upload
        break;
      case 'storage/unknown':
        // Unknown error occurred, inspect the server response
        break;
    }
  });
  • Suprimer des fichiers : Alors, supprimer un fichier permet de le retirer définitivement de Firebase Cloud Storage en créant une référence avec ref(), puis en appelant deleteObject() pour supprimer le fichier ciblé. Voici le code qui fait cela : :
const storage = getStorage();
// Create a reference to the file to delete
const desertRef = ref(storage, 'images/desert.jpg');
// Delete the file
deleteObject(desertRef).then(() => {
  // File deleted successfully
}).catch((error) => {
  // Uh-oh, an error occurred!
});

Conclusion

Nous avons vu comment utiliser Firebase Cloud Storage dans un projet Web, mais la documentation propose également des solutions pour d'autres plateformes. Nous avons appris à configurer Firebase, ajouter un fichier, le télécharger et l'afficher, et le supprimer facilement. Firebase Cloud Storage permet de stocker des fichiers de façon sécurisée, de contrôler les accès et d’optimiser les performances. Il est simple à intégrer, que ce soit pour une petite application ou une grande plateforme.

Référence

Étiquettes

Commentaires