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

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 в проект

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

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

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

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

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

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

Включить Cloud Firestore

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

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

1. В разделе «Сборка» консоли Firebase нажмите «База данных Firestore» .
2. Нажмите Создать базу данных на панели Cloud Firestore.

3. Выберите параметр «Начать в тестовом режиме» , затем нажмите «Далее» , прочитав заявление об отказе от ответственности в отношении правил безопасности.

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

4. Укажите место, где хранятся данные Cloud Firestore. Вы можете оставить это значение по умолчанию или выбрать ближайший к вам регион. Нажмите «Включить» , чтобы подготовить Firestore.

Включить облачное хранилище

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

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

1. В разделе «Сборка» консоли Firebase нажмите «Хранилище» .
2. Если кнопки «Начать» нет, это означает, что облачное хранилище уже включено, и вам не нужно выполнять описанные ниже действия.
3. Нажмите «Начать» .
4. Выберите параметр «Начать в тестовом режиме» , затем нажмите «Далее» , прочитав заявление об отказе от ответственности в отношении правил безопасности.

Благодаря правилам безопасности по умолчанию любой прошедший проверку подлинности пользователь может записывать в Cloud Storage что угодно. Мы развернем уже написанные для нас правила безопасности позже в этой лаборатории кода.

5. Местоположение Cloud Storage предварительно выбирается в том же регионе, который вы выбрали для своей базы данных Cloud Firestore. Нажмите Готово , чтобы завершить настройку.

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.appspot.com",
  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. После заполнения этой информации нажмите «Готово» и «Создать ключ» .

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

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

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

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

На бэкэнд поступает 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 App Check:

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

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

• Начните использовать проверку приложений с помощью reCAPTCHA Enterprise в веб-приложениях.
• Использование поставщика отладки в веб-приложениях