В этом модуле вы создадите пул пользователей Amazon Cognito для управления их аккаунтами. Вы развернете страницы, с помощью которых клиенты смогут регистрироваться как новые пользователи, подтверждать свои адреса электронной почты и входить в систему на сайте.

Serverless_Web_App_LP_assets-03

При посещении вашего веб-сайта пользователи сначала будут регистрировать новый аккаунт. В рамках этого урока мы будем запрашивать при регистрации только адрес электронной почты и пароль. Но в Amazon Cognito можно настроить запрос и других атрибутов в ваших собственных приложениях.

После предоставления пользователями данных во время регистрации Amazon Cognito отправит электронное сообщение с кодом подтверждения на указанный адрес. Чтобы подтвердить аккаунт, пользователю нужно будет вернуться на ваш сайт, а затем ввести свой адрес электронной почты и полученный код подтверждения. Подтвердить аккаунты пользователей можно также с помощью Amazon Cognito – в этом случае можно применять вымышленные адреса электронной почты для тестирования.

После подтверждения аккаунта (с помощью электронной почты или вручную на консоли) пользователь сможет выполнить вход. При входе пользователь вводит свое имя (или адрес электронной почты) и пароль. После этого функция JavaScript обменивается данными с Amazon Cognito, проводит аутентификацию по протоколу SRP и получает набор веб-маркеров JSON Web Token (JWT). Маркеры JWT содержат утверждения об идентификации пользователя и будут применены в следующем модуле для аутентификации по API RESTful, который вы создадите с помощью Amazon API Gateway.

Время на выполнение модуля: 30 минут

Используемые сервисы: Amazon Cognito

Шаблон CloudFormation: если нужно сразу перейти к следующему модулю, запустите один из шаблонов AWS CloudFormation в том же регионе, который вы использовали в модуле 1.

Регион Шаблон CloudFormation
Восток США (Сев. Вирджиния) Запустить стек >
Восток США (Огайо) Запустить стек >
Запад США (Орегон) Запустить стек >
ЕС (Франкфурт) Запустить стек >
ЕС (Ирландия) Запустить стек >
ЕС (Лондон) Запустить стек >
Азия и Тихий океан (Токио) Запустить стек >
Азия и Тихий океан (Сеул) Запустить стек >
Азия и Тихий океан (Сидней) Запустить стек >
Азия и Тихий океан (Мумбаи) Запустить стек >
Serverless_Web_App_LP_assets-17

Инструкции по запуску CloudFormation

  1. Перейдите по ссылке «Запустить стек» выше для выбранного региона.

  2. Выберите «Next» (Далее) на странице «Select Template» (Выбрать шаблон).

  3. Укажите имя корзины веб-сайта из модуля 1 (например,wildrydes-yourname) в качестве значения «Website Bucket Name» (Имя корзины веб-сайта), затем выберите «Next» (Далее).

    Примечание. Необходимо указать то же имя корзины, которое использовалось в предыдущем модуле. Если указать несуществующее имя корзины или если у вас нет доступа для записи, произойдет сбой стека CloudFormation во время создания.

  4. На странице «Options» (Параметры) оставьте все значения по умолчанию и выберите «Next» (Далее).

  5. На странице «Review» (Обзор) установите флажок, подтвердив тем самым, что CloudFormation создаст ресурсы IAM, и выберите «Create» (Создать).

    В этом шаблоне нужно подключить собственные ресурсы для создания пула пользователей Amazon Cognito и клиента, а также генерирования файла конфигурации со сведениями, необходимыми для подключения к данному пулу пользователей и его выгрузки в вашу корзину веб-сайта. Шаблон создаст роль, которая обеспечит доступ для создания таких ресурсов и выгрузки файла конфигурации в вашу корзину.

  6. Дождитесь отображения статуса CREATE_COMPLETE для стека wildrydes-webapp-2.

  7. Выполните действия, описанные для шага 4. Протестируйте свое внедрение и убедитесь, что вы готовы перейти к следующему модулю.


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

  • Шаг 1. Создание пула пользователей Amazon Cognito

    Amazon Cognito предоставляет два механизма аутентификации пользователей. С помощью пулов пользователей Cognito можно добавить функции регистрации и входа в приложение или применять пулы идентификации Cognito для аутентификации пользователей через таких поставщиков идентификации в соцсетях, как Facebook, Twitter или Amazon, применяя решения SAML или собственные системы. Для данного модуля вы будете применять пул пользователей в качестве системы управления для предоставленных страниц регистрации и входа.


    1. Щелкните в консоли AWS «Services» (Сервисы) и выберите «Cognito» в разделе «Mobile Services» (Мобильные сервисы).
    2. Выберите «Manage your User Pools» (Управление пулами пользователей).
    3. Выберите «Create a User Pool» (Создать пул пользователей)
    4. Укажите имя вашего пула пользователей, например WildRydes, и выберите «Review Defaults» (Просмотреть параметры по умолчанию)
    5. На странице просмотра щелкните «Create pool» (Создать пул).
    6. Запишите «Pool Id» (Идентификатор пула) на странице «Pool details» (Сведения о пуле) созданного вами нового пула пользователей.
  • Шаг 2. Добавление приложения в ваш пул пользователей

    Выберите в консоли Amazon Cognito свой пул пользователей, а затем раздел «App clients» (Клиенты приложений). Добавьте новый клиент приложения и убедитесь, что параметр «Generate client secret» (Генерировать секрет клиента) не выбран. В настоящее время секреты клиентов не поддерживаются в JavaScript SDK. Если вы создали приложение со сгенерированным секретом, удалите его и создайте новое с правильной конфигурацией.


    1. На странице «Pool Details» (Сведения о пуле) для пула пользователей выберите «App clients» (Клиенты приложения) в разделе «General Settings» (Общие настройки) на панели навигации слева.
    2. Выберите «Add an app client» (Добавить клиент приложения).
    3. Присвойте клиенту приложения имя, например WildRydesWebApp.
    4. Снимите флажок с параметра «Generate client secret» (Генерировать секрет клиента). В настоящее время секреты клиентов не поддерживаются для использования в приложениях на основе браузеров.
    5. Выберите «Create app client» (Создать клиент приложения).
    6. Запишите «App client id» (Идентификатор клиента приложения) для нового созданного приложения.
  • Шаг 3. Обновление файла config.js в корзине веб-сайта

    Файл /js/config.js содержит настройки для идентификатора пула пользователей, идентификатора клиента приложения и региона. Обновите этот файл с помощью настроек из пула пользователей и приложения, созданного вами при выполнении предыдущих шагов, а затем выгрузите файл обратно в корзину.


    1. Загрузите файл config.js из каталога веб-сайта первого модуля в этом репозитории на свой локальный компьютер. Для этого вернитесь в созданную вами корзину S3 и перейдите в папку с именем «js».
    2. Откройте загруженный файл в выбранном вами текстовом редакторе.
    3. Обновите раздел «Cognito», указав правильные значения для пула пользователей и только что созданного вами приложения.
    4. Значение поля « userPoolId» можно найти на странице «Pool details» (Сведения о пуле) консоли Amazon Cognito после выбора созданного пула пользователей.
      Значение поля « userPoolClientId» можно найти, выбрав « App clients» (Клиенты приложения) на левой панели навигации. Используйте значение поля « App client id» (Идентификатор клиента приложения) для приложения, созданного в предыдущем разделе.
      Значение поля « region» должно быть указано как код региона AWS, в котором вы создали пул пользователей. Например, us-east-1 для региона Сев. Вирджиния или us-west-2 для региона Орегон. Если вы точно не знаете, какой код использовать, посмотрите значение ARN пула на странице «Pool details» (Сведения о пуле). Код региона – это часть ARN, указанная сразу после arn:aws:cognito-idp:.
      Обновленный файл config.js должен выглядеть следующим образом. Обратите внимание, что фактические значения для вашего файла будут другими:

    window._config = { cognito: { userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv region: 'us-west-2' // e.g. us-east-2 }, api: { invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod', } };

    1. Сохраните измененный файл, убедившись, что его имя осталось прежним: config.js.
    2. Откройте консоль Amazon S3 на веб-странице https://console.aws.amazon.com/s3/.
    3. Выберите корзину веб-сайта Wild Rydes, созданную вами в предыдущем модуле.
    4. Перейдите к префиксу js.
    5. Выберите «Upload» (Выгрузить), а затем «Add Files» (Добавить файлы).
    6. Найдите каталог, в который вы сохранили локально измененную версию файла config.js, выберите его и нажмите «Open» (Открыть).
    7. Выберите «Upload» (Выгрузить) в левой части диалогового окна.

    Примечание. Вместо записи кода на стороне браузера для управления потоками регистрации, проверки и входа мы предоставляем рабочее внедрение в ресурсы, которые вы развернули в первом модуле. Файл cognito-auth.js содержит код, управляющий событиями пользовательского интерфейса и вызывающий соответствующие методы SDK идентификации Amazon Cognito. Для получения дополнительной информации об SDK см. страницу проекта на GitHub.

  • Шаг 4. Тестирование внедрения


    1. Перейдите на страницу /register.html в домене веб-сайта или выберите кнопку «Giddy Up!» на домашней странице веб-сайта.
    2. Заполните форму регистрации и выберите «Let's Ryde». Вы можете использовать собственный или вымышленный адрес электронной почты. Пароль обязательно должен содержать как минимум одну прописную букву, число и специальный символ. Не забудьте введенный пароль – он вам еще пригодится. Появится подтверждение создания пользователя.
    3. Подтвердите нового пользователя с помощью одного из указанных ниже способов.
    4. Если вы используете адрес электронной почты, который находится в вашем распоряжении, можно завершить процесс подтверждения аккаунта, открыв страницу /verify.html в домене вашего веб-сайта и введя код подтверждения, который был отправлен по электронной почте. Обратите внимание, что сообщение электронной почты для подтверждения может оказаться в папке со спамом. Для реальных развертываний рекомендуем указать в пуле пользователей Amazon Simple Email Service в качестве средства отправки сообщений электронной почты из принадлежащего вам домена.
    5. Если вы использовали вымышленный адрес электронной почты, можно подтвердить пользователя вручную с помощью консоли Cognito.
    6. Щелкните в консоли AWS «Services» (Сервисы) и выберите Cognito в разделе «Security, Identity & Compliance» (Безопасность и соответствие требованиям).
    7. Выберите «Manage your User Pools» (Управление пулами пользователей)
    8. Выберите пул пользователей WildRydes и щелкните «Users and groups» (Пользователи и группы) на панели навигации слева.
    9. Отобразится пользователь, соответствующий адресу электронной почты, который вы отправили на странице регистрации. Выберите это имя пользователя, чтобы просмотреть о нем сведения.
    10. Выберите «Confirm user» (Подтвердить пользователя), чтобы завершить создание аккаунта.
    11. После подтверждения нового пользователя на странице /verify.html или в консоли Cognito перейдите на страницу /signin.html и войдите в систему, используя адрес электронной почты и пароль, введенные во время этапа регистрации.
    12. В случае успешной аутентификации вы будете перенаправлены на страницу /ride.html. Откроется уведомление о том, что API не настроен.
    successful-login