Лаборатория веб-кода AngularFire

1. Обзор

В этом практическом занятии вы научитесь использовать AngularFire для создания веб-приложений, разработав и развернув чат-клиент с использованием продуктов и сервисов Firebase.

A chat app where users are discussing Firebase

Что вы узнаете

  • Создайте веб-приложение с использованием Angular и Firebase.
  • Синхронизация данных с использованием Cloud Firestore и Cloud Storage for Firebase.
  • Аутентифицируйте пользователей с помощью Firebase Authentication.
  • Разверните свое веб-приложение на Firebase App Hosting.
  • Отправляйте уведомления с помощью Firebase Cloud Messaging.
  • Собирайте данные о производительности вашего веб-приложения.

Что вам понадобится

  • Аккаунт на GitHub
  • Возможность перевести ваш проект Firebase на тарифный план Blaze.
  • IDE/текстовый редактор на ваш выбор, например WebStorm , Sublime или VS Code.
  • Менеджер пакетов npm , который обычно поставляется вместе с Node.js.
  • Терминал/консоль
  • Любой браузер на ваш выбор, например Chrome.
  • Пример кода из практического занятия (инструкции по получению кода см. на следующем шаге практического занятия).

2. Получите пример кода.

Создайте репозиторий GitHub.

Исходный код для данного практического занятия можно найти по адресу https://github.com/firebase/codelab-friendlychat-web . В репозитории содержатся примеры проектов для различных платформ. Однако в данном практическом занятии используется только каталог angularfire-start .

Скопируйте папку angularfire-start в свой репозиторий:

  1. С помощью терминала создайте на компьютере новую папку и перейдите в неё: 
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. Используйте npm-пакет giget , чтобы загрузить только папку angularfire-start : 
    npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
  3. Отслеживайте изменения локально с помощью Git: 
    git init

git add .

git commit -m "codelab starting point"

git branch -M main
  4. Создайте новый репозиторий GitHub: https://github.com/new . Назовите его как угодно.
    1. GitHub предоставит вам новый URL-адрес репозитория, который будет выглядеть либо как https://github.com/[user-name]/[repository-name].git [имя репозитория].git, либо как git@github.com:[user-name]/[repository-name].git . Скопируйте этот URL.
  5. Отправьте локальные изменения в свой новый репозиторий GitHub. Выполните следующую команду, заменив URL вашего репозитория на заполнитель your-repository-url . 
    git remote add origin your-repository-url

git push -u origin main
  6. Теперь вы должны увидеть стартовый код в своем репозитории GitHub.

3. Создайте и настройте проект Firebase.

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

  1. Войдите в консоль Firebase, используя свою учетную запись Google.
  2. Нажмите кнопку, чтобы создать новый проект, а затем введите название проекта (например, FriendlyChat ).
  3. Нажмите «Продолжить» .
  4. Если появится запрос, ознакомьтесь с условиями использования Firebase и примите их, после чего нажмите «Продолжить» .
  5. (Необязательно) Включите помощь ИИ в консоли Firebase (в Firebase она называется "Gemini").
  6. Для этого практического занятия вам не понадобится Google Analytics, поэтому отключите эту опцию.
  7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

Обновите свой тарифный план Firebase.

Для использования Firebase App Hosting и Cloud Storage for Firebase ваш проект Firebase должен быть привязан к тарифному плану с оплатой по мере использования (Blaze) , то есть он должен быть связан с учетной записью Cloud Billing .

Чтобы перейти на тарифный план Blaze для вашего проекта, выполните следующие шаги:

  1. В консоли Firebase выберите вариант обновления вашего тарифного плана .
  2. Выберите тарифный план Blaze. Следуйте инструкциям на экране, чтобы связать учетную запись Cloud Billing с вашим проектом.
    Если в рамках этого обновления вам потребовалось создать учетную запись Cloud Billing, возможно, вам нужно будет вернуться к процессу обновления в консоли Firebase, чтобы завершить обновление.

