Google is committed to advancing racial equity for Black communities. See how.
Эта страница была переведа с помощью Cloud Translation API.
Switch to English

Добавьте Firebase в свой проект JavaScript

Следуйте этому руководству, чтобы использовать Firebase JavaScript SDK в своем веб-приложении или в качестве клиента для доступа конечных пользователей, например, в настольном приложении Node.js или в приложении IoT.

Предпосылки

  • Установите предпочтительный редактор или IDE.

  • Войдите в Firebase, используя свою учетную запись Google.

Если у вас еще нет проекта JavaScript и вы просто хотите опробовать продукт Firebase, вы можете загрузить один из наших образцов быстрого запуска .

Шаг 1. Создайте проект Firebase

Прежде чем вы сможете добавить Firebase в свое приложение JavaScript, вам необходимо создать проект Firebase для подключения к вашему приложению.

Посетите Understand Firebase Projects, чтобы узнать больше о проектах Firebase и лучших практиках добавления приложений в проекты.

Шаг 2. Зарегистрируйте приложение в Firebase

После того, как у вас есть проект Firebase, вы можете добавить в него свое веб-приложение.

Посетите страницу Understand Firebase Projects, чтобы узнать больше о передовых методах и рекомендациях по добавлению приложений в проект Firebase.

  1. В центре страницы обзора проекта консоли Firebase щелкните значок Интернета ( ), чтобы запустить рабочий процесс настройки.

    Если вы уже добавили приложение в свой проект Firebase, нажмите « Добавить приложение», чтобы отобразить параметры платформы.

  2. Введите псевдоним вашего приложения.
    Этот псевдоним является внутренним удобным идентификатором и виден только вам в консоли Firebase.

  3. (Необязательно) Настройте хостинг Firebase для своего веб-приложения.

    • Вы можете настроить хостинг Firebase сейчас или позже . Вы также можете связать свое веб-приложение Firebase с сайтом хостинга в любое время в настройках вашего проекта .

    • Если вы решили настроить хостинг сейчас, выберите сайт из раскрывающегося списка, чтобы создать ссылку на ваше веб-приложение Firebase.

      • В этом списке отображается сайт хостинга вашего проекта по умолчанию и любые другие сайты, которые вы создали в своем проекте.

      • Любой сайт, который вы уже связали с веб-приложением Firebase, недоступен для дополнительных ссылок. Каждый сайт хостинга можно связать только с одним веб-приложением Firebase.

  4. Щелкните Зарегистрировать приложение .

Шаг 3. Добавьте SDK Firebase и инициализируйте Firebase

Вы можете добавить в свое приложение любой из поддерживаемых продуктов Firebase .

То, как вы добавляете Firebase SDK в свое приложение, зависит от того, выбрали ли вы использование Firebase Hosting для своего приложения, какие инструменты вы используете в своем приложении (например, сборщик) или настраиваете ли вы приложение Node.js.

Из URL-адресов хостинга

Когда вы используете Firebase Hosting, вы можете настроить приложение для динамической загрузки библиотек Firebase JavaScript SDK с зарезервированных URL-адресов. Узнайте больше о добавлении SDK через зарезервированные URL-адреса хостинга .

При использовании этого варианта настройки после развертывания в Firebase ваше приложение автоматически извлекает объект конфигурации Firebase из проекта Firebase, в котором вы развернули. Вы можете развернуть одну и ту же кодовую базу в нескольких проектах Firebase, но вам не нужно отслеживать конфигурацию Firebase, которую вы используете для firebase.initializeApp() .

Этот вариант настройки также подходит для локального тестирования вашего веб-приложения .

  1. Чтобы включить только определенные продукты Firebase (например, Analytics, Authentication или Cloud Firestore), добавьте следующие скрипты в конец <body> , но перед использованием каких-либо сервисов 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.21.1/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/7.21.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/7.21.1/firebase-auth.js"></script>
      <script src="/__/firebase/7.21.1/firebase-firestore.js"></script>
    </body>
    


  2. Инициализируйте Firebase в своем приложении (нет необходимости включать объект конфигурации Firebase при использовании зарезервированных URL-адресов хостинга):

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

