Развертывание веб-приложения с JWT-авторизацией в Yandex API Gateway и аутентификацией в Firebase

В этом руководстве вы узнаете, как реализовать аутентификацию и авторизацию в вашем веб-приложении на основе протоколов OAuth 2.0 и OpenID Connect. Для аутентификации будут использованы Google OAuth и Firebase. Авторизация будет выполняться на стороне API Gateway с помощью JWT-авторайзера. Веб-приложение будет состоять из:

• Внешнего сервиса аутентификации Firebase.
• Простого REST API, развернутого в виде API Gateway.
• Статического веб-сайта, развернутого в бакете Yandex Object Storage.

Чтобы развернуть веб-приложение:

1. Подготовьте облако к работе.
2. Создайте проект и настройте Google OAuth в Google Cloud.
3. Настройте аутентификацию в Firebase.
4. Завершите настройку ресурсов Google.
5. Создайте API-шлюз.
6. Подготовьте файлы веб-приложения.
7. Разверните ресурсы Yandex Cloud и загрузите веб-приложение в бакет.
8. Проверьте работу созданного приложения.

Если созданные ресурсы больше не нужны, удалите их.

Подготовьте облако к работеПодготовьте облако к работе

Зарегистрируйтесь в Yandex Cloud и создайте платежный аккаунт:

1. Перейдите в консоль управления, затем войдите в Yandex Cloud или зарегистрируйтесь.
2. На странице Yandex Cloud Billing убедитесь, что у вас подключен платежный аккаунт, и он находится в статусе ACTIVE или TRIAL_ACTIVE. Если платежного аккаунта нет, создайте его и привяжите к нему облако.

Если у вас есть активный платежный аккаунт, вы можете создать или выбрать каталог, в котором будет работать ваша инфраструктура, на странице облака.

Подробнее об облаках и каталогах.

Необходимые платные ресурсыНеобходимые платные ресурсы

В стоимость поддержки инфраструктуры для работы веб-приложения входят:

• Плата за хранение данных в бакете и операции с ними (см. тарифы Object Storage).
• Плата за использование API-шлюза (см. тарифы API Gateway).

Создайте проект и настройте Google OAuth в Google CloudСоздайте проект и настройте Google OAuth в Google Cloud

Настройте Google OAuth:

1. Авторизуйтесь в Google Cloud Console и создайте новый проект.
2. На вкладке API & Services → OAuth consent screen выберите тип приложения External и нажмите кнопку Create.
3. В разделе OAuth consent screen укажите название приложения и ваш адрес электронной почты в полях User support email и Developer contact information. Нажмите кнопку Save and continue.
4. В разделе Scopes нажмите кнопку Add or Remove Scopes и добавьте скоупы openid, /auth/userinfo.email и /auth/userinfo.profile. Нажмите Update → Save and continue.
5. В разделе Test users укажите ваш адрес электронной почты. Завершите создание приложения.
6. На вкладке API & Services → Credentials нажмите кнопку Create credential и выберите OAuth client ID. В качестве типа приложения укажите Web application.
7. Подтвердите создание приложения и сохраните Client ID и Client secret.

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

1. Авторизуйтесь в Firebase Console и создайте новый проект.
2. В разделе Authentication → Sign-in method → Custom providers выберите OpenID Connect.
3. Подтвердите выбор OpenID Connect.
4. Укажите имя провайдера, Client ID и Client secret, которые получили на предыдущем шаге, а также заполните поле Issuer — для Google OAuth оно должно иметь значение https://accounts.google.com.
5. Сохраните Callback URL и завершите настройку OpenID.

Завершите настройку ресурсов GoogleЗавершите настройку ресурсов Google

Google Console:

1. На вкладке API & Services → Credentials нажмите на имя созданного клиента.
2. В список Authorized redirect URIs добавьте Callback URL из Firebase, который получили на предыдущем шаге. Сохраните внесенные изменения.

Firebase:

1. Перейдите в раздел Project Overview → Project settings.
2. На вкладке General создайте веб-приложение. Укажите имя приложения и нажмите кнопку Register App.
3. Сохраните сгенерированную в блоке firebaseConfig конфигурацию приложения.

Создайте API-шлюзСоздайте API-шлюз

Подготовьте файлы веб-приложенияПодготовьте файлы веб-приложения

1. Клонируйте репозиторий с исходным кодом приложения:

   git clone https://github.com/yandex-cloud-examples/yc-serverless-apigw-jwt-authorizer-firebase.git
   

2. Откройте с помощью текстового редактора файл src/App.js и укажите параметры:

   • firebaseConfig — конфигурация приложения Firebase, которую вы сохранили при завершении настройки ресурсов Google.
   • providerId — идентификатор созданного ранее в Firebase провайдера OpenID Connect в формате oidc.<имя_провайдера>.
   • apiGwDomain — служебный домен созданного ранее API-шлюза.