Добавьте веб-приложение Firebase в проект.

  1. Нажмите на значок веб-браузера 58d6543a156e56f9.png создать новое веб-приложение Firebase.
  2. Зарегистрируйте приложение под псевдонимом Friendly Chat . Не ставьте галочку рядом с пунктом «Также настройте Firebase Hosting для этого приложения» . Нажмите «Зарегистрировать приложение» .
  3. На следующем шаге вы увидите объект конфигурации. Сейчас он вам не нужен. Нажмите « Продолжить в консоль» .

Скриншот веб-приложения для регистрации

Настройка продуктов Firebase

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

  • Аутентификация Firebase позволит вашим пользователям легко входить в ваше приложение.
  • Cloud Firestore позволяет сохранять структурированные данные в облаке и получать мгновенные уведомления об изменениях данных.
  • Облачное хранилище Firebase для сохранения файлов в облаке.
  • Firebase App Hosting — это инструмент для сборки, размещения и обслуживания приложения.
  • Firebase Cloud Messaging для отправки push-уведомлений и отображения всплывающих уведомлений в браузере.
  • Firebase Performance Monitoring — это инструмент для сбора данных о производительности вашего приложения пользователями.

Для некоторых из этих продуктов требуется специальная настройка или их включение через консоль Firebase.

Настройка аутентификации

Чтобы пользователи могли входить в веб-приложение с помощью своих учетных записей Google, вы будете использовать метод входа через Google .

  1. В консоли Firebase перейдите в раздел «Аутентификация» .
  2. Нажмите « Начать» .
  3. В столбце «Дополнительные поставщики» нажмите Google > Включить .
  4. В текстовом поле «Публичное имя проекта» введите запоминающееся имя, например, My Next.js app .
  5. В раскрывающемся списке «Адрес электронной почты службы поддержки для проекта» выберите свой адрес электронной почты.
  6. Нажмите « Сохранить ».

Настройка Cloud Firestore

Веб-приложение использует Cloud Firestore для сохранения сообщений чата и получения новых сообщений.

Вот как настроить Cloud Firestore в вашем проекте Firebase:

  1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите базу данных Firestore .
  2. Нажмите «Создать базу данных» .
  3. Оставьте значение параметра " Идентификатор базы данных" равным (default) .
  4. Выберите местоположение для вашей базы данных, затем нажмите «Далее» .
    Для создания настоящего приложения вам следует выбрать местоположение, расположенное недалеко от ваших пользователей.
  5. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
    В дальнейшем в этом практическом занятии вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению, не добавив правила безопасности для вашей базы данных.
  6. Нажмите «Создать» .

Настройка облачного хранилища для Firebase

Веб-приложение использует Cloud Storage for Firebase для хранения, загрузки и обмена фотографиями.

Вот как настроить Cloud Storage для Firebase в вашем проекте Firebase:

  1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите «Хранилище» .
  2. Нажмите « Начать» .
  3. Выберите местоположение для вашего хранилища по умолчанию.
    Для регионов US-WEST1 , US-CENTRAL1 и US-EAST1 доступен тариф "Всегда бесплатно" от Google Cloud Storage. Для регионов во всех остальных регионах действуют тарифные планы и правила использования Google Cloud Storage .
  4. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
    В дальнейшем в этом практическом занятии вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению без добавления правил безопасности для вашего хранилища.
  5. Нажмите «Создать» .

4. Установите интерфейс командной строки Firebase.

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

  1. Установите CLI, выполнив следующую команду npm: 
npm -g install firebase-tools@latest
  1. Убедитесь в правильности установки интерфейса командной строки, выполнив следующую команду: 
firebase --version

Убедитесь, что версия Firebase CLI — v13.9.0 или более поздняя.

  1. Для авторизации Firebase CLI выполните следующую команду: 
firebase login

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

  1. Убедитесь, что ваша командная строка обращается к локальному каталогу angularfire-start вашего приложения.
  2. Свяжите ваше приложение с вашим проектом Firebase, выполнив следующую команду: 
firebase use --add
  1. При появлении запроса выберите идентификатор вашего проекта , а затем присвойте вашему проекту Firebase псевдоним.

Псевдоним полезен, если у вас несколько сред (production, staging и т. д.). Однако для этого практического занятия давайте просто воспользуемся псевдонимом default .

  1. Следуйте оставшимся инструкциям в командной строке.

5. Установите AngularFire

Перед запуском проекта убедитесь, что у вас установлены Angular CLI и AngularFire.

  1. В консоли выполните следующую команду: 
npm install -g @angular/cli
  1. Затем в консоли из каталога angularfire-start выполните следующую команду Angular CLI: 
ng add @angular/fire

Это установит все необходимые зависимости для вашего проекта.

  1. При появлении запроса снимите флажок с команды ng deploy -- hosting нажав пробел. Выберите следующие функции, используя клавиши со стрелками и пробел:
    • Authentication
    • Firestore
    • Cloud Messaging
    • Cloud Storage
  2. Нажмите enter и следуйте дальнейшим инструкциям.
  3. Создайте коммит с сообщением "Install AngularFire" и отправьте его в свой репозиторий GitHub.

6. Создайте бэкэнд для размещения приложений.

В этом разделе вы настроите бэкэнд для размещения приложений, чтобы отслеживать ветку в вашем репозитории Git.

К концу этого раздела у вас будет бэкэнд для размещения приложений, подключенный к вашему репозиторию в GitHub, который будет автоматически пересобирать и развертывать новую версию вашего приложения всякий раз, когда вы отправляете новый коммит в main ветку.

  1. Перейдите на страницу «Хостинг приложений» в консоли Firebase:

Нулевое состояние консоли хостинга приложений с кнопкой «Начать».

  1. Нажмите «Начать», чтобы запустить процесс создания бэкэнда. Настройте свой бэкэнд следующим образом:
  2. Следуйте инструкциям на первом шаге, чтобы подключить созданный ранее репозиторий GitHub.
  3. Настройте параметры развертывания:
    1. Оставьте корневой каталог в качестве /
    2. Установите рабочую ветку на main
    3. Включить автоматическое развертывание
  4. Назовите свой бэкэнд friendlychat-codelab .
  5. В разделе «Создать или связать веб-приложение Firebase» выберите веб-приложение, которое вы настроили ранее, из раскрывающегося списка «Выбрать существующее веб-приложение Firebase».
  6. Нажмите «Завершить и развернуть». Через некоторое время вы перейдете на новую страницу, где сможете увидеть статус вашей новой серверной части для размещения приложений!
  7. После завершения развертывания выберите свой бесплатный домен в разделе «Домены». Для начала работы может потребоваться несколько минут из-за распространения DNS-запросов.

Вы успешно развернули исходное веб-приложение! Каждый раз, когда вы отправляете новый коммит в main ветку вашего репозитория GitHub, в консоли Firebase начинается новая сборка и развертывание, и ваш сайт автоматически обновляется после завершения развертывания.

Нулевое состояние консоли хостинга приложений с кнопкой «Начать».

Вы должны увидеть экран входа в приложение FriendlyChat, который (пока!) не работает.

Приложение сейчас ничего не может сделать, но с вашей помощью скоро сможет!

Давайте теперь создадим приложение для чата в реальном времени.

7. Импортируйте и настройте Firebase.

Настройка Firebase

Вам потребуется настроить SDK Firebase, чтобы указать, какой проект Firebase вы используете.

  1. Перейдите в настройки проекта в консоли Firebase.
  2. В карточке «Ваши приложения» выберите псевдоним приложения, для которого вам нужен объект конфигурации.
  3. Выберите "Config" на панели фрагментов кода Firebase SDK.

Вы обнаружите, что для вас был сгенерирован файл среды /angularfire-start/src/environments/environment.ts .

  1. Скопируйте фрагмент кода объекта конфигурации и добавьте его в angularfire-start/src/firebase-config.js .

environment.ts 

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

Просмотр настроек AngularFire

Вы обнаружите, что выбранные вами в консоли функции были автоматически добавлены в файл /angularfire-start/src/app/app.config.ts . Это позволит вашему приложению использовать возможности и функции Firebase.

8. Настройка входа пользователя в систему.

Теперь AngularFire готов к использованию, поскольку он импортирован и инициализирован в app.config.ts . Далее вы реализуете вход пользователей в систему с помощью Firebase Authentication .

Добавить авторизованный домен

Аутентификация Firebase разрешает вход в систему только с определенного списка доменов, которые вы контролируете. Добавьте свой бесплатный домен App Hosting в этот список доменов:

  1. Перейдите в раздел «Хостинг приложений» .
  2. Скопируйте домен вашей серверной части.
  3. Перейдите в раздел «Настройки аутентификации» .
  4. Выберите вкладку «Авторизованные домены» .
  5. Нажмите «Добавить домен» и вставьте домен из административной панели вашего хостинга приложений.

Аутентифицируйте пользователей с помощью входа через Google.

В приложении при нажатии пользователем кнопки «Войти через Google» запускается функция login . Для этого практического задания вам нужно разрешить Firebase использовать Google в качестве поставщика идентификации. Вы будете использовать всплывающее окно, но Firebase предлагает несколько других способов .

  1. В подкаталоге /src/app/services/ откройте файл chat.service.ts .
  2. Найдите функцию login .
  3. Замените всю функцию следующим кодом.

chat.service.ts 

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

Функция logout активируется при нажатии пользователем кнопки «Выход» .

  1. Вернитесь к файлу src/app/services/chat.service.ts .
  2. Найдите функцию logout .
  3. Замените всю функцию следующим кодом.

chat.service.ts 

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

Отслеживание состояния аутентификации

Для соответствующего обновления пользовательского интерфейса необходим способ проверки того, авторизован пользователь или нет. AngularFire предоставляет функцию для получения Observable, который обновляется каждый раз при изменении состояния аутентификации. Это уже реализовано, но стоит взглянуть на это.

  1. Вернитесь к файлу src/app/services/chat.service.ts .
  2. Найдите присваивание переменной user$ .

chat.service.ts 

// observable that is updated when the auth state changes
user$ = user(this.auth);

Приведённый выше код вызывает функцию AngularFire user , которая возвращает наблюдаемый объект `user`. Она будет срабатывать каждый раз при изменении состояния аутентификации (когда пользователь входит в систему или выходит из неё). Компоненты шаблонов Angular в FriendlyChat используют этот наблюдаемый объект для обновления пользовательского интерфейса, перенаправления, отображения пользователя в навигационной панели заголовка и так далее.

Проверка входа в приложение

  1. Создайте коммит с сообщением "Добавление аутентификации Google" и отправьте его в свой репозиторий GitHub.
  2. Откройте страницу «Размещение приложений» в консоли Firebase и дождитесь завершения развертывания.
  3. В веб-приложении обновите страницу и войдите в приложение, используя кнопку входа и свою учетную запись Google. Если вы видите сообщение об ошибке auth/operation-not-allowed , убедитесь, что вы включили Google Sign-in в качестве поставщика аутентификации в консоли Firebase.
  4. После входа в систему должны отобразиться ваша фотография профиля и имя пользователя: angularfire-3.png

9. Запись сообщений в Cloud Firestore.

В этом разделе вы запишете некоторые данные в Cloud Firestore, чтобы заполнить пользовательский интерфейс приложения. Это можно сделать вручную с помощью консоли Firebase , но вы сделаете это в самом приложении, чтобы продемонстрировать базовую операцию записи в Cloud Firestore.

модель данных

Данные в Cloud Firestore разделены на коллекции, документы, поля и подколлекции. Каждое сообщение чата будет храниться как документ в коллекции верхнего уровня, называемой messages .

688d7bc5fb662b57.png

Добавьте сообщения в Cloud Firestore

Для хранения сообщений чата, написанных пользователями, вы будете использовать Cloud Firestore .

В этом разделе вы добавите функциональность для отправки пользователями новых сообщений в вашу базу данных. Нажатие пользователем кнопки «ОТПРАВИТЬ» запустит приведенный ниже фрагмент кода. Он добавит объект сообщения с содержимым полей сообщения в ваш экземпляр Cloud Firestore в коллекцию messages . Метод add() добавит в коллекцию новый документ с автоматически сгенерированным ID.

  1. Вернитесь к файлу src/app/services/chat.service.ts .
  2. Найдите функцию addMessage .
  3. Замените всю функцию следующим кодом.

chat.service.ts 

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

Проверка отправки сообщений

  1. Создайте коммит с сообщением "Post new chats to Firestore" и отправьте его в свой репозиторий GitHub.
  2. Откройте страницу «Размещение приложений» в консоли Firebase и дождитесь завершения развертывания.
  3. Обновите FriendlyChat. После входа в систему введите сообщение, например, «Привет!», и нажмите «ОТПРАВИТЬ» . Это запишет сообщение в Cloud Firestore. Однако вы пока не увидите данные в своем веб-приложении, поскольку вам еще нужно реализовать получение данных (следующий раздел практического задания).
  4. Вы можете увидеть добавленное сообщение в консоли Firebase. Откройте пользовательский интерфейс Emulator Suite. В разделе «Сборка» нажмите «База данных Firestore» (или нажмите здесь , и вы увидите коллекцию сообщений с добавленным сообщением):

6812efe7da395692.png

10. Читать сообщения

Синхронизация сообщений

Для чтения сообщений в приложении вам потребуется добавить наблюдаемый объект, который будет срабатывать при изменении данных, а затем создать элемент пользовательского интерфейса, отображающий новые сообщения.

Вам нужно будет добавить код, который будет отслеживать новые сообщения, добавленные из приложения. В этом коде вы получите снимок коллекции messages . Вы будете отображать только последние 12 сообщений чата, чтобы избежать отображения слишком длинной истории при загрузке.

  1. Вернитесь к файлу src/app/services/chat.service.ts .
  2. Найдите функцию loadMessages .
  3. Замените всю функцию следующим кодом.

chat.service.ts 

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

Чтобы отслеживать сообщения в базе данных, необходимо создать запрос к коллекции, используя функцию collection , чтобы указать, в какой коллекции находятся данные, которые вы хотите отслеживать. В приведенном выше коде вы отслеживаете изменения в коллекции messages , где хранятся сообщения чата. Вы также применяете ограничение, отслеживая только последние 12 сообщений с помощью limit(12) , и сортируете сообщения по дате с помощью orderBy('timestamp', 'desc') чтобы получить 12 самых новых сообщений.

Функция collectionData использует снимки состояния системы. Функция обратного вызова будет запущена при любых изменениях в документах, соответствующих запросу. Это может произойти, например, при удалении, изменении или добавлении сообщения. Подробнее об этом можно прочитать в документации Cloud Firestore .

Проверка синхронизации сообщений

  1. Создайте коммит с сообщением "Показать новые чаты в пользовательском интерфейсе" и отправьте его в свой репозиторий GitHub.
  2. Откройте страницу «Размещение приложений» в консоли Firebase и дождитесь завершения развертывания.
  3. Обновите FriendlyChat. Сообщения, созданные вами ранее в базе данных, должны отобразиться в пользовательском интерфейсе FriendlyChat (см. ниже). Можете писать новые сообщения; они должны появиться мгновенно.
  4. (Необязательно) Вы можете попробовать вручную удалять, изменять или добавлять новые сообщения непосредственно в разделе Firestore пакета эмулятора; любые изменения должны отобразиться в пользовательском интерфейсе.

Поздравляем! Вы читаете документы Cloud Firestore в своем приложении!

angularfire-2.png

11. Добавить функции искусственного интеллекта.

Вы будете использовать искусственный интеллект Google для добавления полезных вспомогательных функций в приложение для чата.

Получите ключ API Google AI

  1. Перейдите в Google AI Studio и нажмите «Создать ключ API».
  2. Выберите проект Firebase, который вы создали для этого практического занятия. В задании указан проект Google Cloud, но каждый проект Firebase является проектом Google Cloud.
  3. Нажмите «Создать ключ API» в существующем проекте.
  4. Скопируйте полученный ключ API.

Установите расширение

Это расширение развернет облачную функцию, которая будет запускаться каждый раз, когда новый документ добавляется в коллекцию messages в Firestore. Функция будет вызывать Gemini и записывать свой ответ обратно в поле response в документе.

  1. На странице «Создание чат-бота с использованием API Gemini» в консоли Firebase нажмите «Установить» .
  2. Следуйте инструкциям. На этапе настройки расширения установите следующие значения параметров:
    • Поставщик API Gemini: Google AI
    • Ключ API Google AI: вставьте созданный ранее ключ и нажмите «Создать секрет» .
    • Путь к коллекции Firestore: messages
    • Поле подсказки: text
    • Поле ответа: response
    • Поле заказа: timestamp
    • Контекст: Keep your answers short, informal, and helpful. Use emojis when possible.
  3. Нажмите «Установить расширение»
  4. Дождитесь завершения установки расширения.

Тестирование функции ИИ

В FriendlyChat уже есть код для чтения ответов от расширения с искусственным интеллектом. Все, что вам нужно сделать, это отправить новое сообщение в чате, чтобы протестировать его!

  1. Откройте FriendlyChat и отправьте сообщение.
  2. Через мгновение рядом с вашим сообщением должно появиться ответное сообщение. В конце него будет ✨ ai generated , чтобы было понятно, что оно было создано с помощью генеративного ИИ, а не реальным пользователем.

12. Отправьте изображения

Теперь вы добавите функцию, которая позволяет обмениваться изображениями.

Хотя Cloud Firestore хорошо подходит для хранения структурированных данных, Cloud Storage лучше подходит для хранения файлов. Cloud Storage for Firebase — это сервис хранения файлов/BLOB-объектов, и вы будете использовать его для хранения любых изображений, которыми пользователь делится через наше приложение.

Сохраняйте изображения в облачное хранилище.

Для этого практического задания вы уже добавили кнопку, которая запускает диалоговое окно выбора файла. После выбора файла вызывается функция saveImageMessage , и вы можете получить ссылку на выбранный файл. Функция saveImageMessage выполняет следующие действия:

  1. Создает в ленте чата «заглушку» — сообщение, чтобы пользователи видели анимацию «Загрузка» во время загрузки изображения.
  2. Загружает файл изображения в облачное хранилище по следующему пути: /<uid>/<file_name>
  3. Генерирует общедоступный URL-адрес для файла изображения.
  4. Обновляет сообщение в чате, добавляя URL-адрес недавно загруженного файла изображения вместо временного изображения загрузки.

Теперь добавим функцию отправки изображения:

  1. Вернитесь к файлу src/chat.service.ts .
  2. Найдите функцию saveImageMessage .
  3. Замените всю функцию следующим кодом.

chat.service.ts 

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);

    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Тестовая отправка изображений

  1. Создайте коммит с сообщением "Добавить возможность публиковать изображения" и отправьте его в свой репозиторий GitHub.
  2. Откройте страницу «Размещение приложений» в консоли Firebase и дождитесь завершения развертывания.
  3. Обновите FriendlyChat. После входа в систему нажмите кнопку загрузки изображения в левом нижнем углу. angularfire-4.png и выберите файл изображения с помощью средства выбора файлов. Если вам нужно изображение, можете смело использовать эту симпатичную картинку кофейной чашки .
  4. В пользовательском интерфейсе приложения должно появиться новое сообщение с выбранным вами изображением: angularfire-2.png

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

13. Показать уведомления

Теперь будет добавлена ​​поддержка уведомлений в браузере. Приложение будет уведомлять пользователей о новых сообщениях, опубликованных в чате. Firebase Cloud Messaging (FCM) — это кроссплатформенное решение для обмена сообщениями, позволяющее надежно доставлять сообщения и уведомления.

Добавить сотрудника службы FCM

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

