В этом модуле вы создадите пул пользователей Amazon Cognito для управления аккаунтами своих пользователей. Вы развернете страницы, которые позволят пользователям регистрироваться в системе, подтверждать адреса электронной почты и входить на веб-сайт.
При посещении веб-сайта пользователю в первую очередь нужно зарегистрировать новый аккаунт. Для целей нашего курса мы попросим их ввести только адрес электронной почты и пароль. Но вы можете настроить в Amazon Cognito сбор любых дополнительных атрибутов для ваших приложений.
После того, как пользователь оформит регистрацию, Amazon Cognito отправит подтверждающее электронное сообщение с кодом подтверждения на предоставленный адрес электронной почты. Чтобы подтвердить аккаунт, пользователь возвращается на сайт и вводит адрес электронной почты и полученный код подтверждения. Вы также можете подтверждать аккаунты пользователей через консоль Amazon Cognito, например при использовании вымышленных адресов электронной почты для тестирования.
Пользователь сможет входить на сайт после того, как подтвердит свой аккаунт (через процесс подтверждения по электронной почте или вручную через консоль). При входе пользователь указывает имя пользователя (или адрес электронной почты) и пароль. Функция JavaScript передает эти данные в Amazon Cognito, выполняет аутентификацию по протоколу Secure Remote Password (SRP) и получает набор веб-токенов JSON (JWT). JWT содержат утверждения об удостоверении пользователя, и мы применим их в следующем модуле для аутентификации в API RESTful, созданном в Amazon API Gateway.
Время прохождения модуля: 30 минут
Используемые сервисы: Amazon Cognito
Шаблон CloudFormation. Если вы предпочитаете сразу перейти к следующему модулю, запустите один из шаблонов AWS CloudFormation в том же регионе, который вы выбрали в модуле 1.
| Регион | Шаблон CloudFormation |
|---|---|
| Восток США (Сев. Вирджиния) | Запустить стек > |
| Восток США (Огайо) | Запустить стек > |
| Запад США (Орегон) | Запустить стек > |
| ЕС (Франкфурт) | Запустить стек > |
| ЕС (Ирландия) | Запустить стек > |
| ЕС (Лондон) | Запустить стек > |
| Азия и Тихий океан (Токио) | Запустить стек > |
| Азия и Тихий океан (Сеул) | Запустить стек > |
| Азия и Тихий океан (Сидней) | Запустить стек > |
| Азия и Тихий океан (Мумбаи) | Запустить стек > |
Инструкции по запуску CloudFormation
Щелкните ссылку Launch Stack для выбранного региона из списка выше.
Щелкните Next на странице выбора шаблона.
Укажите имя корзины веб-сайта из модуля 1 (например,
wildrydes-yourname) в качестве значения Website Bucket Name, затем щелкните Next.Примечание. Вы должны указать то же имя корзины, что и в предыдущем модуле. Если вы укажете несуществующее имя корзины или имя корзины, к которой у вас нет доступа, процесс создания в CloudFormation завершится сбоем.
На странице параметров сохраните все значения, используемые по умолчанию, и щелкните Next.
На странице проверки установите флажок, чтобы согласиться с тем, что CloudFormation создаст ресурсы IAM и нажмите кнопку Create.
Этот шаблон применяет пользовательские ресурсы для создания пула пользователей Amazon Cognito и клиента, а также создает файл конфигурации с информацией для подключения к этому пулу пользователей и загрузки его в корзину веб-сайта. Этот шаблон создаст роль, которая предоставляет вам доступ для создания этих ресурсов и загрузки файла конфигурации в нужную корзину.
Дождитесь отображения статуса
CREATE_COMPLETEдля стекаwildrydes-webapp-2.Выполите процедуру, описанную в разделе Шаг 4. Тестирование реализации, чтобы подтвердить готовность к переходу к следующему модулю.
Чтобы выполнить создание пулов пользователей, следуйте пошаговой инструкции, приведенной ниже. Щелчком по номеру шага можно развертывать соответствующие разделы.
-
Шаг 1. Создание пула пользователей Amazon Cognito
Amazon Cognito предлагает два разных механизма для аутентификации пользователей. Вы можете применить пулы пользователей Cognito для реализации в приложении функций регистрации и входа, или пулы идентификации Cognito для аутентификации пользователей через поставщиков удостоверений социальных сетей, таких как Facebook, Twitter или Amazon, через готовые или собственные решения для идентификации SAML. Для этого модуля применяется пул пользователей, настроенный в роли серверной части для страниц регистрации и входа.
- В консоли AWS щелкните Services (Сервисы) и в разделе мобильных сервисов выберите Cognito.
- Выберите Manage your User Pools(Управление пулами пользователей).
- Щелкните Create a User Pool.
- Предоставьте имя для пула пользователей, например WildRydes, а затем щелкните Review Defaults.
- На странице проверки щелкните Create pool.
- Зафиксируйте Идентификатор пула, обозначенный на странице сведений о только что созданном пуле пользователей.
-
Шаг 2. Добавление приложения к пулу пользователей
В консоли Amazon Cognito выберите нужный пул пользователей и перейдите в раздел клиентов приложений. Добавьте новый клиент приложения и убедитесь, что для него не установлен флажок «Generate client secret». Секреты клиента в настоящее время не поддерживаются пакетом SDK для JavaScript. Если вы случайно создадите приложение с секретом приложения, удалите его и создайте новое с правильной конфигурацией.
- На странице сведений о пуле для пула пользователей выберите App clients в разделе General Settings на панели навигации слева.
- Выберите Add an app client.
- Присвойте клиенту приложения имя, например
WildRydesWebApp. - Снимите флажок «Generate client secret option». Секреты клиента в настоящее время не поддерживаются для браузерных приложений.
- Выберите Create app client.
- Зафиксируйте Идентификатор клиента приложения для только что созданного приложения.
-
Шаг 3. Обновление файла config.js в корзине вашего веб-сайта
Файл /js/config.js содержит такие параметры, как идентификатор пула пользователей, идентификатор клиента приложения и регион. Обновите этот файл, указав сведения о пуле пользователей и приложении, которые вы создали на предыдущих шагах, затем передайте обновленный файл в корзину.
- Скачайте файл config.js из каталога веб-сайта, предоставленного в этом репозитории для первого модуля, на локальный компьютер. Для этого можно перейти к созданной ранее корзине S3 и найти в ней папку с именем «js».
- Откройте скачанный файл в любом удобном текстовом редакторе.
- Обновите параметры в разделе cognito, указав значения для приложения и пула пользователей, которые вы только что создали.
Значение поля
userPoolIdможно найти на странице сведений о пуле консоли Amazon Cognito после выбора созданного пула пользователей.
Значение поляuserPoolClientIdможно найти, выбрав App clients на левой панели навигации. Используйте значение поля App client id для приложения, созданного в предыдущем разделе.
Значение поляregionдолжно быть указано как код региона AWS, в котором вы создали пул пользователей. Например,us-east-1для региона Сев. Вирджиния илиus-west-2для региона Орегон. Если вы точно не знаете, какой код использовать, посмотрите значение ARN пула на странице сведений о пуле. Код региона – это часть 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', } };
- Сохраните измененный файл, убедившись, что его имя осталось прежним:
config.js. - Откройте консоль Amazon S3, зайдя на страницуhttps://console.aws.amazon.com/s3/.
- Выберите корзину веб-сайта Wild Rydes, которую вы создали в предыдущем модуле.
- Перейдите к префиксу
js. - Щелкните Upload, а затем Add Files.
- Перейдите к папке, в которой вы сохранили локальную версию измененного файла config.js, выберите его и щелкните Open.
- Выберите Upload в левой части диалогового окна.
Примечание. Чтобы не писать новый код для выполнения на стороне браузера, который будет отвечать за потоки регистрации, проверки и входа, воспользуйтесь готовой реализацией из активов, которые вы развернули в первом модуле. Файл cognito-auth.js file содержит код, который обрабатывает события пользовательского интерфейса и вызывает соответствующие методы из SDK идентификации для Amazon Cognito. Дополнительные сведения об этом SDK см на странице проекта на сайте GitHub.
- Скачайте файл config.js из каталога веб-сайта, предоставленного в этом репозитории для первого модуля, на локальный компьютер. Для этого можно перейти к созданной ранее корзине S3 и найти в ней папку с именем «js».
-
Шаг 4. Проверка реализации
- Перейдите на страницу
/register.htmlв домене веб-сайта или нажмите кнопку Giddy Up! на главной странице веб-сайта. - Заполните форму регистрации и щелкните Let's Ryde. Вы можете указать здесь свой настоящий или фиктивный адрес электронной почты. Обязательно включите в пароль хотя бы одну букву в верхнем регистре, цифру и специальный символ. Запомните этот пароль, он пригодится нам позднее. Вы получите оповещение о создании пользователя.
- Подтвердите создание аккаунта одним из двух описанных ниже методов.
- Если вы используете адрес электронной почты, который находится в вашем распоряжении, можно завершить процесс подтверждения аккаунта, открыв страницу
/verify.htmlв домене вашего веб-сайта и введя код подтверждения, который был отправлен по электронной почте. Иногда письмо с подтверждением попадает в папку со спамом. Для реальных развертываний мы рекомендуем настроить для пула пользователей сервис Amazon Simple Email Service, чтобы отправлять электронные письма от имени собственного домена. - Если вы указали фиктивный адрес электронной почты, нового пользователя придется подтверждать вручную через консоль Cognito.
- В консоли AWS щелкните Services и выберите Cognito в разделе безопасности, идентификации и соответствия требованиям.
- Выберите Manage your User Pools(Управление пулами пользователей).
- Выберите пул пользователей
WildRydesи щелкните Users and groups на панели навигации слева. - Вы увидите здесь пользователя с тем адресом электронной почты, который вы указали на странице регистрации. Щелкните это имя пользователя, чтобы просмотреть подробные сведения о нем.
- Щелкните Confirm user, чтобы завершить процесс создания аккаунта.
- После подтверждения нового пользователя на странице
/verify.htmlили в консоли Cognito перейдите на страницу/signin.htmlи войдите в систему, используя адрес электронной почты и пароль, введенные во время этапа регистрации. - В случае успешной аутентификации вы будете перенаправлены на страницу
/ride.html. Вы получите оповещение о том, что API не настроен.
- Перейдите на страницу
