Использование Open Source AWS Amplify JS с Cognito для защиты приложений Angular
6 мая 2022 г.Если вы планируете использовать библиотеку AWS Amplify JS с открытым исходным кодом в своем веб-приложении для управления аутентификацией с помощью размещенного пользовательского интерфейса AWS Cognito UserPools. , не совсем понятно, как Amplify обрабатывает аутентификацию.
В этой статье показано, как настроить Cognito UserPools поток аутентификации JWT и как он будет интегрироваться с веб-приложением Angular. Я рассмотрю поток грантов кода AWS Cognito UserPools. Однако шаги аналогичны неявному потоку, за исключением того, что сеанс не будет обновляться после истечения срока действия id_token.
Предыстория: DevSecOps в приложениях Angular
Большинство организаций разработчиков начинают осознавать, что безопасность не может быть второстепенной задачей в их жизненном цикле разработки. В рамках перехода на DevSecOps команды разработчиков создают систему безопасности как автоматизированный шаг в своем конвейере доставки.
При использовании AWS Amplify JS и аналогичных библиотек с открытым исходным кодом для тестирования безопасности чрезвычайно важно поддерживать эти библиотеки в актуальном состоянии, отслеживая текущий выпуск изменяется, поскольку эти компоненты с открытым исходным кодом закладывают основу безопасности веб-приложения.
NPM теперь имеет функцию проверки безопасности для выполнения оценки зависимостей пакетов на наличие известных уязвимостей безопасности. Поскольку большинство этих библиотек содержат несколько сторонних NPM-зависимостей, важно проводить аудит для всех из них. Аудит безопасности NPM способен находить и устранять известные уязвимости в зависимостях, которые потенциально могут привести к потере данных, перебоям в обслуживании, несанкционированному доступу к конфиденциальной информации. Те, которые NPM не может исправить автоматически, в отчете об аудите указываются для ручного вмешательства разработчика.
Шаг 1. Установите AWS Amplify в свое приложение Angular
Если вы разрабатываете приложение Angular, вы можете установить дополнительный пакет aws-amplify-angular. Этот пакет содержит модуль Angular с провайдером и компонентами:
```javascript
$ npm установить aws-amplify --save
$ npm установить aws-amplify-angular --save
Шаг 2. Инициализация конфигураций Amplify
Вы можете инициализировать конфигурацию Amplify Cognito UserPools и Cognito Federated Identities в файле main.ts.
```javascript
импортировать Amplify из «aws-amplify»;
Усилить.configure({
Авторизация: {
// другие конфигурации...
identityPoolId: 'us-east-1:xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
// ТРЕБУЕТСЯ — идентификатор пула удостоверений Amazon Cognito
регион: 'us-east-1', // ТРЕБУЕТСЯ — регион Amazon Cognito
userPoolId: 'us-east-1_XYZPQRS',
// ДОПОЛНИТЕЛЬНО — идентификатор пула пользователей Amazon Cognito
userPoolWebClientId: 'хххххххххххххххххххххх',
// ДОПОЛНИТЕЛЬНО — идентификатор веб-клиента Amazon Cognito
аутентификация: {
домен: 'my-app-development.auth.us-east-1.amazoncognito.com',
// Авторизованные области
область действия: ['электронная почта', 'openid'],
// URL обратного вызова
redirectSignIn: 'http://localhost:4200/authenticated',
// URL выхода
redirectSignOut: 'http://localhost:4200/logout',
// 'код' для предоставления кода авторизации,
// 'токен' для неявного предоставления
тип ответа: 'код',
// необязательный, для указанных параметров пользовательского интерфейса, размещенного в Cognito
опции: {
// Указывает, включен ли сбор данных для поддержки расширенных функций безопасности Cognito.
// По умолчанию этот флаг установлен в значение true.
AdvancedSecurityDataCollectionFlag: true
Шаг 3: Инициализируйте ресурсы Amplify Angular
Вам нужно инициализировать модуль и сервис Angular внутри вашего файла app.module.ts.
```javascript
import { AmplifyAngularModule, AmplifyService } из 'aws-amplify-angular';
@NgModule({
декларации: [
импорт: [
БраузерМодуль,
форммодуль,
HttpModule,
AmplifyAngularModule,
провайдеры: [
АмплифиСервис,
Шаг 4. Создайте необходимые маршруты
Вам необходимо создать несколько маршрутов для реализации процесса аутентификации Cognito UserPools Hosted UI.
- Аутентифицированный маршрут (например, /authenticated) — Этот маршрут, на который HostedUI будет перенаправляться. Примечание. Убедитесь, что для этого маршрута не настроен никакой AuthGuard (подробнее в следующем разделе).
- Домашний маршрут (например, /home или /) — Этот маршрут перенаправляет пользователя после завершения рукопожатия Cognito Token.
```javascript
импортировать { AuthGuardService as AuthGuard } из '../service/auth-guard.service';
константные маршруты: Маршруты = [
{путь: "аутентифицированный", компонент: AuthenticatedComponent},
{путь: '', компонент: HomeComponent, canActivate: [AuthGuard]},
После того, как пользовательский интерфейс Cognito Hosted перенаправляется в приложение, если вы правильно настроили вышеуказанные шаги, Amplify внутренне взаимодействует с конечной точкой токена Cognito UserPool и извлекает токены в зависимости от типа гранта и областей действия.
Шаг 5: Создайте AuthGuard для защиты аутентифицированных маршрутов
Создайте службу Angular, реализующую метод CanActivate в Angular Router.
```javascript
импортировать {Injectable} из '@angular/core';
импортировать { Router, CanActivate, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot} из '@angular/router';
импортировать { AmplifyService } из 'aws-amplify-angular';
@Инъекционный()
класс экспорта AuthGuardService реализует CanActivate {
конструктор () {}
перенаправить на вход () {
const config = Amplify.Auth.configure();
константа {
домен,
перенаправление,
перенаправлениеSignOut,
тип ответа
} = config.oauth;
const clientId = config.userPoolWebClientId;
const url = 'https://' + domain + '/login?redirect_uri=' + redirectSignIn + '&response_type=' + responseType + '&client_id=' + clientId;
// Запуск размещенного пользовательского интерфейса
окно.местоположение.назначить(url);
/* canActivate(): логическое значение {
можноактивировать(
следующий: ActivatedRouteSnapshot,
состояние: RouterStateSnapshot): Observable
вернуть this.amplifyService.auth().currentSession().catch((ошибка) => {
this.redirectToLogin();
Шаг 6: Дождитесь рукопожатия Cognito Token на аутентифицированном маршруте
Как только пользователь перенаправляется на аутентифицированный маршрут из размещенного пользовательского интерфейса Cognito UserPools, необходимо дождаться, пока Amplify обработает рукопожатие токена Cognito.
К сожалению, Amplify Service State Change Observable не работает должным образом. Поэтому для прослушивания события требовалось использовать ПО промежуточного слоя концентратора.
```javascript
импортировать {Component, OnInit, TemplateRef} из '@angular/core';
импортировать { Router, RouterModule, Routes } из '@angular/router';
импортировать { Hub } из 'aws-amplify'
@Составная часть({
селектор: «проверено приложением»,
Url-шаблона: './authenticated.component.html',
styleUrls: ['./authenticated.component.scss']
класс экспорта AuthenticatedComponent реализует OnInit {
конструктор( частный маршрутизатор: Маршрутизатор) {
Hub.listen('auth', this, 'AuthCodeListner');
onHubCapsule (капсула) {
const {канал, полезная нагрузка} = капсула;
if (channel === 'auth' && payload.event === 'signIn') {
this.router.navigate([''])
нгонинит () {}
Шаг 7. Используйте перехватчик HTTP для отправки токена Cognito ID для запросов API
После правильной аутентификации Amplify сохранит токены в LocalStorage, и вы сможете получить к ним доступ с помощью метода amplifyService.auth().currentSession().
Доступ к токенам
```javascript
this.amplifyService.auth().currentSession().catch((ошибка) => {
this.redirectToLogin();
Написание перехватчика аутентификации
Для получения более подробной информации о написании Auth Interceptor см. [Угловая аутентификация: использование Http-клиента и Http-перехватчиков.] (https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http -перехватчики-2f9d1540eb8)
Шаг 8: Запустите аудит NPM
Прежде всего, обновите NPM до последней версии, а затем запустите команду аудита.
```javascript
$ npm установить npm@latest -g
$ npm-аудит
Аудит Npm автоматически запускается при установке пакетов с помощью npm install. Однако полезно время от времени проверять локально установленные пакеты для выявления недавно обнаруженных уязвимостей.
После запуска команды аудита или если вы видите уязвимости после установки нового пакета в отчете аудита npm, запустите подкоманду npm audit fix, чтобы автоматически установить совместимые обновления для исправления выявленных уязвимых зависимостей.
```javascript
Исправление аудита $ npm
На момент написания этой статьи при выполнении аудита npm для пакета AWS Amplify Angular, зависимостей, аудит npm обнаружил 30 уязвимостей (7 низких, 17 средних, 6 высоких) в 4358 отсканированных пакетах, где возможно выполнение «npm audit fix». исправить 29 из них.
Оригинал