Интеграция AWS Cognito с amazon-cognito-identity-js

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

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

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

Создать новый угловой проект

Чтобы создать новый проект Angular, нам сначала нужно установить Angular CLI. Сначала установите, если у вас его еще нет.

npm install -g @angular/cli

Затем в предпочитаемом вами каталоге выполните команду ng new <app_name>. Выберите добавление маршрутизации Angular и выберите наиболее знакомый вам формат таблицы стилей. Об остальном позаботится Angular CLI.

Установить зависимости

Как упоминалось ранее, установка всей библиотеки Amplify только для настройки аутентификации Cognito может быть излишней. Поэтому, чтобы этого избежать, мы собираемся использовать для Cognito только JS-библиотеку, которая называется amazon -ognito-identity-js.

В своем проекте Angular выполните следующую команду, чтобы установить библиотеку.

npm i amazon-cognito-identity-js

Создание пользовательских интерфейсов

Теперь давайте создадим пользовательские интерфейсы для страниц входа и регистрации. Выполните следующие команды одну за другой в терминале из папки проекта Angular. Это создаст два компонента Angular с именами sign-in и sign-up во вновь созданном каталоге auth.

ng generate component auth/sign-in
ng generate component auth/sign-up

Создание страницы регистрации

Откройте auth/sign-up/sign-up.component.html и добавьте следующий код в нашу регистрационную форму. Мы добавим логику регистрации пользователей позже в этом руководстве.

Поскольку основное внимание уделяется демонстрации функций Cognito, я решил использовать минимально необходимый шаблон HTML. Вы можете добавлять стили к своим представлениям по своему усмотрению.

Создание страницы входа

Откройте auth/sign-in/sign-in.component.html и добавьте следующий код. На следующем шаге этого руководства мы добавим логику входа в систему.

Создание страницы панели инструментов

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

ng generate component dashboard

Затем откройте dashboard/dashboard.component.html и добавьте следующий код.

Теперь мы создали все необходимые пользовательские интерфейсы. Давайте посмотрим, как построить логику аутентификации Cognito.

Создание аутентификации

Настройка переменных среды

Чтобы реализовать аутентификацию Cognito, нам нужен идентификатор вашего пула пользователей Cognito и идентификатор клиента вашего пула пользователей. Поскольку рекомендуется хранить эти переменные конфигурации всего приложения как переменные среды, откройте environments/environment.ts и измените объект среды следующим образом.

export const environment = {
    production: false,
    cognitoUserPoolId: <your_cognito_user_pool_id>,
    cognitoAppClientId: <your_cognito_app_client_id>
};

Теперь мы можем получить доступ к этим переменным среды в коде нашего приложения, импортировав и обратившись к объекту environment.

Реализация логики регистрации

Откройте auth/sign-up/sign-up.component.ts и добавьте следующий код.

Вы можете задаться вопросом, что означают ключи объекта с префиксом custom: в объекте formData. Amazon Cognito поддерживает большое количество пользовательских атрибутов по умолчанию, например name, email_address, family_name, birthdate и т. Д., Но, тем не менее, мы можем захотеть иметь некоторые настраиваемые атрибуты для конкретных нужд приложения. Здесь university - один из таких настраиваемых атрибутов пользователя. Следовательно, при вставке значения в поле university мы должны добавить к нему префикс custom:.

4.3 Реализация логики входа в систему

Откройте auth/sign-in/sign-in.component.ts и добавьте следующий код. Здесь я использовал адрес электронной почты в качестве имени пользователя, но вы можете использовать любое значение, если оно уникально для конкретного пользователя.

4.4 Реализация логики выхода

Откройте dashboard/dashboard.component.ts и добавьте следующее.

4.5 Внедрение охранников маршрута

Защитники маршрутов в Angular могут использоваться для реализации настраиваемой логики маршрутов в нашем приложении. Мы используем canActivate route guard, чтобы проверить, прошел ли пользователь аутентификацию, прежде чем разрешить ему просматривать защищенные страницы. В этом уроке мы собираемся защитить страницу панели инструментов.

Чтобы сгенерировать защиту маршрута, выполните следующую команду. При появлении запроса выберите canActivate.

ng g guard auth/auth-guard --skipTests=true

Это создаст auth.guard.ts файл в каталоге auth. Измените его код следующим образом.

Теперь метод canActivate в нашей защите маршрута проверяет, аутентифицирован ли текущий пользователь, перед рендерингом страницы и возвращает логический ответ. Если это правда, пользователю разрешено просматривать защищенную страницу, в противном случае - нет.

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

ng g service auth/auth

Откройте созданный файл auth/auth.service.ts и добавьте следующий код. Мы использовали функцию isLogged выше внутри canActivate route guard, чтобы определить, есть ли у текущего пользователя действительный сеанс,

Также откройте app-routing.module.ts и добавьте AuthService в массив providers.

import { AuthService } from './auth/auth.service';
.
.
.
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthService]
})

Проверить, работает ли ...

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

Примечание: имейте в виду, что зарегистрированный пользователь должен быть подтвержден перед попыткой входа в систему. Я не реализовал его в этом руководстве, так как он сделает эту статью длиннее, и поэтому оставил его на ваше усмотрение. , но добавить его довольно просто. Вы можете подтвердить пользователя либо программно, используя функцию confirmRegistration, предоставляемую amazon-cognito-identity-js (наиболее осуществимый и надежный способ), либо вручную через панель управления пулом пользователей Cognito (только для быстрого тестирования / демонстрации).

В этом руководстве мы узнали, как добавить аутентификацию AWS Cognito в приложение Angular. Если вы столкнулись с трудностями, дайте мне знать в ответах. Кроме того, вы можете обратиться к образцу приложения для этого руководства на Github.



GitHub - pavinduLakshan / angular-aws -ognito-auth-demo: Пример приложения Angular с AWS Cognito…
Этот проект был создан с помощью интерфейса командной строки Angular версии 12.1.2. Запустите ng serve для сервера разработки. Перейдите на… github.com



Спасибо за чтение ❤️

Больше контента на plainenglish.io