Практическая работа по Проверке приложений для веб-интерфейса

1. Введение

Последнее обновление: 23 февраля 2023 г.

Как предотвратить несанкционированный доступ к ресурсам Firebase?

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

Проверку приложений можно использовать для защиты запросов к Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication с Identity Platform и к вашим собственным серверам.

Что вы создадите

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

Простое приложение для обмена сообщениями, созданное вами.

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

  • Как отслеживать несанкционированный доступ к серверной части
  • Как добавить принудительное применение в Firestore и Cloud Storage
  • Как запустить приложение с токеном отладки для локальной разработки

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

  • Интегрированная среда разработки или текстовый редактор на ваш выбор.
  • Менеджер пакетов npm, который обычно поставляется с Node.js.
  • Интерфейс командной строки Firebase, установленный и настроенный для работы с вашим аккаунтом.
  • Терминал или консоль.
  • браузер, например Chrome;
  • Образец кода практической работы (инструкции по его получению приведены на следующем шаге).

2. Получить образец кода

Клонируйте хранилище GitHub практической работы из командной строки:

git clone https://github.com/firebase/codelab-friendlychat-web

Если у вас не установлен Git, вы можете скачать репозиторий в виде ZIP-файла.

Импорт начального приложения

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

3. Как создать и настроить проект Firebase

Создать проект Firebase

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

Как перейти на другой тарифный план Firebase

Чтобы использовать Cloud Storage for Firebase, ваш проект Firebase должен быть на тарифном плане Blaze с оплатой по мере использования, то есть связан с платежным аккаунтом Cloud.

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

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

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

  1. Нажмите на значок веб-приложения 58d6543a156e56f9.png, чтобы создать новое веб-приложение Firebase.
  2. Зарегистрируйте приложение с псевдонимом Friendly Chat, а затем установите флажок Also set up Firebase Hosting for this app (Также настроить Firebase Hosting для этого приложения). Нажмите Register app (Зарегистрировать приложение).
  3. На следующем шаге вы увидите команду для установки Firebase с помощью npm и объекта конфигурации. Вы скопируете этот объект позже в рамках практической работы, а пока нажмите Next (Далее).

Окно добавления Firebase в веб-приложение

  1. Затем вы увидите вариант установки интерфейса командной строки Firebase. Если вы ещё не установили его, сделайте это сейчас с помощью команды npm install -g firebase-tools. Нажмите Далее.
  2. Затем вы увидите возможность войти в Firebase и выполнить развертывание в Firebase Hosting. Войдите в Firebase с помощью команды firebase login, а затем нажмите Перейти в консоль. Развертывание в Firebase Hosting будет выполнено на одном из следующих шагов.

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

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

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

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

Как включить вход с аккаунтом Google для Firebase Authentication

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

Вам нужно включить вход с аккаунтом Google:

  1. В консоли Firebase найдите раздел Build (Сборка) на панели слева.
  2. Нажмите Authentication (Аутентификация), затем Get Started (Начать), если это необходимо, и перейдите на вкладку Sign-in method (Способ входа). Вы также можете перейти на нее напрямую.
  3. Включите поставщика входа Google
  4. Укажите Friendly Chat в качестве общедоступного названия приложения и выберите адрес электронной почты службы поддержки проекта в раскрывающемся меню.
  5. Нажмите Сохранить.

f96888973c3d00cc.png

Как настроить Cloud Firestore

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

Чтобы настроить Cloud Firestore в проекте Firebase, выполните следующие действия:

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

Как настроить Cloud Storage for Firebase

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

Вот как настроить Cloud Storage for Firebase в проекте Firebase:

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

4. Настройте Firebase

Из каталога appcheck-start вызовите:

firebase use --add

Когда появится запрос, выберите идентификатор проекта и укажите псевдоним проекта Firebase. Для этого проекта можно просто указать псевдоним default. Затем вам нужно будет настроить локальный проект для работы с Firebase.

  1. Перейдите в настройки проекта в консоли Firebase.
  2. На карточке "Ваши приложения" выберите псевдоним приложения, для которого вам нужен объект конфигурации.
  3. На панели фрагмента Firebase SDK выберите Config (Конфигурация).
  4. Скопируйте фрагмент объекта конфигурации и добавьте его в appcheck-start/hosting/src/firebase-config.js. В этой практической работе мы будем использовать переменную config.

firebase-config.js

const config = {
  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",
};

В том же каталоге appcheck-start вызовите:

firebase experiments:enable webframeworks

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

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

5. Попробуйте приложение без проверки приложений

Теперь, когда вы настроили приложение и SDK, попробуйте использовать приложение так, как оно было изначально задумано. Сначала установите все зависимости. В терминале перейдите в каталог appcheck-start/hosting. Находясь в этом каталоге, выполните команду npm install. Это позволит получить все зависимости, необходимые для работы проекта. Чтобы запустить приложение в его текущем состоянии, выполните команду firebase serve. Приложение попросит вас войти в аккаунт Google. Сделайте это, а затем попробуйте отправить в чат несколько сообщений и фотографий.

Теперь, когда вы протестировали его локально, пора посмотреть на него в действии! Выполните команду firebase deploy, чтобы развернуть веб-приложение в интернете. Это важный шаг, который показывает, как Проверка приложений работает в реальном мире, поскольку для поставщика аттестации reCAPTCHA Enterprise требуется настроить домен.

Надеемся, что вы уже оценили возможности приложения. публикация сообщений в чате и другие действия, которые должны выполняться только в приложении. Недостаток текущего состояния заключается в том, что любой, у кого есть конфигурация вашего приложения из предыдущего шага, может получить доступ к вашим внутренним ресурсам. Они по-прежнему должны соблюдать правила безопасности, установленные вашими системами Firestore и Cloud Storage, но в остальном они по-прежнему могут запрашивать, хранить и получать доступ к хранящимся там данным.

В следующих нескольких шагах вы:

  • Зарегистрируйтесь в App Check
  • Проверка принудительного применения
  • Как начать применять правила

6. Как включить проверку приложений и принудительное применение

Для начала получите ключ reCAPTCHA Enterprise для своего проекта и добавьте его в Проверку приложений. Для начала перейдите в раздел reCAPTCHA Enterprise в консоли Google Cloud. Выберите проект, и вам будет предложено включить reCAPTCHA Enterprise API. Включите API и подождите несколько минут, пока процесс не завершится. Затем нажмите Создать ключ рядом с пунктом Ключи Enterprise. Затем в этом разделе укажите отображаемое название и выберите тип ключа Сайт. Укажите домены, на которых размещено ваше приложение. Поскольку вы планируете разместить его на Firebase Hosting, используйте имя хоста по умолчанию, которое обычно выглядит как ${YOUR_PROJECT_ID}.web.app. Домен хостинга можно найти в разделе Hosting (Хостинг) консоли Firebase. Заполнив эту информацию, нажмите Готово и Создать ключ.

Экран создания ключа reCAPTCHA

После этого в верхней части страницы Основные сведения появится идентификатор.

Окно регистрации reCAPTCHA Enterprise

Скопируйте этот идентификатор в буфер обмена. Этот ключ используется для проверки приложений. Затем перейдите в раздел Проверка приложений в консоли Firebase и нажмите Начать. Затем нажмите Register (Зарегистрировать), выберите reCAPTCHA Enterprise и вставьте скопированный идентификатор в текстовое поле reCAPTCHA Enterprise Site Key (Ключ сайта reCAPTCHA Enterprise). Остальные настройки оставьте по умолчанию. Страница App Check должна выглядеть примерно так:

Окно приложений в Проверке приложений, где вы регистрируете токен reCAPTCHA Enterprise

Непроверенные и невыполненные запросы

Теперь, когда вы зарегистрировали ключ в консоли Firebase, вернитесь к запуску сайта в браузере, выполнив команду firebase serve. Теперь веб-приложение запущено локально, и вы можете снова отправлять запросы к серверной части Firebase. Поскольку запросы направляются к серверной части Firebase, они отслеживаются Проверкой приложений, но не принудительно. Чтобы посмотреть статус поступающих запросов, перейдите в раздел Cloud Firestore на вкладке API страницы "Проверка приложений" в консоли Firebase. Поскольку вы ещё не настроили клиент для использования Проверки приложений, вы должны увидеть что-то похожее на это:

Панель управления Проверки приложений, на которой показано, что 100 % запросов клиентов к вашему приложению не подтверждены.

Бэкенд получает 100 % непроверенных запросов. Этот экран полезен, поскольку он показывает, что почти все клиентские запросы поступают от клиентов, у которых не интегрирована проверка приложений.

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

Непроверенные запросы и запросы, к которым применены принудительные меры

Нажмите кнопку Применить на предыдущем экране, а затем снова нажмите Применить, если появится запрос.

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

После этого Проверка приложений начнет блокировать запросы к вашим бэкенд-службам, которые не были подтверждены выбранным поставщиком аттестации (в данном случае reCAPTCHA Enterprise). Вернитесь к веб-приложению, которое должно быть запущено по адресу http://localhost:5000. Когда вы обновляете страницу и пытаетесь получить данные из базы данных, ничего не происходит. Если вы откроете консоль Chrome, чтобы прочитать ошибки, вы увидите примерно следующее:

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