Поставщик сообщений должен был быть уже настроен к моменту добавления AngularFire. Убедитесь, что следующий код присутствует в разделе imports файла /angularfire-start/src/app/app.config.ts 

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

Сервис-воркеру достаточно загрузить и инициализировать SDK Firebase Cloud Messaging, который позаботится об отображении уведомлений.

Получить токены устройства FCM

Когда на устройстве или в браузере включены уведомления, вам будет предоставлен токен устройства . Этот токен устройства используется для отправки уведомления на конкретное устройство или в конкретный браузер.

Когда пользователь входит в систему, вы вызываете функцию saveMessagingDeviceToken . Именно там вы получаете токен устройства FCM из браузера и сохраняете его в Cloud Firestore.

chat.service.ts

  1. Найдите функцию saveMessagingDeviceToken .
  2. Замените всю функцию следующим кодом.

chat.service.ts 

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });

        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

Однако этот код изначально работать не будет. Чтобы ваше приложение могло получить токен устройства, пользователь должен предоставить вашему приложению разрешение на отображение уведомлений (следующий шаг в этом практическом задании).

Запросить разрешение на отображение уведомлений

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

8b9d0c66dc36153d.png

  1. Вернитесь к файлу src/app/services/chat.service.ts .
  2. Найдите функцию requestNotificationsPermissions .
  3. Замените всю функцию следующим кодом.

chat.service.ts 

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();

    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

Получите токен вашего устройства

  1. Создайте коммит с сообщением "Добавить возможность публиковать изображения" и отправьте его в свой репозиторий GitHub.
  2. Откройте страницу «Размещение приложений» в консоли Firebase и дождитесь завершения развертывания.
  3. Обновите FriendlyChat. После входа в систему должно появиться диалоговое окно разрешения на отправку уведомлений: bd3454e6dbfb6723.png
  4. Нажмите «Разрешить» .
  5. Откройте консоль JavaScript в вашем браузере. Вы должны увидеть следующее сообщение: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  6. Скопируйте токен вашего устройства. Он понадобится вам на следующем этапе выполнения задания.

Отправить уведомление на ваше устройство

Теперь, когда у вас есть токен устройства, вы можете отправить уведомление.

  1. Откройте вкладку «Облачные сообщения» в консоли Firebase .
  2. Нажмите «Новое уведомление»
  3. Введите заголовок и текст уведомления.
  4. В правой части экрана нажмите «Отправить тестовое сообщение».
  5. Введите токен устройства, скопированный из консоли JavaScript вашего браузера, затем нажмите знак плюса (+).
  6. Нажмите «тест»

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

Если ваше приложение работает в фоновом режиме, в браузере должно появиться уведомление, как в этом примере:

de79e8638a45864c.png

14. Правила безопасности Cloud Firestore

Просмотреть правила безопасности базы данных

Cloud Firestore использует специальный язык правил для определения прав доступа, безопасности и проверки данных.

При настройке проекта Firebase в начале этого практического занятия вы выбрали использование правил безопасности по умолчанию в «тестовом режиме», чтобы не ограничивать доступ к хранилищу данных. В консоли Firebase на вкладке «Правила» в разделе «База данных» вы можете просмотреть и изменить эти правила.

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

Вам потребуется обновить правила, чтобы ограничить доступ, используя следующие правила:

firestore.rules 

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

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

Просмотреть правила безопасности облачного хранилища

Cloud Storage for Firebase использует специальный язык правил для определения прав доступа, безопасности и проверки данных.

При настройке проекта Firebase в начале этого практического занятия вы выбрали правило безопасности Cloud Storage по умолчанию, которое разрешает использование Cloud Storage только авторизованным пользователям. В консоли Firebase на вкладке «Правила» в разделе «Хранилище» вы можете просмотреть и изменить правила. Вы должны увидеть правило по умолчанию, которое разрешает любому авторизованному пользователю читать и записывать любые файлы в вашем хранилище.

