Cette page a été traduite par l'API Cloud Translation.
Switch to English

Ajoutez Firebase à votre projet JavaScript

Suivez ce guide pour utiliser le SDK JavaScript Firebase dans votre application Web ou en tant que client pour l'accès de l'utilisateur final, par exemple, dans un bureau Node.js ou une application IoT.

Conditions préalables

Si vous n'avez pas encore de projet JavaScript et que vous souhaitez simplement essayer un produit Firebase, vous pouvez télécharger l'un de nos exemples de démarrage rapide .

Étape 1 : créer un projet Firebase

Avant de pouvoir ajouter Firebase à votre application JavaScript, vous devez créer un projet Firebase pour vous connecter à votre application.

Consultez Comprendre les projets Firebase pour en savoir plus sur les projets Firebase et les bonnes pratiques pour ajouter des applications à des projets.

Étape 2 : enregistrez votre application avec Firebase

Une fois que vous avez un projet Firebase, vous pouvez y ajouter votre application Web.

Consultez Comprendre les projets Firebase pour en savoir plus sur les bonnes pratiques et les considérations relatives à l'ajout d'applications à un projet Firebase.

  1. Au centre de la page de présentation du projet de la console Firebase , cliquez sur l'icône Web ( ) pour lancer le workflow de configuration.

    Si vous avez déjà ajouté une application à votre projet Firebase, cliquez sur Ajouter une application pour afficher les options de la plate-forme.

  2. Saisissez le surnom de votre application.
    Ce pseudo est un identifiant interne pratique et n'est visible que par vous dans la console Firebase.

  3. (Facultatif) Configurez Firebase Hosting pour votre application Web.

    • Vous pouvez configurer Firebase Hosting maintenant ou plus tard . Vous pouvez également lier votre Firebase Web App à un site d'hébergement à tout moment dans les paramètres de votre projet .

    • Si vous choisissez de configurer l'hébergement maintenant, sélectionnez un site dans la liste déroulante pour créer un lien vers votre application Web Firebase.

      • Cette liste affiche le site d'hébergement par défaut de votre projet et tous les autres sites que vous avez configurés dans votre projet.

      • Tout site que vous avez déjà lié à une application Web Firebase n'est pas disponible pour des liens supplémentaires. Chaque site d'hébergement ne peut être lié qu'à une seule application Web Firebase.

  4. Cliquez sur Enregistrer l'application .

Étape 3 : Ajouter des SDK Firebase et initialiser Firebase

Vous pouvez ajouter l'un des produits Firebase pris en charge à votre application.

La façon dont vous ajoutez des SDK Firebase à votre application dépend de si vous avez choisi d'utiliser Firebase Hosting pour votre application, des outils que vous utilisez avec votre application (comme un bundler) ou si vous configurez une application Node.js.

À partir des URL d'hébergement

Lorsque vous utilisez Firebase Hosting, vous pouvez configurer votre application pour charger dynamiquement les bibliothèques du SDK JavaScript Firebase à partir d'URL réservées. En savoir plus sur l' ajout de SDK via des URL d'hébergement réservées .

Avec cette option de configuration, après le déploiement sur Firebase , votre application extrait automatiquement l'objet de configuration Firebase du projet Firebase sur lequel vous avez déployé. Vous pouvez déployer la même base de code sur plusieurs projets Firebase, mais vous n'avez pas à suivre la configuration Firebase que vous utilisez pour firebase.initializeApp() .

Cette option de configuration fonctionne également pour tester votre application Web localement .

  1. Pour inclure uniquement des produits Firebase spécifiques (par exemple, Analytics, Authentication ou Cloud Firestore), ajoutez les scripts suivants au bas de votre <body> , mais avant d'utiliser des services Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/7.18.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/7.18.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/7.18.0/firebase-auth.js"></script>
      <script src="/__/firebase/7.18.0/firebase-firestore.js"></script>
    </body>
    


  2. Initialisez Firebase dans votre application (inutile d'inclure votre objet de configuration Firebase lorsque vous utilisez des URL d'hébergement réservées):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

Depuis le CDN

