AWS Amplify i Angular: com funciona?

Configura, inicialitza i utilitza AWS Amplify, la nova cadena d’eines basada en CLI i el SDK Javascript AWS per gestionar i utilitzar els serveis AWS.

En aquesta publicació crearem una aplicació Angular bàsica i li permetrem autentificar-la a AWS Cognito mitjançant AWS Amplify per crear els recursos AWS i configurar-los en el SDK front-end Amplify.

AWS Amplify funciona actualment amb la categoria següent de serveis AWS:

Nota: l'AWS Amplify s'ha modificat de manera que simplement podeu importar el mòdul requerit (però, amb angles> 6 hi havia problemes. Per tant, he hagut d'utilitzar els paquets sense el precedent "@". Ho he descrit més endavant en aquest article) els noms dels mòduls i els paquets npm al costat de les diferents categories que s'enumeren a continuació.

  1. Paquet Core - npm (@ aws-amplify / core): necessiteu aquest paquet principal per configurar l'amplify per utilitzar les funcions següents.
  2. Analytics - paquet npm (@ aws-amplify / analytics)
  3. API - paquet npm (@ aws-amplify / api)
  4. Autenticació (AWS Cognito) - paquet npm (@ aws-amplify / auth): aquesta publicació tracta d'això a la vostra aplicació Angular
  5. Interaccions
  6. PubSub: paquet npm (@ aws-amplify / pubsub)
  7. Comunicacions
  8. Emmagatzematge: paquet npm (@ aws-amplify / storage)
  9. XR

Aquest article explica el procés de creació i utilització de aws amplificats per habilitar l'autenticació basada en Cognito AWS en una aplicació angular.

Prerequisit: configurar la configuració d'amplificar i iniciar una nova aplicació angular:

Alguns passos preparatoris abans de començar:

  1. Assegureu-vos que teniu un compte AWS i que coneixeu els conceptes bàsics d'AWS i Angular, així com els seus ecosistemes i la seva terminologia.
  2. Assegureu-vos que heu configurat AWS CLI al vostre sistema amb la configuració del perfil AWS per al compte AWS que fareu servir per a aquest procediment.

Instal·leu el cliplificador amplificador AWS i creeu una nova aplicació angular:

  1. Instal·leu @ aws-amplify / cli
$ npm install -g @ aws-amplify / cli

2. Verifiqueu que s’ha instal·lat AWS Amplify CLI

$ reforçar

3. Instal·leu i assegureu-vos que teniu instal·lada l’última versió de l’angular CLI

$ npm install --save @ version angular / cli $ ng

4. Crear una nova aplicació d’angle. (Jo anomeno la meva aplicació angular "Angular Gain". Només cal seleccionar-ne la mateixa.)

$ ng nou angle-amplificar

5. Canvieu el directori d’aplicacions de nova creació, instal·leu-lo i executeu el paquet per assegurar-vos que l’aplicació d’inici funciona

Instal·leu $ cd Angular-Amplify $ npm $ npm inici

6. Instal·leu paquets addicionals de npm per a la vostra aplicació de front / angle relacionada amb AWS Amplify

  • aws-amplify - El paquet npm següent és obligatori, en cas contrari es produeix un missatge d'error
  • aws-amplify-angular - amplifica els components angulars
  • @ aws-amplify / ui - interfície d'usuari: no apareix a la documentació Amplificar i s'ha d'instal·lar per a la interfície d'usuari per afegir l'estil CSS als temes AWS. Només instal·lar aquest paquet no funcionarà. També cal que importeu el següent tema i fitxer CSS al fitxer styles.scss inclinat del projecte, que es descriu més endavant en aquesta publicació.
  • @import "[email protected]/ui/src/Theme.css";
  • @import "[email protected]/ui/src/Angular.css";
$ npm install --save aws-amplify $ npm install --save aws-amplify-angular $ npm install --save @ aws-amplify / ui

Inicialitzar Amplificar els fitxers i carpetes de configuració relacionats:

Executeu en l'arrel d'aquest projecte, d. H. / Angulr-amplify, el següent comandament

$ amplifica init

i aleshores, seleccioneu les opcions següents una per una quan se us demani:

La meva selecció es mostra a continuació.

| => reforçar init Nota: Es recomana executar aquesta ordre al directori arrel de l'aplicació? Trieu l'editor predeterminat: Visual Studio Code? Seleccioneu el tipus d'aplicació per a la qual creeu Javascript. Informeu-vos del vostre projecte? Quin framework javascript utilitza? Ruta del directori font: src? Camí del directori de distribució: dist? Comandament de creació: npm build? Comanda d'inici: npm start Utilitzeu el proveïdor estàndard awscloudformation
Podeu trobar més informació sobre els perfils AWS a: https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Voleu utilitzar un perfil AWS? Sí Seleccioneu de manera predeterminada el perfil que voleu utilitzar ⠴ Inicialització del projecte al núvol ...

Això ha de crear el conjunt següent de fitxers i directoris de configuració per a l’extensió:

| _amplificar / | _ # current-cloud-backend / | _ amplificar-meta.json | _ .config | _ aws-info.json | _ project-config.json | _ Backend / | _amplify-meta.json | _.amplifyrc

En aquest enllaç es troben els detalls dels fitxers / directoris anteriors i el seu ús previst. AWS augmenta l’ús de Javascript.

Per entendre la terminologia, haureu de tenir una comprensió bàsica de l'AWS i la terminologia i serveis relacionats.

A l'aplicació angular que vam crear, només s'utilitza inicialment AWS Auth o AWS Cognito Service. Per tant, creem la plantilla de pila de formació de núvol per a AWS Cognito.

$ amplify add auth

Això hauria de crear un directori "auth / cognitoxxxxxxxx" al directori amplificar / backend del mestre de projecte. Aquest directori ha de contenir un script recent generat per a la formació de núvols de cognit i un fitxer JSON de paràmetres.

Ara estem creant els recursos reals AWS mitjançant els scripts locals de formació del núvol generats pel cli amplificar. Utilitzeu la següent comanda per crear els recursos.

$ reforç empenta
| Categoria | Nom del recurs | Funcionament | Complement del proveïdor | | -------- | --------------- | --------- | | ----------------- | | | Auth | cognitoa67f309a | Crea | awscloudformation | ? Estàs segur que vols continuar? (I / N)

Introduïu "Y" més amunt. Al cap d'uns minuts, es crea el recurs AWS i es crea un fitxer de configuració "aws_exports.js" a la carpeta / src creat.

Utilitzarem aquest fitxer de configuració generat amb informació sobre els recursos AWS de nova creació per configurar el SDK front-end Amplify AWS a la nostra aplicació Angular.

Canvia a l'aplicació Angular ara:

Ara creeu una còpia del fitxer "aws-export.js" al directori "src" que heu creat des de dalt.

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

Creeu un component anomenat "auth" amb el següent angle CLI

$ ng gc auth CREAR src / app / auth / auth.component.scss (0 bytes) CREAR src / app / auth / auth.component.html (23 bytes) CREAR src / app / auth / auth.component.spec.ts (614 bytes) CREAR src / app / auth / auth.component.ts (262 bytes) ACTUALITZACIÓ src / app / app.module.ts (467 bytes)

De la mateixa manera, creeu una component "llar" i una "segura"

Utilitzeu la següent comanda per crear components de casa.

$ ng gc home CREAR src / app / home / home.component.scss (0 bytes) CREAR src / app / home / home.component.html (23 bytes) CREAR src / app / home / home.component.spec. ts (614 bytes) CREAR src / app / home / home.component.ts (262 bytes) ACTUALITZACIÓ src / app / app.module.ts (541 bytes)

Utilitzeu la següent comanda per crear components "segurs".

$ ng gc save CREATE src / app / safe / safe.component.scss (0 bytes) CREATE src / app / safe / safe.component.html (25 bytes) CREATE src / app / safe / safe.component.spec.ts (628 bytes) CREAR src / app / safe / safe.component.ts (270 bytes) ACTUALITZACIÓ src / app / app.module.ts (623 bytes)

En aquest moment hem creat els nostres fitxers de configuració AWS Amplify. Tenim una configuració bàsica d’aplicacions d’angle amb els components: “auth”, “home” i “safe”.

La nostra configuració d'URL d'aplicació per a la nostra senzilla aplicació de demostració quadrada. No hi ha res especial aquí.

/ - Carrega el component / pàgina "Home" (estàndard / pàgina arrel)

/ auth: carrega el component / pàgina d'autor

/ safe - Quan inicieu la sessió, el component / pàgina segura es carrega o es redirigeix ​​a / auth. Després del registre correcte, es crida un component / pàgina

Comproveu si l’aplicació de l’angle funciona:

$ npm inici

Configura l’aplicació angular per utilitzar SDK Amplify AWS:

Assegureu-vos que el vostre fitxer "aws-export.ts" sembla així, en funció del fitxer 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_us 'us-east-1_XXXXXXXXX', 'aws_user_pools_web_client_id': 'XXXXXXXXXXXXXXXXXXXXXXXXXXX'};

