Google est engagé à faire progresser l'équité raciale pour les communautés noires. Regarde comment.
Cette page a été traduite par l'API Cloud Translation.
Switch to English

Ajouter Firebase à votre projet JavaScript

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

Conditions préalables

Si vous ne possédez pas déjà un projet JavaScript et que vous voulez juste essayer un produit Firebase vous pouvez télécharger un de nos échantillons 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.

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

Étape 2: Enregistrez votre application avec Firebase

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

Visitez Comprendre Firebase projets pour en savoir plus sur les meilleures pratiques et considérations pour ajouter des applications à un projet Firebase.

  1. Au centre de la page d'aperçu du projet de la console Firebase , cliquez sur l'icône Web ( ) pour lancer le flux de travail de configuration.

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

  2. Entrez le surnom de votre application.
    Ce surnom est un interne, identifiant de commodité et est seulement pour vous visible dans la console Firebase.

  3. (Facultatif) Configuration Firebase Hébergement pour votre application web.

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

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

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

      • Tout site que vous avez déjà lié à une application Web Firebase est disponible pour la liaison supplémentaire. Chaque site d'hébergement ne peut être lié à une seule Firebase Web App.

  4. Cliquez sur l' application de vous inscrire.

Étape 3: Ajouter Firebase SDKs et initialiser Firebase

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

Comment vous ajoutez à votre Firebase SDKs application dépend si vous avez choisi d'utiliser Firebase Hosting pour votre application, quel outillage vous utilisez avec votre application (comme un Bundler), ou si vous configurez une application Node.js.

URL à partir d'hébergement

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

Avec cette option de configuration, une fois que vous déployez à Firebase , votre application tire automatiquement l'objet de configuration Firebase du projet Firebase auquel vous avez déployé. Vous pouvez déployer le même code de base à plusieurs projets Firebase, mais vous ne devez pas suivre la configuration Firebase que vous utilisez pour firebase.initializeApp() .

Cette option d'installation fonctionne également pour tester votre application web localement .

  1. Pour inclure uniquement les produits spécifiques Firebase (par exemple, Google Analytics, l' authentification, ou Nuage Firestore), ajoutez les scripts suivants au fond de votre <body> balise, mais avant d'utiliser les 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.17.1/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/7.17.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/7.17.1/firebase-auth.js"></script>
      <script src="/__/firebase/7.17.1/firebase-firestore.js"></script>
    </body>
     


  2. Initialize Firebase dans votre application (pas besoin d'inclure votre objet config Firebase lors de l'utilisation réservés URL d'hébergement):

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

De CDN

Vous pouvez configurer l'importation partielle du JavaScript Firebase SDK et charger uniquement les produits Firebase que vous avez besoin. magasins Firebase chaque bibliothèque du SDK Firebase JavaScript sur notre (réseau de diffusion de contenu) global CDN.

  1. Pour inclure uniquement les produits Firebase spécifiques (par exemple, l' authentification et le Cloud Firestore), ajoutez les scripts suivants au fond de votre <body> balise, mais avant d'utiliser les 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.17.1/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.17.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>
    </body>
     


  2. Initialiser 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>
    

L'utilisation du module fardeleuses

Vous pouvez configurer l'importation partielle du JavaScript Firebase SDK et charger uniquement les produits Firebase que vous avez besoin. Si vous utilisez un Bundler (comme Browserify ou webpack), vous pouvez import différents produits Firebase lorsque vous en avez besoin.

  1. Installez le JavaScript Firebase SDK:

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

      npm init

    2. Installez le firebase package NPM et enregistrez - le sur votre package.json fichier en cours d' exécution:

      npm install --save firebase

  2. Pour inclure uniquement les produits spécifiques Firebase (comme l' authentification et Cloud Firestore), import des 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. Initialiser Firebase dans votre application:

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

Node.js applications

  1. Installez le JavaScript Firebase SDK:

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

      npm init
    2. Installez le firebase package NPM et enregistrez - le sur votre package.json fichier en cours d' exécution:

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

    • Vous pouvez require des modules de tout fichier JavaScript

      Pour inclure uniquement des produits spécifiques Firebase (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 à l' import des modules

      Pour inclure uniquement des produits spécifiques Firebase (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. Initialiser Firebase dans votre application:

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

objet config Firebase

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

Si vous utilisez réservé URL d' hébergement , votre config Firebase est tiré automatiquement de votre projet Firebase, de sorte que vous n'avez pas besoin de fournir explicitement l'objet dans votre code.

Si vous activez les 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 config Firebase dans votre application ou, si vous utilisez des URL réservés, 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 une de ces options Firebase nécessaires, les utilisateurs de votre application peuvent rencontrer des problèmes graves.

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

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 avec des 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 config Firebase .

Étape 4: (Facultatif) Installez CLI et déployer à Firebase Hébergement

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

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

  1. Visitez la documentation Firebase CLI pour savoir comment installer la CLI ou mise à jour à sa dernière version .

  2. Initialiser votre projet Firebase. Exécutez la commande suivante à partir de la racine de votre répertoire d'applications locales:

    firebase init

  3. Déployez votre contenu et de configuration d'hébergement à l'hébergement Firebase.

    site d'hébergement par défaut

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

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

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

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

    Non par défaut du site d'hébergement

    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 soit pendant le flux de travail de configuration Web App de la console ou à partir de la console page d' hébergement .

    1. Ajoutez votre site à votre firebase.json fichier (qui a été créé au cours d' firebase init ).

      Notez que cette firebase.json configuration suppose que vous avez des dépôts séparés pour chacun de vos sites.

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

      firebase deploy --only hosting: site-name 
    3. Voir votre site soit:

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

Étape 5: Firebase Access dans votre application

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

En savoir plus sur les méthodes disponibles dans la documentation de référence Firebase JavaScript .

produit Firebase namespace la toile Node.js
Analytique firebase.analytics()
Authentification firebase.auth()
cloud Firestore firebase.firestore()
Fonctions Cloud pour Firebase Client SDK firebase.functions()
cloud Messaging firebase.messaging()
Stockage en ligne firebase.storage()
Suivi des performances (libération bêta) firebase.performance()
Base de données en temps réel firebase.database()
Config à distance (de version bêta) firebase.remoteConfig()

bibliothèques disponibles

Options de configuration supplémentaires

Délai de chargement Firebase SDKs (de CDN)

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

  1. Ajouter un defer drapeau à chaque script balise pour la Firebase SDKs, puis reporter l'initialisation de Firebase à l' aide d' un second script, par exemple:

     <script defer src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
     
  2. Créer un init-firebase.js fichier, puis inclure 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);
     

Utiliser plusieurs projets dans Firebase une seule application

Dans la plupart des cas, il suffit d'initialiser Firebase dans une seule application par défaut. Vous pouvez accéder à Firebase 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 avez besoin d'accéder à plusieurs projets Firebase en même temps. Par exemple, vous pouvez lire les données de la base de données d'un projet Firebase mais les fichiers stocker dans un projet Firebase différent. Ou vous pourriez vouloir authentifier un projet tout en gardant un second projet non authentifié.

Le SDK Firebase JavaScript vous permet d'initialiser et d'utiliser plusieurs projets Firebase en une seule application en même temps, chaque projet en 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écuter un serveur web local pour le développement

Si vous construisez une application web, certaines parties du JavaScript Firebase SDK exigent que vous servez 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 d'hébergement pour votre application, vous pourriez avoir déjà rempli plusieurs des étapes ci-dessous.

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

  1. Visitez la documentation Firebase CLI pour savoir comment installer la CLI ou mise à jour à sa dernière version .

  2. Initialiser votre projet Firebase. Exécutez la commande suivante à partir de la racine de votre répertoire d'applications locales:

    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 d'applications locales:

    firebase serve

Prochaines étapes

En savoir plus sur Firebase:

Ajouter des services à votre application Firebase: