Связаться с намиПодключиться

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

Статья создана
Улучшена
Обновлена 21 апреля 2025 г.

В этом руководстве вы узнаете, как реализовать аутентификацию и авторизацию в вашем веб-приложении на основе протоколов 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. Если платежного аккаунта нет, создайте его и привяжите к нему облако.

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

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

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

Создайте проект и настройте 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

  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 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-шлюз

  1. В консоли управления выберите каталог, в котором необходимо создать API-шлюз.

  2. В списке сервисов выберите API Gateway.

  3. Нажмите кнопку Создать API-шлюз.

  4. В поле Имя введите jwt-api-gw.

  5. В блок Спецификация добавьте спецификацию:

    openapi: 3.0.0
info:
  title: Sample API
  version: 1.0.0

paths:
  /:
    get:
      x-yc-apigateway-integration:
        type: http
        url: https://oauth2.googleapis.com/tokeninfo
        method: GET
        query:
          id_token: '{token}'
      parameters:
        - name: token
          in: query
          required: true
          schema:
            type: string
      security:
        - OpenIdAuthorizerScheme: [ ]

components:
  securitySchemes:
    OpenIdAuthorizerScheme:
      type: openIdConnect
      x-yc-apigateway-authorizer:
        type: jwt
        jwksUri: https://www.googleapis.com/oauth2/v3/certs
        identitySource:
          in: query
          name: token
        issuers:
          - https://accounts.google.com
        requiredClaims:
          - email

  6. Нажмите кнопку Создать.

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

По умолчанию используется каталог, указанный при создании профиля CLI. Чтобы изменить каталог по умолчанию, используйте команду yc config set folder-id <идентификатор_каталога>. Также для любой команды вы можете указать другой каталог с помощью параметров --folder-name или --folder-id.

  1. Сохраните следующую спецификацию в файл jwt-auth.yaml:

    openapi: 3.0.0
info:
  title: Sample API
  version: 1.0.0

paths:
  /:
    get:
      x-yc-apigateway-integration:
        type: http
        url: https://oauth2.googleapis.com/tokeninfo
        method: GET
        query:
          id_token: '{token}'
      parameters:
        - name: token
          in: query
          required: true
          schema:
            type: string
      security:
        - OpenIdAuthorizerScheme: [ ]

components:
  securitySchemes:
    OpenIdAuthorizerScheme:
      type: openIdConnect
      x-yc-apigateway-authorizer:
        type: jwt
        jwksUri: https://www.googleapis.com/oauth2/v3/certs
        identitySource:
          in: query
          name: token
        issuers:
          - https://accounts.google.com
        requiredClaims:
          - email

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

    yc serverless api-gateway create \
  --name jwt-api-gw \
  --spec=jwt-auth.yaml

    Где:

    • --name — имя API-шлюза.
    • --spec — файл со спецификацией.

    Результат:

    done (29s)
id: d5dug9gkmu187i********
folder_id: b1g55tflru0ek7********
created_at: "2020-06-17T09:20:22.929Z"
name: jwt-api-gw
status: ACTIVE
domain: d5dm1lba80md********.i9******.apigw.yandexcloud.net
log_group_id: ckghq1hm19********

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

  1. Опишите в конфигурационном файле параметры API-шлюза:

    resource "yandex_api_gateway" "jwt-api-gateway" {
  name        = "jwt-api-gw"
  spec        = <<-EOT
    openapi: 3.0.0
    info:
      title: Sample API
      version: 1.0.0
    paths:
      /:
        get:
          x-yc-apigateway-integration:
            type: http
            url: https://oauth2.googleapis.com/tokeninfo
            method: GET
            query:
              id_token: '{token}'
          parameters:
            - name: token
              in: query
              required: true
              schema:
                type: string
          security:
            - OpenIdAuthorizerScheme: [ ] 
    components:
      securitySchemes:
        OpenIdAuthorizerScheme:
          type: openIdConnect
          x-yc-apigateway-authorizer:
            type: jwt
            jwksUri: https://www.googleapis.com/oauth2/v3/certs
            identitySource:
              in: query
              name: token
            issuers:
              - https://accounts.google.com
            requiredClaims:
              - email
  EOT
}

    Где:

    • name — имя API-шлюза.
    • spec — спецификация API-шлюза.

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

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

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

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

      terraform validate

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

      Success! The configuration is valid.

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

      terraform plan

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

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

      terraform apply

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

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

Чтобы создать API-шлюз, воспользуйтесь методом REST API create для ресурса ApiGateway или вызовом gRPC API ApiGatewayService/Create.

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

  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

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

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

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

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

    По умолчанию используется каталог, указанный при создании профиля CLI. Чтобы изменить каталог по умолчанию, используйте команду yc config set folder-id <идентификатор_каталога>. Также для любой команды вы можете указать другой каталог с помощью параметров --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. Настройте хостинг статического сайта:

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

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

    По умолчанию используется каталог, указанный при создании профиля CLI. Чтобы изменить каталог по умолчанию, используйте команду yc config set folder-id <идентификатор_каталога>. Также для любой команды вы можете указать другой каталог с помощью параметров --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.
Предыдущая
Обработка файлов детализации в сервисе Yandex Cloud Billing
Следующая
Поиск событий Yandex Cloud в Yandex Query