3. Установите Node.js и менеджер пакетов npm. Менеджер пакетов будет установлен автоматически при установке Node.js.

4. В папке с вашим приложением:

   1. Установите react-scripts в ваш проект и добавьте его в зависимости (devDependencies) в файле package.json:

      npm install react-scripts --save-dev
      

   2. Запустите сборку приложения:

      npm run build
      

      Результат:

      File sizes after gzip:
      
        96.05 kB  build\static\js\main.de7af71f.js
        672 B     build\static\css\main.021818e9.css
      
      The project was built assuming it is hosted at /.
      You can control this with the homepage field in your package.json.
      
      The build folder is ready to be deployed.
      

Разверните ресурсы Yandex Cloud и загрузите веб-приложение в бакет Object StorageРазверните ресурсы Yandex Cloud и загрузите веб-приложение в бакет Object Storage

Разверните статический веб-сайт.

1. Создайте бакет Object Storage:

   Консоль управления

   CLI

   Terraform

   API

   1. В консоли управления выберите каталог, в котором хотите создать бакет.
   2. Выберите сервис Object Storage.
   3. Нажмите кнопку Создать бакет.
   4. На странице создания бакета:
      1. Введите имя бакета — bucket-for-tutorial.
      2. В поле Доступ на чтение объектов выберите Публичный.
      3. Нажмите кнопку Создать бакет для завершения операции.

   Если у вас еще нет интерфейса командной строки Yandex Cloud, установите и инициализируйте его.

   По умолчанию используется каталог, указанный в профиле CLI. Вы можете указать другой каталог с помощью параметра --folder-name или --folder-id.

   1. Выполните следующую команду:

      yc storage bucket create \
        --name bucket-for-tutorial \
        --public-read
      

      Где:

      • --name — имя бакета.
      • --public-read — флаг для включения публичного доступа на чтение объектов в бакете.

      Результат:

      name: bucket-for-tutorial
      folder_id: b1gmit33********
      anonymous_access_flags:
      ...
      versioning: VERSIONING_DISABLED
      acl: {}
      created_at: "2023-06-08T11:57:49.898024Z"
      

   Если у вас еще нет Terraform, установите его и настройте провайдер Yandex Cloud.

   1. Опишите в конфигурационном файле параметры необходимых ресурсов:

      ...
      resource "yandex_iam_service_account" "sa" {
        name = "<имя_сервисного_аккаунта>"
      }
      
      resource "yandex_resourcemanager_folder_iam_member" "sa-editor" {
        folder_id = "<идентификатор_каталога>"
        role      = "storage.editor"
        member    = "serviceAccount:${yandex_iam_service_account.sa.id}"
      }
      
      resource "yandex_iam_service_account_static_access_key" "sa-static-key" {
        service_account_id = yandex_iam_service_account.sa.id
        description        = "static access key for object storage"
      }
      
      resource "yandex_storage_bucket" "test" {
        access_key = yandex_iam_service_account_static_access_key.sa-static-key.access_key
        secret_key = yandex_iam_service_account_static_access_key.sa-static-key.secret_key
        bucket     = "bucket-for-tutorial"
        acl        = "public-read"
      }
      ...
      

      Где:

      • yandex_iam_service_account — описание сервисного аккаунта, который создаст бакет и будет работать с ним:
        • name — имя сервисного аккаунта.
      • yandex_storage_bucket — описание бакета:
        • bucket — имя бакета.
        • acl — настройки доступа к бакету.

      Более подробную информацию о параметрах ресурса yandex_storage_bucket в Terraform см. в документации провайдера.

   2. Создайте ресурсы:

      1. В терминале перейдите в папку, где вы отредактировали конфигурационный файл.

      2. Проверьте корректность конфигурационного файла с помощью команды:

         terraform validate
         

         Если конфигурация является корректной, появится сообщение:

         Success! The configuration is valid.
         

      3. Выполните команду:

         terraform plan
         

         В терминале будет выведен список ресурсов с параметрами. На этом этапе изменения не будут внесены. Если в конфигурации есть ошибки, Terraform на них укажет.

      4. Примените изменения конфигурации:

         terraform apply
         

      5. Подтвердите изменения: введите в терминале слово yes и нажмите Enter.

   После этого в указанном каталоге будет создан бакет.

   Чтобы создать бакет, воспользуйтесь методом REST API create для ресурса Bucket, вызовом gRPC API BucketService/Create или методом S3 API create.

2. Загрузите объекты в бакет Object Storage:

   Консоль управления

   1. В консоли управления выберите каталог, в который нужно загрузить объекты.
   2. Выберите сервис Object Storage.
   3. Нажмите на бакет bucket-for-tutorial.
   4. Нажмите кнопку Загрузить и выберите сгенерированные ранее объекты в папке build.
   5. Консоль управления отобразит все объекты, выбранные для загрузки, и предложит для каждого из них выбрать класс хранилища. Класс хранилища по умолчанию определяется настройкой бакета.
   6. Нажмите кнопку Загрузить.
   7. Обновите страницу.

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

3. Настройте хостинг статического сайта:

   Консоль управления

   CLI

   Terraform

   API

   1. В консоли управления перейдите в бакет bucket-for-tutorial.
   2. На панели слева выберите Настройки.
   3. На вкладке Веб-сайт:
      • Выберите Хостинг.
      • В поле Главная страница укажите абсолютный путь к файлу главной страницы сайта — index.html.
      • В поле Страница ошибки укажите абсолютный путь к файлу, который будет отображаться при ошибках 4хх — error.html.
   4. Нажмите кнопку Сохранить.
   5. В поле Ссылка скопируйте адрес вашего сайта.

   Если у вас еще нет интерфейса командной строки Yandex Cloud, установите и инициализируйте его.

   По умолчанию используется каталог, указанный в профиле CLI. Вы можете указать другой каталог с помощью параметра --folder-name или --folder-id.

   1. Создайте файл setup.json с настройками хостинга в формате JSON:

      {
        "index": "index.html",
        "error": "error404.html"
      }
      

      Где:

      • index — абсолютный путь к файлу главной страницы сайта.
      • error — абсолютный путь к файлу, который будет отображаться пользователю при ошибках 4хх.

   2. Выполните команду:

      yc storage bucket update --name bucket-for-tutorial \
        --website-settings-from-file setup.json
      

      Где:

      • --name — имя бакета.
      • --website-settings-from-file — путь к файлу с настройками переадресации.

      Результат:

      name: my-bucket
      folder_id: b1gjs8dck********
      default_storage_class: STANDARD
      versioning: VERSIONING_SUSPENDED
      max_size: "10737418240"
      acl: {}
      created_at: "2022-12-14T08:42:16.273717Z"
      

   Если у вас еще нет Terraform, установите его и настройте провайдер Yandex Cloud.

   Чтобы настроить переадресацию всех запросов:

   1. Откройте файл конфигурации Terraform и добавьте параметр redirect_all_requests_to в описание ресурса yandex_storage_bucket:

      ...
      resource "yandex_storage_bucket" "test" {
        access_key = yandex_iam_service_account_static_access_key.sa-static-key.access_key
        secret_key = yandex_iam_service_account_static_access_key.sa-static-key.secret_ke
        bucket     = "bucket-for-tutorial"
        acl        = "public-read"
      
        website {
          index_document = "index.html"
          error_document = "error.html"
        }
      }
      ...
      

      Где:

      • website — параметры веб-сайта:
        • index_document — абсолютный путь к файлу главной страницы сайта. Обязательный параметр.
        • error_document — абсолютный путь к файлу, который будет отображаться пользователю при ошибках 4хх. Необязательный параметр.

      Более подробную информацию о параметрах ресурса yandex_storage_bucket в Terraform см. в документации провайдера.

   2. Создайте ресурсы:

      1. В терминале перейдите в папку, где вы отредактировали конфигурационный файл.

      2. Проверьте корректность конфигурационного файла с помощью команды:

         terraform validate
         

         Если конфигурация является корректной, появится сообщение:

         Success! The configuration is valid.
         

      3. Выполните команду:

         terraform plan
         

         В терминале будет выведен список ресурсов с параметрами. На этом этапе изменения не будут внесены. Если в конфигурации есть ошибки, Terraform на них укажет.

      4. Примените изменения конфигурации:

         terraform apply
         

      5. Подтвердите изменения: введите в терминале слово yes и нажмите Enter.

   После этого в бакете будет настроен хостинг.

   Чтобы настроить хостинг статического сайта, воспользуйтесь методом REST API update для ресурса Bucket, вызовом gRPC API BucketService/Update или методом S3 API upload.

4. Добавьте адрес вашего сайта в список допустимых доменов в Firebase:

   1. Перейдите в раздел Authentication → Settings → Authorized domains.
   2. Нажмите кнопку Add domain и вставьте скопированный адрес.

Протестируйте работу созданного приложенияПротестируйте работу созданного приложения

1. Обратитесь к статическому сайту по адресу, который получили при настройке хостинга, и нажмите кнопку Call API Gateway, не проходя авторизации. Убедитесь, что в ответ приходит ошибка Got error: Request failed with status code 401.
2. Чтобы авторизоваться на сайте, нажмите кнопку Log in.
3. После авторизации снова нажмите кнопку Call API Gateway. Убедитесь, что вызов успешно обрабатывается и в ответ приходит информация об авторизованном пользователе.

Как удалить созданные ресурсыКак удалить созданные ресурсы

Чтобы перестать платить за созданные ресурсы:

1. Удалите бакет Object Storage.
2. Удалите API-шлюз.
3. Удалите проект в Firebase.
4. Удалите проект в Google Cloud.