Google 致力于为黑人社区推动种族平等。查看具体举措
Эта страница переведена с помощью Cloud Translation API.
Switch to English

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

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

Предпосылки

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

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

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

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

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

Посетите раздел «Общие сведения о проектах Firebase», чтобы узнать больше о проектах 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 предоставляет библиотеки JavaScript для большинства продуктов Firebase, включая Remote Config, FCM и другие. Вы можете добавить в свое приложение любую из доступных библиотек .

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

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

Вы можете настроить частичный импорт 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 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. Инициализируйте 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);
    

Из 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/8.2.10/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.2.10/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.2.10/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>
    

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


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

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

Приложения 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 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()
Облачные функции для клиентского SDK Firebase firebase.functions()
Обмен сообщениями в облаке firebase.messaging()
Облачное хранилище firebase.storage()
Мониторинг производительности ( бета- версия) firebase.performance()
База данных в реальном времени firebase.database()
Remote Config ( бета- версия) firebase.remoteConfig()

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

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

Узнайте о Firebase:

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