Modifiqueu main.ts per afegir el codi següent per configurar Amplify per a la vostra aplicació:

importar Amplificar de 'aws-amplify'; importa * com awsamplify des de "./aws-exports"; Amplify.configure (awsamplify.awsmobile);

Ara torna a executar la sol·licitud:

$ npm inici

Hi pot haver alguns problemes d’amortització i d’emmagatzematge, per exemple.

ERROR a node_modules / aws-sdk / clients / acm.d.ts (133,37): Error TS2580: No s'ha trobat el nom "buffer". Necessiteu instal·lar definicions de tipus de node? Proveu `npm i @ types / node`. ....

Si rebeu el missatge d’error anterior, consulteu l’enllaç següent:

Com resoldre el problema anterior segons el document anterior:

"Per solucionar aquests problemes, afegiu" tipus ": [" node "] al fitxer tsconfig.app.json del projecte, o bé elimineu completament el camp" tipus "."

Per canviar tsconfig.app.json des de baix:

{"Extended": "../tsconfig.json", "compiladorOptions": {"outDir": "../out-tsc/app", "types": []}, "exclude": ["prova. ts ", ** / *. spec.ts]}

a:

{"Extended": "../tsconfig.json", "compiladorOptions": {"outDir": "../out-tsc/app", // "types": ["node"]}, "excloure" : ["test.ts", ** / *. spec.ts]}

Ara executeu la següent comanda per reiniciar l’aplicació d’angle i aneu a http: // localhost: 4200 / per assegurar-vos que l’aplicació d’angle d’inici funciona correctament.

$ npm inici

Si la pàgina principal de l'aplicació està en blanc o veieu l'error següent quan feu clic amb el botó dret i comproveu la consola:

Undetected ReferenceError: global no es defineix a Object ../ node_modules / buffer / index.js (index.js: 43) a __webpack_require__ (Bootstrap: 78) a Object ../ node_modules / aws-sdk / lib / browserHashUtils.js (browserHashUtils.js: 1) a __webpack_require__ (Bootstrap: 78) a Object ../ node_modules / aws-sdk / lib / browserHmac.js (browserHmac.js: 1) a __webpack_require__ (Bootstrap: 78) a Object ../ node_modules / aws-sdk / lib / browserCryptoLib.js (browserCryptoLib.js: 1) a __webpack_require__ (Bootstrap: 78) a Object ../ node_modules / aws-sdk / lib / browser_loader.js (browser_loader.js: 4) a __irebpack Cinturó: 78)

Afegiu-ho abans index.html Afegiu el codi següent per resoldre el problema anterior