Введение

В предыдущем посте Основы 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 с помощью JavaScript.

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

Библиотеки Amplify JavaScript поддерживаются для различных веб- и мобильных платформ, включая React, React Native, Angular, Ionic и Vue. Вы можете проверить документы здесь.

Вы можете найти исходный код примера приложения в этом репозитории git.

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

Первоначально опубликовано на https://hexquote.com 2 июня 2022 г.