Vous pouvez configurer l'importation partielle du SDK JavaScript Firebase et charger uniquement les produits Firebase dont vous avez besoin. Firebase stocke chaque bibliothèque du SDK JavaScript Firebase sur notre CDN global (Content Delivery Network).

  1. Pour inclure uniquement des produits Firebase spécifiques (par exemple, Authentication et Cloud Firestore), ajoutez les scripts suivants au bas de votre <body> , mais avant d'utiliser des services Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-firestore.js"></script>
    </body>
    


  2. Initialisez Firebase dans votre application:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

Utilisation de regroupeurs de modules

Vous pouvez configurer l'importation partielle du SDK JavaScript Firebase et charger uniquement les produits Firebase dont vous avez besoin. Si vous utilisez un bundler (tel que Browserify ou Webpack), vous pouvez import des produits Firebase individuels lorsque vous en avez besoin.

  1. Installez le SDK JavaScript Firebase:

    1. Si vous n'avez pas encore de fichier package.json , créez-en un en exécutant la commande suivante à partir de la racine de votre projet JavaScript:

      npm init

    2. Installez le firebase npm et enregistrez-le dans votre fichier package.json en exécutant:

      npm install --save firebase

  2. Pour inclure uniquement des produits Firebase spécifiques (comme l'authentification et Cloud Firestore), import modules Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. Initialisez Firebase dans votre application:

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Applications Node.js

  1. Installez le SDK JavaScript Firebase:

    1. Si vous ne disposez pas déjà d'un fichier package.json , créez-en un en exécutant la commande suivante à partir de la racine de votre projet JavaScript:

      npm init
    2. Installez le firebase npm et enregistrez-le dans votre fichier package.json en exécutant:

      npm install --save firebase
  2. Utilisez l'une des options suivantes pour utiliser le module Firebase dans votre application:

    • Vous pouvez require modules à partir de n'importe quel fichier JavaScript

      Pour inclure uniquement des produits Firebase spécifiques (comme l'authentification et Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • Vous pouvez utiliser ES2015 pour import modules

      Pour inclure uniquement des produits Firebase spécifiques (comme l'authentification et Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import * as firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. Initialisez Firebase dans votre application:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Objet de configuration Firebase

Pour initialiser Firebase dans votre application, vous devez fournir la configuration de projet Firebase de votre application.

Si vous utilisez des URL d'hébergement réservées , votre configuration Firebase est automatiquement extraite de votre projet Firebase, vous n'avez donc pas besoin de fournir explicitement l'objet dans votre code.

Si vous activez de nouveaux services Firebase dans votre projet Firebase après avoir créé votre application Web Firebase (en particulier Cloud Storage ou Google Analytics), assurez-vous de mettre à jour votre objet de configuration Firebase dans votre application ou, si vous utilisez des URL réservées, de le redéployer sur votre site . Obtenez votre objet de configuration mis à jour dans la console Firebase.

Nous ne recommandons pas modifier manuellement les champs de votre objet config, mais être particulièrement attentif à ne pas modifier les éléments suivants nécessaires « options »: Firebase apiKey , projectId et appID . Si vous initialisez votre application avec des valeurs non valides ou manquantes pour l'une de ces options Firebase requises, les utilisateurs de votre application peuvent rencontrer de graves problèmes.

Voici le format d'un objet de configuration avec tous les services activés (ces valeurs sont automatiquement renseignées):

var firebaseConfig = {
  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",
};

Voici un objet de configuration rempli d'exemples de valeurs:

var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

A tout moment, vous pouvez obtenir votre objet de configuration Firebase .

Étape 4 : (Facultatif) Installez CLI et déployez sur Firebase Hosting

Si vous avez lié votre application Web Firebase à un site d'hébergement Firebase, vous pouvez déployer le contenu et la configuration de votre site maintenant (lors de la configuration de votre application Web) ou à tout moment ultérieurement.

Pour déployer sur Firebase, vous utiliserez la CLI Firebase, un outil de ligne de commande.

  1. Consultez la documentation de la CLI Firebase pour savoir comment installer la CLI ou mettre à jour sa dernière version .

  2. Initialisez votre projet Firebase. Exécutez la commande suivante à partir de la racine de votre répertoire d'application local:

    firebase init

  3. Déployez votre contenu et votre configuration d'hébergement sur Firebase Hosting.

    Site d'hébergement par défaut

    Par défaut, chaque projet Firebase a des sous-domaines gratuits sur les domaines web.app et firebaseapp.com ( project-id .web.app et project-id .firebaseapp.com ).

    1. Déployez sur votre site. Exécutez la commande suivante à partir du répertoire racine de votre application:

      firebase deploy
    2. Affichez votre site sur l'un de vos sites par défaut:

      • project-id .web.app
      • project-id .firebaseapp.com

    Site d'hébergement non par défaut

    Les projets Firebase prennent en charge plusieurs sites (ceux-ci sont considérés comme vos sites non par défaut ). Vous pouvez ajouter des sites supplémentaires à votre projet pendant le workflow de configuration de l'application Web de la console ou depuis la page d'hébergement de la console.

    1. Ajoutez votre site à votre fichier firebase.json (qui a été créé lors de l' firebase init ).

      Notez que cette configuration firebase.json suppose que vous disposez de référentiels distincts pour chacun de vos sites.

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. Déployez sur votre site. Exécutez la commande suivante à partir du répertoire racine de votre application:

      firebase deploy --only hosting:site-name
    3. Affichez votre site sur:

      • site-name .web.app
      • site-name .firebaseapp.com

Étape 5 : accédez à Firebase dans votre application

Le SDK JavaScript Firebase prend en charge les produits Firebase suivants. Chaque produit est facultatif et est accessible à partir de l'espace de noms firebase .

Découvrez les méthodes disponibles dans la documentation de référence Firebase JavaScript .

Produit Firebase Espace de noms la toile Node.js
Analytique firebase.analytics()
Authentification firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions for Firebase Client SDK firebase.functions()
Messagerie cloud firebase.messaging()
Stockage en ligne firebase.storage()
Surveillance des performances ( version bêta ) firebase.performance()
Base de données en temps réel firebase.database()
Remote Config ( version bêta ) firebase.remoteConfig()

Bibliothèques disponibles

Options de configuration supplémentaires

Retarder le chargement des SDK Firebase (à partir du CDN)

Vous pouvez retarder l'inclusion des SDK Firebase jusqu'à ce que la page entière soit chargée.

  1. Ajoutez un indicateur de defer à chaque balise de script pour les SDK Firebase, puis différez l'initialisation de Firebase à l'aide d'un deuxième script, par exemple:

    <script defer src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/7.18.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/7.18.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Créez un fichier init-firebase.js , puis incluez les éléments suivants dans le fichier:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Utilisez plusieurs projets Firebase dans une seule application

Dans la plupart des cas, vous n'avez qu'à initialiser Firebase dans une seule application par défaut. Vous pouvez accéder à Firebase à partir de cette application de deux manières équivalentes:

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

Parfois, cependant, vous devez accéder à plusieurs projets Firebase en même temps. Par exemple, vous souhaiterez peut-être lire les données de la base de données d'un projet Firebase mais stocker les fichiers dans un autre projet Firebase. Ou vous voudrez peut-être authentifier un projet tout en gardant un deuxième projet non authentifié.

Le SDK JavaScript Firebase vous permet d'initialiser et d'utiliser plusieurs projets Firebase dans une seule application en même temps, chaque projet utilisant ses propres informations de configuration Firebase.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

Exécutez un serveur Web local pour le développement

Si vous créez une application Web, certaines parties du SDK JavaScript Firebase nécessitent que vous diffusiez votre application Web à partir d'un serveur plutôt que du système de fichiers local. Vous pouvez utiliser la CLI Firebase pour exécuter un serveur local.

Si vous avez déjà configuré Firebase Hosting pour votre application, vous avez peut-être déjà effectué plusieurs des étapes ci-dessous.

Pour servir votre application Web, vous utiliserez la CLI Firebase, un outil de ligne de commande.

  1. Consultez la documentation de la CLI Firebase pour savoir comment installer la CLI ou mettre à jour sa dernière version .

  2. Initialisez votre projet Firebase. Exécutez la commande suivante à partir de la racine de votre répertoire d'application local:

    firebase init

  3. Démarrez le serveur local pour le développement. Exécutez la commande suivante à partir de la racine de votre répertoire local d'application:

    firebase serve

Prochaines étapes

En savoir plus sur Firebase:

Ajoutez des services Firebase à votre application: