Введение
В предыдущем посте Основы AWS Cognito — Пулы пользователей. мы рассмотрели основы AWS Cognito, а также создали пул пользователей. Ниже приводится резюме:
Резюме
AWS Cognito позволяет быстро и легко добавлять регистрацию пользователей, вход и контроль доступа в веб-приложения и мобильные приложения:
- Пулы пользователей — это каталоги пользователей.
- Услуги регистрации и Singin.
- Встроенный настраиваемый веб-интерфейс для пения пользователей.
- Социальный вход с внутренне перемещенными лицами.
- Управление каталогами пользователей и профилями пользователей.
- Функции безопасности (многофакторная аутентификация, политика паролей и т. д.)
- Он также интегрирован с триггерами Lambda.
- Также предоставляет возможность создавать группы и назначать пользователей в группы.
Кроме того, мы также создали общедоступный клиент-приложение (веб-приложение) и настроили его URL-адреса обратного вызова и перенаправления выхода, а также потоки OAuth 2.0 (предоставление кода авторизации и неявное предоставление).
Пожалуйста, обратитесь к предыдущему сообщению, если вы новичок в этих темах.
Что мы рассмотрим сегодня
Итак, мы знаем теорию и то, что предлагает нам AWS Cognito, а теперь давайте сделаем еще один шаг и реализуем следующий сценарий:
У нас есть статическое веб-приложение (HTML, JavaScript , CSS), и у него еще нет выделенного серверного модуля. Давайте посмотрим, как мы можем интегрировать функции входа/выхода с помощью AWS Cognito.
Это очень простой пример, но он создаст основу, которую мы позже расширим для расширенных сценариев.
Настройка простого веб-приложения
Первым делом я настроил репозиторий git с очень простым веб-приложением. Весь исходный код доступен там. Клонируйте репозиторий и проверьте файл readme, чтобы запустить приложение локально. Вы также можете использовать собственное приложение для упражнений и просто следовать инструкциям.
Приложение имеет одну html-страницу index.html и файл index.js в качестве файла JavaScript точки входа. Есть несколько библиотек, таких как jQuery, bootstrap для стилей и ParceJS в качестве упаковщика, и ниже приведен пользовательский интерфейс для справки:
Итак, базовая веб-страница шаблона с акцентом на имя пользователя заполнитель и две кнопки (вход и выход) и без какой-либо настройки с помощью AWS Cognito.
Это наша отправная точка, и мы будем интегрировать AWS Cognito.
Как упоминалось в предыдущем посте, Cognito предлагает размещенный пользовательский интерфейс, поэтому нам не нужно самим создавать все соответствующие страницы входа в систему, выхода из системы, сброса пароля и т. д. Мы можем просто использовать размещенный пользовательский интерфейс. Конечно, размещенный пользовательский интерфейс не даст нам гибкости и простоты настройки собственного дизайна по своему усмотрению, но он идеален, когда основное внимание изначально не уделяется части пользовательского интерфейса, и при необходимости мы можем позже настроить пользовательские страницы пользовательского интерфейса.
Интеграция с AWS Amplify
Поскольку проекты AWS Amplify используют пулы пользователей Cognito для аутентификации, приложения, использующие Cognito, могут использовать встраиваемые библиотеки и компоненты пользовательского интерфейса из amplify, даже если они не используют сервис Amplify.
Это означает, что нам не нужно писать весь шаблонный код для вызовов idp и работы с заголовками, повторными попытками и т. д. Мы просто добавим пакет и делегируем задачи в библиотеку aws-amplify, чтобы обработать его и дать нам ответ. которые мы будем обрабатывать в коде нашего приложения.
Для получения дополнительной информации, пожалуйста, ознакомьтесь с документами, доступными по этой ссылке.
Мы можем установить пакет amplify с помощью команды npm, как показано ниже:
npm install aws-amplify
Мы начнем с импорта модуля Auth из AWS Amplify SDK. Это то, что мы собираемся использовать для аутентификации в нашем пуле пользователей Cognito.
Далее нам нужно настроить Amplify с нашим идентификатором пула пользователей и идентификатором веб-клиента и другими настройками, которые мы создали в предыдущем посте. Мы можем найти эти значения в консоли управления AWS:
(Обратите внимание на https в URL-адресах перенаправления, ParcelJS позволяет нам использовать https в разработке, если это необходимо.)
- UserPoolId: уникальный идентификатор пула пользователей AWS Cognito, который управляет пользователями.
- userPoolWebAppClientId: предоставляет приложению возможность подключения и доступа к AWS Cognito для чтения и записи пользовательских данных.
- Регион: место, где в настоящее время создается Cognito.
При этом модуль Auth подключается к нашему пулу пользователей.
проблема с интеграцией aws-amplify и ParcelJS
Я столкнулся со следующей проблемой (parecelJS), поэтому, если вы также видите ошибку консоли браузера, подобную следующей:
добавьте следующий оператор import в файл index.js, чтобы решить эту проблему:
Получить текущего аутентифицированного пользователя
Amplify напрямую связывается с нашим пулом пользователей Cognito.
Ниже приведен код JavaScript, в котором используется модуль Auth (aws-amplify), который мы импортировали ранее, и мы можем просто вызывать его методы:
на основе результата вызова этого метода мы можем обновить пользовательский интерфейс, передав возвращаемый объект функции setUserState.
Вот функция setUserState:
Ничего особенного, очень типичный JavaScript для отображения/скрытия элементов DOM.
со всей этой проводкой на месте (вы можете проверить исходный код для деталей), мы можем запустить приложение:
и вы можете видеть, что теперь отображается только кнопка Войти (кнопка выхода и заполнитель имени пользователя скрыты, когда пользователь не вошел в систему). Журнал окна консоли показывает статус аутентификации.
И теперь, поскольку эта информация доступна нам на стороне клиента, мы можем отображать ее в пользовательском интерфейсе по мере необходимости:
Хорошо, давайте сделаем еще один шаг и вызовем размещенный пользовательский интерфейс, когда пользователь нажмет кнопку Войти.
Активировать размещенный пользовательский интерфейс
Как упоминалось ранее, и мы также видели это в предыдущем посте, размещенные пользовательские интерфейсы пула пользователей AWS Cognito помогают настроить рабочие процессы аутентификации за считанные минуты, а простота интеграции в клиентские приложения помогает ускорить процесс разработки приложений.
Это чистый подход без кода, чтобы начать работу с полнофункциональным модулем аутентификации для ваших приложений.
Следующий код запускает размещенный пользовательский интерфейс, когда пользователь нажимает кнопку входа:
вот функция обработчика:
а вот пользовательский интерфейс входа
Эти компоненты пользовательского интерфейса и связанные с ними функции поступают из размещенного пользовательского интерфейса. Теперь пользователь может войти в систему, зарегистрироваться, сбросить пароль и т. д.
Экран регистрации
Забыл пароль UI
Войти в приложение
У нас есть несколько учетных записей пользователей из предыдущего поста, или вы можете зарегистрировать новую учетную запись. Вот как пользовательский интерфейс отображает вошедшего в систему пользователя (показаны местозаполнитель имени и кнопка выхода, кнопка входа скрыта)
консоль браузера показывает нам информацию об этом пользователе:
Функция выхода
Подобно входу в систему, функция выхода из системы проста в реализации:
Модуль Аутентификации снова выполняет всю тяжелую работу, и мы просто делегируем ему эту задачу. Как только пользователь выйдет из системы, он будет перенаправлен на URL-адрес redirectSignOut, который мы настроили ранее.
Развертывание приложения и тестирование
Хорошо, приложение работает в среде разработки. Давайте развернем его на AWS и протестируем.
Я настроил корзину S3, дистрибутив CloudFront и сертификаты. Эти темы освещены в моих предыдущих сообщениях, поэтому я не буду вдаваться в подробности здесь. Приложение развернуто и доступно по следующему адресу:
https://cognito.awsclouddemos.com/
Ниже приведены изменения, внесенные в код JavaScript приложения и пул пользователей в целях развертывания.
и ниже показано развернутое приложение с пользователем, вошедшим в систему:
Вот и все на сегодня. Мы добились определенного прогресса, интегрировали пул пользователей Cognito с нашим веб-приложением, и процесс оказался не таким уж сложным, и мы получили стандартные общие пользовательские функции и компоненты пользовательского интерфейса со встроенной масштабируемостью, отказоустойчивостью и доступностью AWS. управляемая сервисная инфраструктура.
Ссылки по теме
- Развернутое приложение
- Основы AWS Cognito — Пулы пользователей
- Parcel JS — молниеносно быстрый сборщик веб-приложений без настройки
- Усилить библиотеки
- Перенос локальных веб-приложений (.NET Core, Angular и Postgres) — на AWS Serverless
Краткое содержание
В этом посте мы интегрировали простое веб-приложение в AWS Cognito с помощью JavaScript.
AWS Cognito — это отличный сервис, который значительно упрощает для нас задачи, связанные с пользователями, и основные проблемы с идентификацией, и мы можем тратить больше времени на разработку функций, обеспечивающих ценность для бизнеса.
Библиотеки Amplify JavaScript поддерживаются для различных веб- и мобильных платформ, включая React, React Native, Angular, Ionic и Vue. Вы можете проверить документы здесь.
Вы можете найти исходный код примера приложения в этом репозитории git.
В следующих постах мы рассмотрим более продвинутые сценарии применения. Дайте мне знать, если у вас есть вопросы или комментарии. До следующего раза, удачного кодирования.
Первоначально опубликовано на https://hexquote.com 2 июня 2022 г.