Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
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 des utilisateurs finaux, par exemple, dans un bureau Node.js ou une application IoT.

Conditions préalables

Si vous ne possédez 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 surnom 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

Firebase fournit des bibliothèques JavaScript pour la plupart des produits Firebase, y compris Remote Config, FCM, etc. Vous pouvez ajouter l'une des bibliothèques disponibles à votre application.

La façon dont vous ajoutez des SDK Firebase à votre application Web dépend de si vous avez choisi d'utiliser Firebase Hosting pour votre application, des outils que vous utilisez avec votre application (comme un regroupeur de modules) ou si vous configurez un Node.js app. Pour plus d'informations sur le choix entre ces alternatives, consultez Méthodes pour ajouter les SDK Web à votre application .

Si vous souhaitez essayer le nouveau SDK bêta optimisé pour le développement d'applications modulaires, sélectionnez l'option pour la version 9 (bêta). Gardez à l'esprit qu'il n'y a aucune obligation de support technique dans une version bêta.

Avec npm

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 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. 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 firebase from "firebase/app";
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // 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
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

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 (réseau de diffusion de contenu) global.

  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/8.5.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/8.5.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.5.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
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

À 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/8.5.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.5.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.5.0/firebase-auth.js"></script>
      <script src="/__/firebase/8.5.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>
    

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 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
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

En savoir plus sur l'objet de configuration Firebase

Pour initialiser Firebase dans votre application, vous devez fournir la configuration de projet Firebase de votre application. Vous pouvez obtenir votre objet de configuration Firebase à tout moment.

  • 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 votre objet de configuration dans votre code.

  • Nous ne recommandons pas modifier manuellement votre objet de configuration, en particulier les suivantes nécessaires « options » Firebase: apiKey , projectId et appID . Si vous initialisez votre application avec des valeurs non valides ou manquantes pour ces "options Firebase" requises, les utilisateurs de votre application peuvent rencontrer de graves problèmes.

  • Si vous avez activé Google Analytics dans votre projet Firebase, votre objet de configuration contient le champ measurementId . En savoir plus sur ce champ sur la page de démarrage d'Analytics .

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

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
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 avec des exemples de valeurs:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
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"
};

É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 Firebase CLI, un outil de ligne de commande.

  1. Consultez la documentation de l'interface de ligne de commande Firebase pour savoir comment installer l'interface de ligne de commande 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 à partir de 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_ID",
          "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_ID
    3. Consultez votre site sur:

      • SITE_ID .web.app
      • SITE_ID .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 comme indiqué.

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

Produit Firebase Espace de noms (v8 et inférieur) 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

Prochaines étapes

En savoir plus sur Firebase:

Ajoutez des services Firebase à votre application: