Hjem
/
Artikler
/
AWS forstærke og vinklet - Sådan gør du
KantetAws AmplifyAws CognitoFront End DevelopmentJavascript
Opslået på 12-11-2019

AWS forstærke og vinklet - Hvordan gør man det?

Sådan konfigureres, initialiseres og bruges AWS Amplify, den nye CLI-baserede værktøjskæde og Javascript SDK fra AWS til at styre og bruge AWS Services.

I dette indlæg opretter vi en grundlæggende vinkel applikation og aktiverer den til at autentificere med AWS Cognito ved hjælp af AWS Amplify til at oprette AWS ressourcer og konfigurere den i Amplify frontend SDK.

I øjeblikket fungerer AWS Amplify med følgende kategori af AWS-tjenester:

Bemærk: AWS Amplify er blevet modulariseret, så du kan bare importere det modul, du har brug for (men for vinkel> 6 var der problemer, så jeg var nødt til at bruge pakkerne uden “@” foran det, jeg har beskrevet det senere i dette indlæg)) er navnet på modul og npm-pakker anført langs de forskellige kategorier nedenfor.

  1. Core - npm-pakke (@ aws-amplify / core): Du har brug for denne kernepakke til at konfigurere Amplify til at bruge en af ​​nedenstående.
  2. Analytics - npm-pakke (@ aws-amplify / analytics)
  3. API - npm-pakke (@ aws-amplify / api)
  4. Autentificering (AWS Cognito) - npm-pakke (@ aws-amplify / authentic): Dette indlæg handler om at bruge dette i din vinklede applikation
  5. Interaktioner
  6. PubSub - npm-pakke (@ aws-amplify / pubsub)
  7. Tryk på meddelelser
  8. Opbevaring - npm-pakke (@ aws-amplify / storage)
  9. XR

I dette indlæg vil vi gå igennem processen med at oprette og bruge aws amplify for at aktivere AWS Cognito-baseret godkendelse i en vinkel applikation.

Forudsætning - Opsætning af forstærket konfiguration og start af en ny vinkel applikation:

Nogle foreløbige trin, før du begynder på denne måde:

  1. Sørg for, at du har en AWS-konto og er fortrolig med det grundlæggende i AWS og Angular og deres økosystemer og terminologier.
  2. Sørg for, at du har AWS CLI konfigureret på dit system med AWS-profilopsætning for den AWS-konto, som du bruger til denne Sådan gør du.

Installer AWS-amplificere cli og Opret en ny kantet applikation:

  1. Installer @ aws-amplify / cli
$ npm installere -g @ aws-amplify / cli

2. Kontroller, at AWS amplify cli er installeret

$ forstærke

3. Installer, og sørg for, at du har den nyeste Angular CLI installeret

$ npm installation - gem @ vinkel / cli
$ ng version

4. Opret en ny vinkelapplikation (jeg benævner min vinkelprogram “vinkelforstærket” for at følge igennem bare vælge det samme)

$ ng ny kantforstærket

5. Gå til dit nyoprettede kantede applikationsmappe, og installer pakken og kør den for at sikre, at startprogrammet fungerer

$ cd kantforstærket
$ npm installation
Start af $ npm

6. Installer yderligere npm-pakker til din vinkel / frontend-applikation relateret til AWS Amplify

  • aws-amplify - Den nedenstående npm-pakke har brug for den, ellers får du en fejl
  • aws-amplify-vinkel - Forstærk vinkelkomponenter
  • @ aws-amplify / ui - UI - ikke angivet i Amplify-dokumentationen, og man skal installere det for UI'en for at tilføje AWS-tema css-stil. Bare installation af denne pakke fungerer ikke. Man skal også importere følgende tema og css-fil i vinkelprojektets styles.scss-fil, som er beskrevet senere i dette indlæg.
  • @import “[email protected]/ui/src/Theme.css”;
  • @import “[email protected]/ui/src/Angular.css”;