Это значит, что Проверка приложений блокирует запросы, которые не передали действительный токен подтверждения в запросах к вашим ресурсам Firebase. Пока вы можете отключить принудительное применение Проверки приложений, а в следующем разделе мы рассмотрим, как добавить Проверку приложений reCAPTCHA Enterprise в пример Friendly Chat.

7. Добавьте ключ reCAPTCHA Enterprise на сайт

Мы добавим корпоративный ключ в ваше приложение. Сначала откройте файл hosting/src/firebase-config.js и добавьте ключ reCAPTCHA Enterprise в следующий фрагмент кода:

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

После этого откройте файл hosting/src/index.js и в строке 51 добавьте импорт из firebase-config.js, чтобы получить ключ reCAPTCHA, а также импортируйте библиотеку Проверки приложений, чтобы вы могли работать с поставщиком reCAPTCHA Enterprise.

// add from here
 import {
   initializeAppCheck,
   ReCaptchaEnterpriseProvider,
 } from 'firebase/app-check';
// to here

// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';

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

import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
 function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
 }
// to here

Теперь нужно инициализировать Проверку приложений для работы с выбранным поставщиком – в данном случае это reCAPTCHA Enterprise. Затем вы также захотите автоматически обновлять токен проверки приложений в фоновом режиме, что предотвратит любые задержки со стороны пользователя, взаимодействующего с вашим сервисом, в случае, если срок действия его токена проверки приложений истек.

function setupAppCheck(app) {
   if(import.meta.env.MODE === 'development') {
     self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
   }
// add from here
   // Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
   // site key and pass it to initializeAppCheck().
   initializeAppCheck(app, {
     provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
     isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
   });
// to here
 }

Наконец, убедившись, что приложение инициализировано, вызовите функцию setupAppCheck, которую вы только что создали. В нижней части файла hosting/src/index.js добавьте вызов недавно добавленного метода.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

Сначала проведите локальное тестирование

Сначала протестируйте приложение локально. Если вы ещё не запустили приложение локально, выполните команду firebase serve. Вы заметите, что приложение по-прежнему не загружается локально. Это связано с тем, что вы зарегистрировали домен Firebase только у поставщика аттестации reCAPTCHA, а не у домена localhost. Никогда не регистрируйте localhost в качестве одобренного домена, так как это позволит пользователям получать доступ к вашим защищенным серверам из приложения, запущенного локально на их компьютере. Вместо этого, поскольку вы задали self.FIREBASE_APPCHECK_DEBUG_TOKEN = true, вам нужно найти в консоли JavaScript строку, похожую на следующую:

App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Вам нужно взять предоставленный токен отладки (в примере это 55183c20-de61-4438-85e6-8065789265be) и вставить его в конфигурацию проверки приложений в дополнительном меню вашего приложения.

Панель управления Проверки приложений с указанием местоположения раздела "Управление токенами отладки"

Укажите уникальное название токена, которое вы запомните, и нажмите Сохранить. Этот вариант позволяет использовать в приложении токен, созданный клиентом. Это более безопасная альтернатива, чем создание токена отладки и его встраивание в приложение. Если встроить токен в приложение, он может случайно попасть к конечным пользователям, которые смогут использовать его в обход ваших проверок. Если вы хотите распространить токен отладки, например в среде непрерывной интеграции, ознакомьтесь с этой документацией.

Пример заполнения токена отладки с псевдонимом

Зарегистрировав токен отладки в консоли Firebase, вы можете снова включить принудительное применение Проверки приложений и протестировать загрузку контента приложения локально, вызвав firebase serve из терминала. Вы должны увидеть, что ранее введенные данные передаются в локальную версию веб-приложения. В консоли по-прежнему должно быть сообщение с токеном отладки.

Попробовать в рабочей версии

Убедившись, что Проверка приложений работает локально, разверните веб-приложение в рабочей среде. В терминале снова вызовите firebase deploy и перезагрузите страницу. Это позволит упаковать веб-приложение для запуска в Firebase Hosting. После того как ваше приложение будет размещено на Firebase Hosting, попробуйте открыть его по адресу ${YOUR_PROJECT_ID}.web.app. Откройте консоль JavaScript. В ней не должно быть токена отладки, а в проекте должны загружаться чаты. Кроме того, после взаимодействия с приложением в течение нескольких минут вы можете перейти в раздел App Check консоли Firebase и убедиться, что все запросы к вашему приложению теперь подтверждаются.

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

Поздравляем! Вы успешно добавили Проверку приложений Firebase в веб-приложение.

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

Что дальше?

Ознакомьтесь с документацией по добавлению Проверки приложений Firebase в:

Справочная документация