AWS erősítés és szög - Hogyan?

Az AWS Amplify, az új CLI alapú szerszámlánc és az AWS Javascript SDK konfigurálása, inicializálása és használata az AWS szolgáltatások kezelésére és használatára.

Ebben a bejegyzésben létrehozunk egy alapvető szögletes alkalmazást, amely lehetővé teszi az AWS Cognito hitelesítését az AWS Amplify használatával az AWS erőforrások létrehozásához és az Amplify előlapi SDK-ban történő konfigurálásához.

Jelenleg az AWS Amplify az AWS szolgáltatások következő kategóriájával működik:

Megjegyzés: Az AWS Amplify modulizálva van, így csak importálhatja a szükséges modult (de a> 6 szög esetén problémák merültek fel, tehát a csomagokat úgy kellett használni, hogy az előttük nem volt a „@”, ezt már leírtam) később ebben a bejegyzésben)) a modul neve és az npm csomagok vannak felsorolva az alábbi kategóriák mellett.

  1. Core - npm csomag (@ aws-amplify / core): Ehhez a magcsomaghoz szükséges az Amplify konfigurálása az alábbiak bármelyikének használatához.
  2. Analytics - npm csomag (@ aws-amplify / analytics)
  3. API - npm csomag (@ aws-amplify / api)
  4. Hitelesítés (AWS Cognito) - npm csomag (@ aws-amplify / auth): Ez a bejegyzés arról szól, hogy ezt használja a szögletes alkalmazásában
  5. interakciók
  6. PubSub - npm csomag (@ aws-amplify / pubsub)
  7. Értesítések
  8. Tárolás - npm csomag (@ aws-amplified / storage)
  9. XR

Ebben a bejegyzésben az aws létrehozásának és használatának folyamata tovább erősödik, hogy lehetővé tegyük az AWS Cognito alapú hitelesítést egy szögletes alkalmazásban.

Előfeltétel - A konfiguráció megerősítésének beállítása és új szögletes alkalmazás indítása:

Néhány előzetes lépés a következő megkezdése előtt Hogyan:

  1. Győződjön meg arról, hogy rendelkezik egy AWS-fiókkal, és ismeri az AWS és a Angular alapjait, valamint azok ökoszisztémáit és terminológiáját.
  2. Győződjön meg arról, hogy az AWS CLI konfigurálva van-e a rendszerén az AWS-profil beállításával az AWS-fiókhoz, amelyet a következő módon fog használni.

Telepítse az AWS amplified cli-t, és hozzon létre egy új szögletes alkalmazást:

  1. Telepítse a @ aws-amplify / cli fájlt
$ npm telepítés -g @ aws-amplify / cli

2. Ellenőrizze, hogy az AWS amplifying cli telepítve van-e

$ erősíteni

3. Telepítse és ellenőrizze, hogy a legújabb Angular CLI-t telepítette-e

$ npm telepítés --save @ angular / cli
$ ng verzió

4. Hozzon létre egy új szögletes alkalmazást (a szög alkalmazásomat „szög-erősítõ” -nek nevezem, hogy ezt követhessem, csak ugyanazt választom)

Új szög-erősítés

5. Nyissa meg az újonnan létrehozott szögletes alkalmazáskönyvtárat, telepítse a csomagot, és futtassa azt, hogy ellenőrizze az indító alkalmazás működését

$ cd szög-erősít
$ npm telepítés
$ npm indulás

6. Telepítsen további npm csomagokat az AWS Amplify-hoz kapcsolódó szög / előlap alkalmazáshoz

  • aws-amplify - Az alábbi npm csomagnak szüksége van rá, különben hibát fog kapni
  • aws-amplify-szög - erősítse meg a szögkomponenseket
  • @ aws-amplify / ui - UI - nem szerepel az Amplify dokumentációban, és telepítenie kell azt a felhasználói felülethez, hogy hozzá tudjon adni az AWS témájú css stílust. Csak a csomag telepítése nem fog működni. A következő témát és a css fájlt importálni kell egy szögletes projekt stíluss.scss fájljában is, amelyet később részletezünk ebben a bejegyzésben.
  • @import „[email protected]/ui/src/Theme.css”;
  • @import „[email protected]/ui/src/Angular.css”;
$ npm telepítés - aws-amplitudát mentjük
$ npm telepítés - az aws-amplified-szög mentése
$ npm telepítés --save @ aws-amplify / ui