$ npm installation - gem aws-amplify
$ npm installation - gem aws-amplify-vinkel
$ npm installation - gem @ aws-amplify / ui

Initialiser Amplify relaterede konfigurationsfiler / mapper:

I rodkataloget til dette projekt, dvs..e / angulr-amplify, skal du køre følgende kommando

$ forstærke init

og vælg derefter følgende indstillinger, én efter én, når du bliver bedt om det:

Nedenfor vises mit valg.

| => forstærke init
Bemærk: Det anbefales at køre denne kommando fra roden til din app-bibliotek
? Vælg din standardeditor: Visual Studio-kode
? Vælg den apptype, du bygger javascript
Fortæl os om dit projekt
? Hvilke javascript-rammer bruger du kantet
? Kildevejssti: src
? Distribution Directory Sti: dist
? Build Command: npm build
? Start kommando: start pr
Brug af standardudbyder awscloudformation
For mere information om AWS-profiler, se:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Vil du bruge en AWS-profil? Ja
? Vælg den profil, du vil bruge standard
⠴ Initierer projekt i skyen ...

Dette skal skabe følgende sæt forstærk konfigurationsfil og mapper:


    | _Amplify /
    | _ # aktuelle-sky-backend /
        | _ amplify-meta.json
    | _ .config
        | _ aws-info.json
        | _ project-config.json
    | _ backend /
        | _Amplify-meta.json
    | _.amplifyrc

Detaljerne om de ovennævnte filer / bibliotek sammen med hvad de bruges til er tilstrækkeligt angivet inden for dette link AWS forstærker Javascript-brug.

For at forstå terminologien skal du have en grundlæggende forståelse af AWS og tilhørende terminologier og servicetilbud.

Den vinklede applikation, vi opretter, bruger bare AWS Auth eller AWS Cognito Service i øjeblikket, så lad os oprette skyformationsstabelskabelonen til AWS Cognito.

$ forstærke tilføj autorisation

Dette skal oprette et bibliotek "autorisation / cognitoxxxxxxxx" inden forstærker / backend-kataloget til dit projektrot. Dette bibliotek skal have et nyligt genereret, cognito cloud-formationsscript og en parameter JSON-fil.

Lad os nu oprette de faktiske AWS-ressourcer ved hjælp af de lokale cloud-formationskripts, der er genereret af amplify cli. Brug følgende kommando til at oprette ressourcerne.

$ forstærke push
| Kategori | Ressource navn | Betjening | Udbyder plugin |
| -------- | --------------- | --------- | ----------------- |
| Autent | cognitoa67f309a | Opret | awscloudformation |
? Er du sikker på, at du vil fortsætte? (Y / n)

Indtast “Y” ovenfor. Efter et par minutter opretter den AWS-ressource og genererer en konfigurationsfil “aws_exports.js” i mappen / src.

Vi vil bruge denne genererede konfigurationsfil med oplysninger om vores nyligt oprettede AWS-ressourcer til at konfigurere AWS Amplify frontend SDK næste i vores vinkel applikation.

Gå videre til vinkel applikation nu:

Lav nu en kopi af "aws-exports.js" under "src" -mappen oprettet ovenfra.

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

Opret en komponent med navnet "autorisation" ved hjælp af følgende kantede CLI

$ ng g c autorisation
Opret src / app / auth / auth.component.scss (0 bytes)
Opret src / app / auth / auth.component.html (23 bytes)
Opret src / app / auth / auth.component.spec.ts (614 bytes)
Opret src / app / auth / auth.component.ts (262 bytes)
UPDATE src / app / app.module.ts (467 bytes)

Tilsvarende Opret en "hjemme" og "sikker" komponent

Brug kommandoen nedenfor til oprettelse af "hjemme" -komponent.

$ ng g c hjem
Opret src / app / home / home.component.scss (0 bytes)
Opret src / app / home / home.component.html (23 bytes)
Opret src / app / home / home.component.spec.ts (614 bytes)
Opret src / app / home / home.component.ts (262 bytes)
UPDATE src / app / app.module.ts (541 bytes)

Brug kommandoen nedenfor til "sikker" komponentoprettelse.

$ ng g c sikker
Opret src / app / sikker / sikker.component.scss (0 bytes)
Opret src / app / secure / secure.component.html (25 bytes)
Opret src / app / sikker / sikker.component.spec.ts (628 bytes)
Opret src / app / secure / secure.component.ts (270 bytes)
UPDATE src / app / app.module.ts (623 bytes)

På dette tidspunkt har vi oprettet vores AWS Amplify-konfigurationsfiler, vi har en grundlæggende kantet applikationsopsætning med komponenterne: “authent”, “home” og “sikker”

Vores app-URL-opsætning til vores enkle kantede demo-applikation. Intet fan her.

/ - indlæser “hjem” -komponent / side (standard / rodside)

/ autor - indlæser autorisationskomponenten / siden

/ sikker - hvis du er logget ind, indlæser den sikre komponent / side eller omdirigerer til / autorisation og efter en vellykket tilmelding, tag en til denne komponent / side

Kontroller, at vinkelapplikationen fungerer:

Start af $ npm

Konfiguration af vinkel applikation til at bruge AWS Amplify SDK:

Sørg for, at din "aws-exports.ts" -fil er noget lignende nedenfor, baseret på din aws-exports.js-fil:

eksport 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'
};

Skift main.ts for at tilføje følgende kode for at konfigurere Amplify til din applikation:

import Forstærke fra 'aws-amplify';
import * som awsamplify fra './aws-exports';
Amplify.configure (awsamplify.awsmobile);

Kør nu din ansøgning igen:

Start af $ npm

Du kan få nogle buffere og strømme problemer som nedenfor:

FEJL i node_moduler / aws-sdk / clients / acm.d.ts (133,37): fejl TS2580: Kan ikke finde navnet 'Buffer'. Har du brug for at installere typedefinitioner til node? Prøv "npm i @ types / node".
....

Hvis du får ovenstående fejl, skal du se på følgende link:

Sådan løses ovenstående problem i henhold til ovenstående dokument:

"For at løse disse problemer skal du enten tilføje" typer ": [" node "] til projektets tsconfig.app.json-fil, eller fjerne feltet" typer "helt."

så ændre tsconfig.app.json nedenunder:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"typer": []
},
"ekskluder": [
"test.ts",
"** / *. spec.ts"
]
}

til:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
// "typer": ["node"]
},
"ekskluder": [
"test.ts",
"** / *. spec.ts"
]
}

Udfør nu kommandoen nedenfor for at genstarte Angular-applikationen og gå til “http: // localhost: 4200 /”, for at sikre, at din startvinkelprogram fungerer fint.

Start af $ npm

Hvis din applikations hovedside kommer tom, eller hvis du ser følgende fejl, når du højreklikker og kontrollerer konsollen:

Uanmeldt ReferenceError: global er ikke defineret
    på Object ../ node_modules / buffer / index.js (index.js: 43)
    hos __webpack_require__ (bootstrap: 78)
    på Object ../ node_modules / aws-sdk / lib / browserHashUtils.js (browserHashUtils.js: 1)
    hos __webpack_require__ (bootstrap: 78)
    på Object ../ node_modules / aws-sdk / lib / browserHmac.js (browserHmac.js: 1)
    hos __webpack_require__ (bootstrap: 78)
    på Object ../ node_modules / aws-sdk / lib / browserCryptoLib.js (browserCryptoLib.js: 1)
    hos __webpack_require__ (bootstrap: 78)
    på Object ../ node_modules / aws-sdk / lib / browser_loader.js (browser_loader.js: 4)
    hos __webpack_require__ (bootstrap: 78)

For at løse ovenstående problem skal du tilføje følgende kode til dit indeks.html inden -mærket