Вам потребуется обновить правила, чтобы выполнить следующие действия:

  • Разрешите каждому пользователю записывать данные только в свои собственные папки.
  • Разрешить любому пользователю читать данные из облачного хранилища.
  • Убедитесь, что загружаемые файлы являются изображениями.
  • Ограничьте размер загружаемых изображений до максимум 5 МБ.

Это можно реализовать, используя следующие правила:

storage.rules 

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

15. Поздравляем!

Вы использовали Firebase для создания веб-приложения для чата в реальном времени!

Что вы уже осветили

  • Хостинг приложений Firebase
  • Аутентификация Firebase
  • Облачный Firestore
  • Firebase SDK для облачного хранилища
  • Firebase Cloud Messaging
  • Мониторинг производительности Firebase

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

Узнать больше

16. [Необязательно] Принудительное использование проверки приложений

Firebase App Check помогает защитить ваши сервисы от нежелательного трафика и предотвратить злоупотребления в бэкэнде. На этом шаге вы добавите проверку учетных данных и заблокируете неавторизованных клиентов с помощью App Check и reCAPTCHA Enterprise .

Для начала вам нужно включить проверку приложений (App Check) и reCaptcha.

Включение reCaptcha Enterprise

  1. В консоли Cloud найдите и выберите reCaptcha Enterprise в разделе «Безопасность».
  2. Включите службу, как будет предложено, и нажмите «Создать ключ» .
  3. Введите отображаемое имя в соответствии с подсказками и выберите «Веб-сайт» в качестве типа платформы.
  4. Добавьте развернутые URL-адреса в список доменов и убедитесь, что параметр «Использовать проверку флажком» не выбран .
  5. Нажмите «Создать ключ» и сохраните сгенерированный ключ в надежном месте. Он понадобится вам позже на этом шаге.

Включение проверки приложений

  1. В консоли Firebase найдите раздел «Сборка» на левой панели.
  2. Нажмите «Проверка приложения» , затем перейдите на вкладку «Способ входа» , чтобы перейти к разделу «Проверка приложения» .
  3. Нажмите «Зарегистрироваться» и введите ключ reCaptcha Enterprise, когда появится соответствующий запрос, затем нажмите «Сохранить» .
  4. В разделе «API» выберите «Хранилище» и нажмите «Применить» . Сделайте то же самое для Cloud Firestore .

Теперь должна работать функция проверки приложений! Обновите приложение и попробуйте просмотреть или отправить сообщения в чате. Вы должны получить сообщение об ошибке: 

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Это означает, что App Check по умолчанию блокирует непроверенные запросы. Теперь давайте добавим проверку подлинности в ваше приложение.

Перейдите к файлу environment.ts и добавьте reCAPTCHAEnterpriseKey к объекту environment . 

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.firebasestorage.app',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

Замените значение параметра key на ваш токен reCaptcha Enterprise.

Затем перейдите к файлу app.config.ts и добавьте следующие импорты: 

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

В том же файле app.config.ts добавьте следующее объявление глобальной переменной: 

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

В разделе импорта добавьте инициализацию проверки приложения с помощью ReCaptchaEnterpriseProvider и установите isTokenAutoRefreshEnabled в true , чтобы разрешить автоматическое обновление токенов. 

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

Чтобы разрешить локальное тестирование, установите self.FIREBASE_APPCHECK_DEBUG_TOKEN в true . При обновлении приложения на localhost в консоль будет выведен отладочный токен, аналогичный следующему: 

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Теперь перейдите в раздел «Приложения» окна проверки приложений в консоли Firebase.

Щелкните меню дополнительных параметров и выберите «Управление отладочными токенами» .

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

Перейдите к файлу chat.service.ts и добавьте следующий импорт: 

import { AppCheck } from '@angular/fire/app-check';

В том же файле chat.service.ts внедрите App Check рядом с другими сервисами Firebase. 

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
  1. Создайте коммит с сообщением "Блокировать неавторизованных клиентов с помощью App Check" и отправьте его в свой репозиторий GitHub.
  2. Откройте страницу «Размещение приложений» в консоли Firebase и дождитесь завершения развертывания.

Поздравляем! Функция проверки приложений теперь должна работать в вашем приложении.