Inicializálás A kapcsolódó konfigurációs fájlok / mappák erősítése:

A projekt gyökérkönyvtárában, az i.e / angulr-amplify, futtassa a következő parancsot

$ amplify init

majd válassza a következő lehetőségeket, egyenként, amikor a rendszer kéri:

Az alábbiakban felsorolom a választásomat.

| => amplifikálni init
Megjegyzés: Javasoljuk, hogy ezt a parancsot az alkalmazáskönyvtár gyökeréből futtassa
? Válassza ki az alapértelmezett szerkesztőt: Visual Studio Code
? Válassza ki a javascript-t építő alkalmazás típusát
Kérjük, mondja el nekünk a projektjét
? Milyen javascript keretet használ szögletes
? Forrás könyvtár elérési útja: src
? Terjesztési könyvtár elérési útja: dist
? Build parancs: npm build
? Start parancs: npm indítás
Alapértelmezett szolgáltató awscloudformation használata
Az AWS-profilokkal kapcsolatos további információkért lásd:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? AWS profilt szeretne használni? Igen
? Válassza ki azt az profilt, amelyet alapértelmezés szerint használni szeretne
Project A projekt inicializálása a felhőben ...

Ezzel létre kell hozni a konfigurációs fájl és könyvtárak következő halmazát:


    | _Amplify /
    | _ # current-cloud-backend /
        | _ amplify-meta.json
    | _ .config
        | _ aws-info.json
        | _ project-config.json
    | _ háttér /
        | _Amplify-meta.json
    | _.amplifyrc

A fenti fájlok / könyvtárak részletei, valamint azok, amelyekhez használják, elegendő információt tartalmaznak ezen a linken belül. Az AWS erősíti a Javascript használatát.

A terminológia megértéséhez alapvető ismeretekkel kell rendelkeznie az AWS-ről, a kapcsolódó terminológiákról és a szolgáltatáskínálatról.

A szögletes alkalmazás, amelyet most készítünk, csak az AWS Auth vagy AWS Cognito szolgáltatást fogja használni, tehát készítsük el az AWS Cognito felhőképződés-verem-sablonját.

$ amplify add auth

Ennek létre kell hoznia egy „auth / cognitoxxxxxxxx” könyvtárat a projekt gyökérjének amplifikációs / háttérkönyvtárában. Ennek a könyvtárnak újonnan létrehozott, kognito felhőképző szkripttel és JSON-fájllal kell rendelkeznie.

Hozzuk létre a tényleges AWS-erőforrásokat az amplifikációs klip által generált helyi felhőképző szkriptek felhasználásával. Az erőforrások létrehozásához használja a következő parancsot.

$ erősíti push
| Kategória | Forrás neve | Művelet | Szolgáltató plugin |
| -------- | --------------- | --------- | ----------------- |
| Auth | cognitoa67f309a | Létrehozás | awscloudformation |
? Biztos, hogy akarod folytatni? (Y / n)

Írja be a fenti „Y” értéket. Néhány perc múlva létrehozza az AWS erőforrást, és létrehoz egy „aws_exports.js” konfigurációs fájlt az / src mappában.

Ezt a létrehozott konfigurációs fájlt az újonnan létrehozott AWS-erőforrásokkal kapcsolatos információkkal fogjuk felhasználni az AWS Amplify előlapi SDK konfigurálásához a szögletes alkalmazásunkban.

A szögletes alkalmazásra lépés most:

Most készítsen egy másolatot az “aws-export.js” -ről, a fent létrehozott “src” könyvtár alatt.

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

Hozzon létre egy „auth” nevű összetevőt a következő szög CLI használatával

$ hg hitelesítés
CREATE src / app / auth / auth.component.scss (0 byte)
CREATE src / app / auth / auth.component.html (23 byte)
CREATE src / app / auth / auth.component.spec.ts (614 byte)
CREATE src / app / auth / auth.component.ts (262 byte)
UPDATE src / app / app.module.ts (467 byte)

Hasonlóképpen hozzon létre egy „otthoni” és „biztonságos” összetevőket

Használja az alábbi parancsot a „home” komponens létrehozásához.

c otthon
CREATE src / app / home / home.component.scss (0 byte)
CREATE src / app / home / home.component.html (23 byte)
CREATE src / app / home / home.component.spec.ts (614 byte)
CREATE src / app / home / home.component.ts (262 byte)
UPDATE src / app / app.module.ts (541 byte)

Használja az alábbi parancsot a „biztonságos” alkotóelemek létrehozásához.

biztonságban van
CREATE src / app / secure / secure.component.scss (0 byte)
CREATE src / app / secure / secure.component.html (25 byte)
CREATE src / app / secure / secure.component.spec.ts (628 byte)
CREATE src / app / secure / secure.component.ts (270 byte)
UPDATE src / app / app.module.ts (623 byte)

Ezen a ponton elkészítettük az AWS Amplify konfigurációs fájljainkat, alapszögletes alkalmazás-beállítást végeztünk az összetevőkkel: „auth”, „home” és „biztonságos”

Az App URL beállítása az egyszerű szögletes demo alkalmazáshoz. Semmi fantasztikus itt.

/ - betölti a “home” összetevőt / oldalt (alapértelmezett / gyökér oldal)

/ auth - betölti az auth összetevőt / oldalt

/ biztonságos - ha be van jelentkezve, betölti a biztonságos összetevőt / oldalt, vagy átirányítja a / auth oldalra, és a sikeres regisztráció után elveszi ezt a komponenst / oldalt

Ellenőrizze, hogy a szög alkalmazás működik-e:

$ npm indulás

Szögletes alkalmazás beállítása az AWS használatához Amplify SDK:

Győződjön meg arról, hogy az “aws-export.ts” fájl az alábbiakhoz hasonló, az aws-export.js fájl alapján:

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

A main.ts módosításakor adja hozzá a következő kódot az alkalmazás Erősítésének konfigurálásához:

import Amplify from 'aws-amplify';
import * mint awsamplify a './aws-exports' fájlból;
Amplify.configure (awsamplify.awsmobile);

Most futtassa újra az alkalmazást:

$ npm indulás

Kaphat néhány puffer- és adatfolyam-problémát, például az alábbiak szerint:

HIBA a node_modules / aws-sdk / kliensek / acm.d.ts fájlban (133,37): TS2580 hiba: Nem található a „puffer” név. Telepítenie kell a csomópont típusdefinícióit? Próbálja ki az "npm i @ type / node" -t.
....

Ha a fenti hibát kapja, kérjük, nézze meg a következő linket:

A fenti probléma megoldása a fenti dokumentum szerint:

“Ezeknek a problémáknak a megoldásához vagy adjon hozzá" típusokat ": [" csomópont]] a projekt tsconfig.app.json fájljához, vagy távolítsa el a "típusok" mezőt teljes egészében. "

tehát alulról módosítsa a tsconfig.app.json fájlt:

{
"kiterjeszti": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"típusok": []
},
"kizár": [
„Test.ts”
"** / *. Spec.ts"
]
}

nak nek:

{
"kiterjeszti": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
// "típusok": ["csomópont"]
},
"kizár": [
„Test.ts”
"** / *. Spec.ts"
]
}

Most hajtsa végre az alábbi parancsot a Szögletes alkalmazás újraindításához, és lépjen a „http: // localhost: 4200 /” oldalra, hogy megbizonyosodjon arról, hogy az indító szögletes alkalmazása megfelelően működik-e.

$ npm indulás

Ha az alkalmazás fő oldala üres, vagy ha a jobb egérgombbal kattintva és a konzol ellenőrzésekor a következő hibát látja:

Nem észlelt ReferenceError: a globális nincs meghatározva
    at Object ../ node_modules / buffer / index.js (index.js: 43)
    at __webpack_require__ (bootstrap: 78)
    itt: Object ../ node_modules / aws-sdk / lib / browserHashUtils.js (browserHashUtils.js: 1)
    at __webpack_require__ (bootstrap: 78)
    itt: Object ../ node_modules / aws-sdk / lib / browserHmac.js (browserHmac.js: 1)
    at __webpack_require__ (bootstrap: 78)
    itt: Object ../ node_modules / aws-sdk / lib / browserCryptoLib.js (browserCryptoLib.js: 1)
    at __webpack_require__ (bootstrap: 78)
    itt: Object ../ node_modules / aws-sdk / lib / browser_loader.js (browser_loader.js: 4)
    at __webpack_require__ (bootstrap: 78)

A fenti probléma kiküszöböléséhez adja hozzá a következő kódot az index.html fájlhoz a címke előtt