AWS усилват и ъглови - как да?

Как да конфигурирате, инициализирате и използвате AWS Amplify, новата CLI базирана верига от инструменти и Javascript SDK от AWS за управление и използване на AWS Services.

В тази публикация ще създадем основно ъглово приложение и ще му позволим да се удостоверява с AWS Cognito, като използваме AWS Amplify за създаване на AWS ресурси и да го конфигурираме в SDK за усилване на фронта.

В момента AWS Amplify работи със следната категория услуги AWS:

Забележка: AWS Amplify е модулиран, така че можете просто да импортирате модула, който ви трябва (но за ъгъл> 6 имаше проблеми, така че трябваше да използвам пакетите без надпис „@“ пред него, описах го по-късно в тази публикация)) името на пакетите за модули и npm са изброени заедно с различните категории по-долу.

  1. Пакет Core - npm (@ aws-amplify / core): Необходим ви е този основен пакет за конфигуриране на Amplify, за да използвате някое от по-долу.
  2. Анализ - npm пакет (@ aws-amplify / analytics)
  3. API - npm пакет (@ aws-amplify / api)
  4. Удостоверяване (AWS Cognito) - npm пакет (@ aws-amplify / auth): Тази публикация е свързана с използването на това във вашето ъглово приложение
  5. Взаимодействия
  6. PubSub - npm пакет (@ aws-amplify / pubsub)
  7. Push Известия
  8. Съхранение - npm пакет (@ aws-amplify / storage)
  9. XR

В тази публикация ще преминем, въпреки че процесът на създаване и използване на aws се усилва, за да се даде възможност за автентификация на базата на AWS Cognito в ъглово приложение.

Предварително условие - настройка на усилваща конфигурация и стартиране на ново ъглово приложение:

Няколко предварителни стъпки, преди да започнете това Как да:

  1. Уверете се, че имате AWS акаунт и сте запознати с основите на AWS и Angular и техните еко системи и терминологии.
  2. Уверете се, че имате конфигуриран AWS CLI във вашата система с настройка на AWS профил за акаунта на AWS, който ще използвате за това Как да.

Инсталирайте AWS усилва клипа и създайте ново ъглово приложение:

  1. Инсталирайте @ aws-amplify / cli
$ npm install -g @ aws-усилвам / cli

2. Проверете дали клипът за усилване на AWS е инсталиран

$ усилвам

3. Инсталирайте и се уверете, че имате инсталиран последен ъглов CLI

$ npm инсталация - запазване @ ъглов / клип
$ ng версия

4. Създайте ново ъглово приложение (аз наричам моето ъглово приложение „ъглово-усилващо“, за да следвате, просто изберете същото)

$ ng ново ъглово усилване

5. Отидете в новосъздадената директория за ъглови приложения и инсталирайте пакета и го стартирайте, за да сте сигурни, че приложението за стартиране работи

$ cd ъглово усилване
$ npm инсталиране
$ npm старт

6. Инсталирайте допълнителни npm пакети за вашето приложение за ъглови / фронтални връзки, свързани с AWS Amplify

  • aws-amplify - Пакетът под npm се нуждае от него, в противен случай ще получите грешка
  • aws-amplify-angular - усилване на ъглови компоненти
  • @ aws-amplify / ui - потребителски интерфейс - не е посочен в документацията за усилване и трябва да го инсталирате за потребителския интерфейс, за да добавите AWS тематичен CSS стил. Просто инсталирането на този пакет няма да работи. Трябва също така да импортирате следната тема и файл css във файла ъглов проект на style.scss, подробно описан по-късно в тази публикация.
  • @import “~@aws-amplify/ui/src/Theme.css”;
  • @import “~@aws-amplify/ui/src/Angular.css”;
$ npm install - запазване на Aws-усилване
$ npm install - запазване на aws-усилване-ъгъл
$ npm инсталирайте --save @ aws-amplify / ui

Инициализиране на усилване на свързани конфигурационни файлове / папки:

В основната директория на този проект, т.е. / angulr-amplify, изпълнете следната команда

$ усилвам init

и след това изберете следните опции, една по една, когато бъдете подканени:

По-долу изброява моя избор.

| => усилвам init
Забележка: Препоръчва се да стартирате тази команда от корена на вашата директория с приложения
? Изберете редактора по подразбиране: Visual Studio Code
? Изберете типа приложение, което изграждате JavaScript
Моля, кажете ни за вашия проект
? Каква рамка на JavaScript използвате ъглова
? Път към източника на директорията: src
? Път на дистрибуцията: dist
? Build Command: npm build
? Start Command: npm start
Използване на awscloudformation на доставчика по подразбиране
За повече информация относно AWS профилите вижте:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Искате ли да използвате AWS профил? да
? Моля, изберете профила, който искате да използвате по подразбиране
⠴ Инициализиране на проект в облака ...

Това трябва да създаде следния набор от усилващ конфигурационен файл и директории:


    | _Amplify /
    | _ # current-cloud-backkend /
        | _ amplify-meta.json
    | _ .config
        | _ aws-info.json
        | _ project-config.json
    | _ бекенд /
        | _Amplify-meta.json
    | _.amplifyrc

Подробностите за горепосочените файлове / директория, заедно с това, за което се използват, са достатъчно предоставени в тази връзка AWS усилва използването на Javascript.

За да разберете терминологията, трябва да имате основно разбиране на AWS и свързаните с тях терминологии и предлагане на услуги.

Ъгловото приложение, което създаваме, просто ще използва услугата AWS Auth или AWS Cognito за сега, така че нека създадем шаблона за стекане на облак за AWS Cognito.

$ усилвам добавя авт

Това трябва да създаде директория „auth / cognitoxxxxxxxx“ в директорията за усилване / поддръжка на корена на вашия проект. Тази директория трябва да има новогенериран когнито скрипт за формиране на облак и параметър JSON файл.

Сега, нека създадем действителните AWS ресурси, използвайки локалните скриптове за формиране на облак, генерирани от усилващия клип. За да създадете ресурсите, използвайте следната команда.

$ усилвам натискане
| Категория | Име на ресурса | Експлоатация | Плъгин за доставчик |
| -------- | --------------- | --------- | ----------------- |
| Авт | cognitoa67f309a | Създайте | awscloudformation |
? Сигурен ли си, че искаш да продължиш? (Y / N)

Въведете "Y" по-горе. След няколко минути той ще създаде ресурса AWS и ще генерира конфигурационен файл „aws_exports.js“ в папката / src.

Ще използваме този генериран конфигурационен файл с информация за новосъздадените ни AWS ресурси, за да конфигурираме AWS Amplify frontend SDK след това в нашето ъглово приложение.

Преминаване към Angular Application сега:

Сега направете копие на „aws-export.js“ в директорията „src“, създадена отгоре.

$ cp src / aws-export.js src / aws-export.ts

Създайте компонент, наречен „auth“, като използвате следния ъглов CLI

$ ng g c auth
CREATE src / app / auth / auth.component.scss (0 байта)
CREATE src / app / auth / auth.component.html (23 байта)
CREATE src / app / auth / auth.component.spec.ts (614 байта)
CREATE src / app / auth / auth.component.ts (262 байта)
UPDATE src / app / app.module.ts (467 байта)

По същия начин създайте „домашен“ и „защитен“ компоненти

Използвайте командата по-долу за създаване на компонент "home".

$ ng g c начало
CREATE src / app / home / home.component.scss (0 байта)
CREATE src / app / home / home.component.html (23 байта)
CREATE src / app / home / home.component.spec.ts (614 байта)
CREATE src / app / home / home.component.ts (262 байта)
UPDATE src / app / app.module.ts (541 байта)

Използвайте командата по-долу за създаване на "сигурен" компонент.

$ ng g c сигурно
CREATE src / app / secure / secure.component.scss (0 байта)
CREATE src / app / secure / secure.component.html (25 байта)
CREATE src / app / secure / secure.component.spec.ts (628 байта)
CREATE src / app / secure / secure.component.ts (270 байта)
UPDATE src / app / app.module.ts (623 байта)

На този етап ние създадохме нашите конфигурационни файлове за AWS Amplify, имаме основна настройка на ъгловото приложение с компонентите: „auth“, „home“ и „secure“

Нашата настройка за URL адрес на приложение за нашето просто ъглово демо приложение. Тук няма нищо фантазия.

/ - ще зареди компонент / страница „home“ (страница по подразбиране / root)

/ auth - ще зареди компонента / страница auth

/ secure - ако сте влезли в системата, ще заредите защитен компонент / страница или ще пренасочите към / auth и след успешна регистрация, отнесете един към този компонент / страница

Проверете дали ъгловото приложение работи:

$ npm старт

Конфигуриране на ъглово приложение за използване на AWS Amplify SDK:

Уверете се, че файлът ви „aws-export.ts“ е нещо като по-долу въз основа на вашия файл aws-export.js:

export const awsmobile = {
'aws_project_region': 'us-east-1',
'aws_cognito_identity_pool_id': 'us-east-1: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
'aws_cognito_region': 'us-east-1',
'aws_user_pools_id': 'us-east-1_XXXXXXXXX', 'aws_user_pools_web_client_id': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX'
};

Променете main.ts, за да добавите следния код, за да конфигурирате Amplify за приложението си:

import Amplify от 'aws-amplify';
import * като awsamplify от './aws-exports';
Amplify.configure (awsamplify.awsmobile);