Из CDN

Вы можете настроить частичный импорт Firebase JavaScript SDK и загружать только те продукты Firebase, которые вам нужны. Firebase хранит каждую библиотеку Firebase JavaScript SDK в нашей глобальной сети доставки контента (CDN).

  1. Чтобы включить только определенные продукты Firebase (например, Authentication и Cloud Firestore), добавьте следующие скрипты в конец <body> , но перед использованием каких-либо сервисов 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.21.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.21.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-firestore.js"></script>
    </body>
    


  2. Инициализируйте Firebase в своем приложении:

    <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>
    

Использование сборщиков модулей

Вы можете настроить частичный импорт Firebase JavaScript SDK и загружать только те продукты Firebase, которые вам нужны. Если вы используете сборщик (например, Browserify или webpack), вы можете import отдельные продукты Firebase, когда они вам нужны.

  1. Установите Firebase JavaScript SDK:

    1. Если у вас еще нет файла package.json , создайте его, выполнив следующую команду из корня вашего проекта JavaScript:

      npm init

    2. Установите пакет firebase npm и сохраните его в файле package.json , запустив:

      npm install --save firebase

  2. Чтобы включить только определенные продукты Firebase (например, Authentication и Cloud Firestore), import модули 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. Инициализируйте Firebase в своем приложении:

    // 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);
    

Приложения Node.js

  1. Установите Firebase JavaScript SDK:

    1. Если у вас еще нет файла package.json , создайте его, выполнив следующую команду из корня вашего проекта JavaScript:

      npm init
    2. Установите пакет firebase npm и сохраните его в файле package.json , запустив:

      npm install --save firebase
  2. Используйте один из следующих вариантов, чтобы использовать модуль Firebase в своем приложении:

    • Вы можете require модули из любого файла JavaScript

      Чтобы включить только определенные продукты Firebase (например, Authentication и 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");
      


    • Вы можете использовать ES2015 для import модулей

      Чтобы включить только определенные продукты Firebase (например, Authentication и 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. Инициализируйте Firebase в своем приложении:

    // 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);
    

Узнайте об объекте конфигурации Firebase

Чтобы инициализировать Firebase в вашем приложении, вам необходимо предоставить конфигурацию проекта Firebase вашего приложения. Вы можете получить объект конфигурации Firebase в любое время.

  • Если вы используете зарезервированные URL-адреса хостинга , ваша конфигурация Firebase автоматически извлекается из вашего проекта Firebase, поэтому вам не нужно явно указывать объект конфигурации в своем коде.

  • Мы не рекомендуем вручную редактирования объекта конфигурации, особенно следующие обязательные «Firebase опции»: apiKey , projectId и appID . Если вы инициализируете свое приложение с недопустимыми или отсутствующими значениями для этих обязательных «параметров Firebase», пользователи вашего приложения могут столкнуться с серьезными проблемами.

  • Если вы включили Google Analytics в своем проекте Firebase, ваш объект конфигурации содержит поле measurementId . Подробнее об этом поле можно узнать на странице начала работы с Google Analytics .

Вот формат объекта конфигурации со всеми включенными службами (эти значения подставляются автоматически):

// 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",
};

Вот объект конфигурации с примерами значений:

// 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"
};

Шаг 4. (Необязательно) Установите интерфейс командной строки и разверните его на хостинге Firebase.

Если вы связали свое веб-приложение Firebase с сайтом хостинга Firebase, вы можете развернуть содержимое и конфигурацию своего сайта сейчас (при настройке веб-приложения) или в любое время позже.

Для развертывания в Firebase вы будете использовать Firebase CLI, инструмент командной строки.

  1. Посетите документацию Firebase CLI, чтобы узнать, как установить CLI или обновить его до последней версии .

  2. Инициализируйте свой проект Firebase. Выполните следующую команду из корня локального каталога приложения:

    firebase init

  3. Разверните свой контент и конфигурацию хостинга на Firebase Hosting.

    Хостинг по умолчанию

    По умолчанию, каждый проект Firebase имеет свободные поддомены на web.app и firebaseapp.com доменов ( project-id .web.app и project-id .firebaseapp.com ).

    1. Разверните на своем сайте. Выполните следующую команду из корневого каталога вашего приложения:

      firebase deploy
    2. Просмотрите свой сайт на любом из сайтов по умолчанию:

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

    Сайт, не являющийся хостингом по умолчанию

    Проекты Firebase поддерживают несколько сайтов (они считаются вашими сайтами не по умолчанию ). Вы можете добавить дополнительные сайты в свой проект либо во время рабочего процесса настройки веб-приложения консоли, либо со страницы хостинга консоли.

    1. Добавьте свой сайт в файл firebase.json (который был создан во время firebase init ).

      Обратите внимание, что эта конфигурация firebase.json предполагает, что у вас есть отдельные репозитории для каждого из ваших сайтов.

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. Разверните на своем сайте. Выполните следующую команду из корневого каталога вашего приложения:

      firebase deploy --only hosting:site-name
    3. Просмотрите свой сайт по адресу:

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

Шаг 5. Откройте Firebase в своем приложении

SDK Firebase JavaScript поддерживает следующие продукты Firebase. Каждый продукт является необязательным, и к нему можно получить доступ из пространства имен firebase .

Узнайте о доступных методах в справочной документации Firebase JavaScript .

Продукт Firebase Пространство имен Интернет Node.js
Аналитика firebase.analytics()
Аутентификация firebase.auth()
Cloud Firestore firebase.firestore()
Облачные функции для Firebase Client SDK firebase.functions()
Обмен сообщениями в облаке firebase.messaging()
Облачное хранилище firebase.storage()
Мониторинг производительности ( бета- версия) firebase.performance()
База данных в реальном времени firebase.database()
Remote Config ( бета- версия) firebase.remoteConfig()

Доступные библиотеки

Дополнительные параметры настройки

Отложенная загрузка SDK Firebase (из CDN)

Вы можете отложить включение Firebase SDK до тех пор, пока не загрузится вся страница.

  1. Добавьте флаг defer к каждому тегу script для SDK Firebase, затем отложите инициализацию Firebase с помощью второго скрипта, например:

    <script defer src="https://www.gstatic.com/firebasejs/7.21.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/7.21.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/7.21.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Создайте файл init-firebase.js , затем включите в него следующее:

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

Используйте несколько проектов Firebase в одном приложении

В большинстве случаев вам нужно инициализировать Firebase только в одном приложении по умолчанию. Вы можете получить доступ к Firebase из этого приложения двумя эквивалентными способами:

// 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();

Однако иногда вам нужно получить доступ к нескольким проектам Firebase одновременно. Например, вы можете захотеть прочитать данные из базы данных одного проекта Firebase, но сохранить файлы в другом проекте Firebase. Или вы можете захотеть аутентифицировать один проект, оставив второй проект без аутентификации.

SDK Firebase JavaScript позволяет одновременно инициализировать и использовать несколько проектов Firebase в одном приложении, при этом каждый проект использует собственную информацию о конфигурации 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();

Запустите локальный веб-сервер для разработки

Если вы создаете веб-приложение, некоторые части Firebase JavaScript SDK требуют, чтобы вы обслуживали свое веб-приложение с сервера, а не из локальной файловой системы. Вы можете использовать интерфейс командной строки Firebase для запуска локального сервера.

Если вы уже настроили хостинг Firebase для своего приложения, возможно, вы уже выполнили несколько шагов ниже.

Для обслуживания своего веб-приложения вы будете использовать Firebase CLI, инструмент командной строки.

  1. Посетите документацию Firebase CLI, чтобы узнать, как установить CLI или обновить его до последней версии .

  2. Инициализируйте свой проект Firebase. Выполните следующую команду из корня локального каталога приложения:

    firebase init

  3. Запустите локальный сервер для разработки. Выполните следующую команду из корня локального каталога приложения:

    firebase serve

Следующие шаги

Узнайте о Firebase:

Добавьте сервисы Firebase в свое приложение: