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

1. Введение

Последнее обновление: 23.02.2023

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

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

App Check можно использовать для защиты запросов к Cloud Firestore, Realtime Database, Cloud Functions, аутентификации Firebase с Identity Platform, а также к тем бэкэндам, которые вы размещаете самостоятельно.

Что вы построите

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

Удобное приложение для чата, которое вы создаете сами.

Чему вы научитесь

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

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

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

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

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

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

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

Импортируйте стартовое приложение

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

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

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

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

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

Чтобы использовать Cloud Storage для 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 с помощью npm и объекта конфигурации. Этот объект вы скопируете позже в ходе работы над кодом, поэтому пока нажмите «Далее» .

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

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

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

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

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

Некоторые из этих продуктов требуют специальной настройки или должны быть включены с помощью консоли 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

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

Вот как настроить облачное хранилище для 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. Для этого проекта можно просто указать псевдоним default . Далее вам потребуется настроить локальный проект для работы с Firebase.

  1. Перейдите в настройки вашего проекта в консоли Firebase.
  2. На карточке «Ваши приложения» выберите псевдоним приложения, для которого вам нужен объект конфигурации.
  3. Выберите Config на панели фрагмента Firebase SDK.
  4. Скопируйте фрагмент объекта config и добавьте его в 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 , чтобы развернуть веб-приложение в интернете. Этот этап — важный этап демонстрации работы App Check в реальных условиях, поскольку для него требуется настроить домен для поставщика аттестации reCAPTCHA Enterprise.

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

На следующих нескольких шагах вам предстоит:

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

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

Давайте начнем с получения ключа reCAPTCHA Enterprise для вашего проекта и добавления его в App Check. Для начала вам нужно зайти в раздел reCAPTCHA Enterprise в консоли Google Cloud Console. Выберите свой проект, после чего вам будет предложено включить reCAPTCHA Enterprise API. Включите API и подождите несколько минут, пока он завершится. Затем нажмите Create Key рядом с Enterprise keys . Затем в этом разделе укажите отображаемое имя и выберите ключ типа Website . Вам необходимо указать домены, на которых размещено ваше приложение. Поскольку вы планируете размещать его на Firebase Hosting, вы используете имя хостинга по умолчанию, которое обычно ${YOUR_PROJECT_ID}.web.app . Вы можете найти свой домен хостинга в разделе Hosting в Firebase Console. После заполнения этой информации нажмите Done и Create Key .

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

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

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

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

Окно приложений App Check, в котором вы регистрируете свой корпоративный токен reCAPTCHA

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

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

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

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

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

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

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

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

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

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

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

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, а также импортируйте библиотеку App Check, чтобы можно было работать с поставщиком 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

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

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 из терминала. Вы должны увидеть, как ранее введённые данные передаются в локальную версию веб-приложения. Сообщение с отладочным токеном должно по-прежнему выводиться в консоль.

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

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

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

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

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

Что дальше?

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

Справочные документы