Проверка приложений. Лаборатория веб-кода.

1. Введение

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

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

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

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

Что ты построишь

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

Созданное вами стартовое приложение для дружеского чата.

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

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

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

  • IDE/текстовый редактор по вашему выбору
  • Менеджер пакетов npm , который обычно поставляется с Node.js.
  • Firebase CLI установлен и настроен для работы с вашей учетной записью.
  • Терминал/консоль
  • Браузер по вашему выбору, например Chrome.
  • Пример кода лаборатории кода (см. следующий шаг лаборатории кода, чтобы узнать, как получить код).

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

Клонируйте репозиторий GitHub codelab из командной строки:

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

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

Импортируйте начальное приложение

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

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

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

  1. Войдите в Firebase .
  2. В консоли Firebase нажмите «Добавить проект», а затем назовите свой проект Firebase FriendlyChat. Запомните идентификатор вашего проекта Firebase.
  3. Снимите флажок Включить Google Analytics для этого проекта.
  4. Нажмите Создать проект.

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

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

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

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

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

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

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

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

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

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

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

Включить вход в Google для аутентификации Firebase

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

Вам необходимо включить вход в Google:

  1. В консоли Firebase найдите раздел «Сборка» на левой панели.
  2. Нажмите «Аутентификация» , нажмите «Начать», если применимо, затем перейдите на вкладку «Метод входа» (или нажмите здесь, чтобы перейти непосредственно туда).
  3. Включите поставщика входа в систему Google
  4. Установите общедоступное имя вашего приложения «Дружественный чат» и выберите адрес электронной почты службы поддержки проекта из раскрывающегося меню.
  5. Нажмите «Сохранить».

f96888973c3d00cc.png

Настройте 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

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

firebase use --add

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

  1. Перейдите к настройкам проекта в консоли Firebase.
  2. В карточке «Ваши приложения» выберите никнейм приложения, для которого вам нужен объект конфигурации.
  3. Выберите «Конфигурация» на панели фрагментов Firebase SDK.
  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, но в противном случае они все равно могут запрашивать, хранить и получать доступ к хранящимся там данным.

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

  • Зарегистрируйтесь для проверки приложений
  • Подтвердить соблюдение
  • Начните обеспечивать соблюдение правил

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

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

reCAPTCHA создать ключевой экран

После завершения вы увидите идентификатор в верхней части страницы с ключевыми сведениями .

Окно регистрации предприятия reCAPTCHA

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

Окно приложений «Проверка приложений», в котором вы регистрируете свой корпоративный токен reCAPTCHA.

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

Теперь, когда у вас есть зарегистрированный ключ в консоли Firebase, вернитесь к запуску вашего сайта в браузере, запустив firebase serve . Здесь у вас есть веб-приложение, работающее локально, и вы можете снова начать отправлять запросы к серверной части Firebase. Поскольку запросы идут против бэкэнда Firebase, эти запросы отслеживаются службой App Check, но не исполняются. Если вы хотите просмотреть статус поступающих запросов, вы можете посетить раздел 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 в пример дружеского чата.

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

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

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. Корпоративный поставщик.

// 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 ) и подключить его к конфигурации проверки приложений в меню переполнения вашего приложения.

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

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

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

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

Попробуйте это в производстве

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

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

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

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

Что дальше?

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

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