Сега стартирайте приложението си отново:

$ npm старт

Може да получите някои проблеми с буфера и потока като по-долу:

ГРЕШКА в node_modules / aws-sdk / clients / acm.d.ts (133,37): грешка TS2580: Не може да се намери име „Buffer“. Трябва ли да инсталирате дефиниции на типа за възел? Опитайте `npm i @ types / node`.
....

Ако получите горната грешка, моля, погледнете следната връзка:

За да решите горния проблем съгласно горния документ:

„За да разрешите тези проблеми, или добавете„ видове “: [„ възел “] към файла tsconfig.app.json на проекта, или премахнете полето„ видове “изцяло.“

така че променете tsconfig.app.json отдолу:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"видове": []
}
"изключване": [
"test.ts",
"** / *. spec.ts"
]
}

да се:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
// "type": ["възел"]
}
"изключване": [
"test.ts",
"** / *. spec.ts"
]
}

Сега изпълнете командата по-долу, за да рестартирате приложението Angular и отидете на „http: // localhost: 4200 /“, за да се уверите, че вашето стартова ъглова програма работи добре.

$ npm старт

Ако основната страница на приложението ви се появи празна или ако видите следната грешка, когато щракнете с десния бутон и проверите конзолата:

Uncaught ReferenceError: глобалната не е дефинирана
    в Object ../ node_modules / buffer / index.js (index.js: 43)
    в __webpack_require__ (bootstrap: 78)
    в Object ../ node_modules / aws-sdk / lib / browserHashUtils.js (browserHashUtils.js: 1)
    в __webpack_require__ (bootstrap: 78)
    в Object ../ node_modules / aws-sdk / lib / browserHmac.js (browserHmac.js: 1)
    в __webpack_require__ (bootstrap: 78)
    в Object ../ node_modules / aws-sdk / lib / browserCryptoLib.js (browserCryptoLib.js: 1)
    в __webpack_require__ (bootstrap: 78)
    в Object ../ node_modules / aws-sdk / lib / browser_loader.js (browser_loader.js: 4)
    в __webpack_require__ (bootstrap: 78)

За да коригирате горния проблем, добавете следния код към index.html преди маркера

<Скрипт>
ако (глобален === неопределен) {
var global = прозорец;
}

проверете следната връзка за подробности (превъртете до дъното):

Още веднъж проверете дали вашето ъглово приложение работи:

$ npm старт

Премахнете всички настройки по подразбиране от стартовото приложение в index.html и също така създайте следните маршрути в маршрута на приложението си:

const маршрути: Маршрути = [
{path: '', компонент: HomeComponent, pathMatch: 'full'},
{path: 'auth', компонент: AuthComponent, pathMatch: 'full'},
{path: 'secure', компонент: SecureComponent, pathMatch: 'full'},
];

Променете своя index.html, за да изглежда по-долу (нещата се правят просто, ние не се опитваме да постигнем уникалност на потребителския интерфейс тук):

Добре дошли в {{title}}!

     

Връзки към страниците

  <Ул>       
  • Начало

  •       
  • Auth

  •       
  • Защитен

  •      <Ч>       <Рутер-изход>   <Ч>

    Отново се уверете, че приложението работи:

    $ npm старт

    Ако всичко е наред, приложението ви трябва да изглежда по-долу:

    Домашното приложение трябва да изглежда по-горе

    Сега импортирайте AmplifyAngularModule и AmplifyService в основния си „app module.ts“, който трябва да изглежда по-долу:

    импортира {BrowserModule} от '@ angular / platform-browser';
    import {NgModule} от '@ angular / core';
    import {AmplifyAngularModule, AmplifyService} от 'aws-amplify-angular';
    import {AppRoutingModule} от './app-routing.module';
    import {AppComponent} от './app.component';
    import {AuthComponent} от './auth/auth.component';
    import {HomeComponent} от './home/home.component';
    import {SecureComponent} от './secure/secure.com компонент';
    @NgModule ({
    декларации: [AppComponent, AuthComponent, HomeComponent, SecureComponent],
    внос: [BrowserModule, AppRoutingModule, AmplifyAngularModule],
    доставчици: [AmplifyService],
    bootstrap: [AppComponent]
    })
    експорт клас AppModule {}

    Отидете на „auth.component.html“ и заменете съдържанието с по-долу:

    <Амплифицирани-Удостоверител> 

    Запазете и рестартирайте приложението:

    $ npm старт

    Отидете на връзката Auth и трябва да покажете компонента auth:

    Auth компонент

    Сега създайте акаунт и следвайте процеса на удостоверяване. Вече успешно сте активирали ъгловото приложение да има удостоверяване чрез AWS cogito и AWS Amplify SDK

    ... Очаквайте още няколко фантазии