AWS võimendab ja nurga all - kuidas?

Kuidas seadistada, lähtestada ja kasutada AWS-i võimendust, uut CLI-põhist tööriistaketti ja AWS-i Javascripti SDK-d AWS-teenuste haldamiseks ja kasutamiseks.

Selles postituses loome põhilise nurgarakenduse ja võimaldame sellel autentimist AWS Cognito abil, kasutades AWS Amplify abil AWS ressursse ja konfigureerides seda Amplify esipaneeli SDK-s.

Praegu töötab AWS Amplify järgmise kategooria AWS-teenustega:

Märkus. AWS Amplify on modulaarselt kohandatud, nii et saate lihtsalt vajaliku mooduli importida (kuid nurga all> 6 esines probleeme, nii et pidin kasutama pakette ilma “@” ees, olen kirjeldanud, et hiljem selles postituses)) mooduli nimi ja npm paketid on loetletud erinevate kategooriate kõrval.

  1. Core - npm pakett (@ aws-amplify / core): vajate seda tuumpaketti Amplify konfigureerimiseks, et kasutada mõnda allpool toodud varianti.
  2. Analytics - npm pakett (@ aws-amplify / analytics)
  3. API - npm pakett (@ aws-amplify / api)
  4. Autentimine (AWS Cognito) - npm pakett (@ aws-amplify / auth): see postitus on mõeldud selle kasutamiseks teie nurgarakenduses
  5. Koostoimed
  6. PubSub - npm pakett (@ aws-amplify / pubsub)
  7. Tõuketeated
  8. Salvestusruum - npm pakett (@ aws-amplify / storage)
  9. XR

Selles postituses käsitleme küll awside loomise ja kasutamise protsessi, et võimaldada AWS Cognito-põhine autentimine nurgarakenduses.

Eeltingimus - konfiguratsiooni võimenduse seadistamine ja uue nurgarakenduse käivitamine:

Mõned juhised enne selle alustamist Kuidas:

  1. Veenduge, et teil on AWS-i konto ja olete tuttavad AWS-i ja Nurga põhialustega ning nende ökosüsteemide ja terminoloogiaga.
  2. Veenduge, et teie AWS-i CLI on teie süsteemis konfigureeritud AWS-i profiili seadistusega AWS-konto jaoks, mida kasutate selle juhise jaoks.

Installige AWS võimendusklient ja looge uus nurgeline rakendus:

  1. Installige @ aws-amplify / cli
$ npm installige -g @ aws-amplify / cli

2. Kontrollige, kas AWS amplify cli on installitud

$ võimendada

3. Installige ja veenduge, et teil oleks installitud uusim nurga CLI

installige $ npm - salvestage @ nurgeline / cli
$ ng versioon

4. Looge uus nurkrakendus (ma nimetan oma nurgarakendust “nurgavõimenduseks”, et seda lihtsalt läbi vaadata)

$ ng uus nurkvõimendus

5. Minge oma vastloodud nurgarakenduste kataloogi ja installige pakett ning käivitage see, et veenduda käivitusrakenduse töös

$ cd nurkvõimendab
Installige npm dollarit
npm dollari algus

6. Installige oma AWS Amplifyga seotud nurga- / esiliisturakenduste jaoks täiendavad npm-i paketid

  • aws-amplify - allpool olev pakett npm vajab seda, muidu saate tõrke
  • aws-amplify-angular - nurgakomponentide võimendamine
  • @ aws-amplify / ui - UI - pole Amplify dokumentatsioonis loetletud ja üks peab selle installima UI jaoks, et lisada AWS-i teemaline css-stiil. Lihtsalt selle paketi installimine ei toimi. Samuti tuleb importida järgmine teema- ja css-fail nurkprojekti stiilis.scss-failis, mida kirjeldatakse hiljem selles postituses.
  • @import “[email protected]/ui/src/Theme.css”;
  • @import “[email protected]/ui/src/Angular.css”;
Installige npm dollarit - säästke aws-võimendage
Installige npm dollarit - salvestage aws-amplify-nurgeline
Installige npm dollarit - salvestage @ aws-amplify / ui

Initsialiseerige seotud konfiguratsioonifailide / kaustade võimendamine:

Selle projekti juurkataloogis, st.e / angulr-amplify, käivitage järgmine käsk

$ võimendab init

ja seejärel valige ükshaaval, kui küsitakse, järgmised valikud:

Allpool on minu valik.

| => võimendada init
Märkus: soovitatav on see käsk käivitada rakenduse kataloogi juurist
? Valige vaiketoimetaja: Visual Studio kood
? Valige selle rakenduse tüüp, mida ehitate javascripti
Palun rääkige meile oma projektist
? Millist javascripti raamistikku te nurgeliselt kasutate?
? Lähtekataloogi tee: src
? Distribution Directory Path: dist
? Ehitamise käsk: npm ehitamine
? Start-käsk: npm algus
Vaikepakkuja awscloudformatsiooni kasutamine
AWS-profiilide kohta lisateabe saamiseks vaadake:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Kas soovite kasutada AWS-i profiili? Jah
? Valige profiil, mida soovite vaikimisi kasutada
⠴ Projekti algatamine pilves ...

See peaks looma järgmise komplekti võimendavat konfiguratsioonifaili ja katalooge:


    | _amplify /
    | _ # current-cloud-backend /
        | _ võimendada-meta.json
    | _ .config
        | _ aws-info.json
        | _ projekt-config.json
    | _ taustaprogramm /
        | _amplify-meta.json
    | _.amplifyrc

Ülaltoodud failide / kataloogi üksikasjad koos nendega, milleks neid kasutatakse, on sellel lingil piisavalt esitatud. AWS võimendab Javascripti kasutamist.

Terminoloogia mõistmiseks peaks teil olema põhiteadmised AWS-ist ja sellega seotud terminoloogiatest ning teenusepakkumistest.

Meie loodud nurkrakendus kasutab praegu ainult AWS Auth või AWS Cognito teenust, loogem siis AWS Cognito jaoks pilve moodustamise korstna mall.

$ amplify add auth

See peaks looma projektijuure võimendamise / taustaprogrammi kataloogi kataloogi „auth / cognitoxxxxxxxx”. Selles kataloogis peaks olema värskelt loodud kognito pilve moodustamise skript ja parameetri JSON-fail.

Nüüd loogem tegelikud AWS-ressursid, kasutades amplifitseeritava klõpsuga loodud kohalikke pilve moodustamise skripte. Ressursside loomiseks kasutage järgmist käsku.

$ võimendavad tõuke
| Kategooria | Allika nimi | Operatsioon | Pakkuja pistikprogramm |
| -------- | --------------- | --------- | ----------------- |
| Autent | cognitoa67f309a | Loo | awscloudformation |
? Kas soovite kindlasti jätkata? (Jah / n)

Sisestage ülal Y-täht. Mõne minuti pärast loob see AWS-i ressursi ja genereerib kaustas / src konfiguratsioonifaili “aws_exports.js”.

Selle genereeritud konfiguratsioonifaili abil saame teavet meie äsjaloodud AWS-i ressursside kohta, et konfigureerida AWS Amplify kasutajaliidese SDK meie nurgarakenduses järgmisena.

Liikuge nurgarakendusele nüüd:

Nüüd tehke ülalt loodud kataloogis "src" koopia kataloogist "aws-export.js".

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

Looge komponent nimega auth, kasutades järgmist nurk-CLI

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

Samamoodi looge „kodu” ja „turvaline” komponent

Kasutage allpool olevat käsku kodukomponendi loomiseks.

$ ng g c koju
CREATE src / app / home / home.component.scss (0 baiti)
CREATE src / app / home / home.component.html (23 baiti)
CREATE src / app / home / home.component.spec.ts (614 baiti)
CREATE src / app / home / home.component.ts (262 baiti)
UPDATE src / app / app.module.ts (541 baiti)

Kasutage allpool olevat käsku komponentide turvaliseks loomiseks.

$ ng g c turvaline
CREATE src / app / secure / secure.component.scss (0 baiti)
CREATE src / app / Secure / Secure.component.html (25 baiti)
CREATE src / app / Secure / Secure.component.spec.ts (628 baiti)
CREATE src / app / Secure / Secure.component.ts (270 baiti)
UPDATE src / app / app.module.ts (623 baiti)

Praegu on meie AWS Amplify konfiguratsioonifailid loodud, meil on põhiline nurkne rakenduse seadistamine koos komponentidega: “auth”, “home” ja “turvaline”

Meie rakenduse URL-i seadistamine meie lihtsa nurgeliste demorakenduste jaoks. Siin pole midagi väljamõeldud.

/ - laadib “kodu” komponendi / lehe (vaikimisi / juurleht)

/ auth - laadib auth-komponendi / lehe

/ turvaline - sisselogituna laadib turvalise komponendi / lehe sisse või suunab ümber aadressile / auth ja pärast edukat registreerumist võtab selle selle komponendi / lehe juurde

Kontrollige, kas nurkrakendus töötab:

npm dollari algus

Nurgarakenduse seadistamine AWS-i kasutamiseks Amplify SDK:

Veenduge, et teie fail „aws-export.ts” on teie faili aws-export.js põhjal järgmine:

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

Muutke main.ts, et lisada järgmine kood rakenduse Amplify konfigureerimiseks:

import Amplify alates 'aws-amplify';
import * kui awsamplify kataloogist './aws-exports';
Amplify.configure (awsamplify.awsmobile);

Nüüd käivitage oma rakendus uuesti:

npm dollari algus

Võite saada mõningaid puhver- ja ojaprobleeme, nagu allpool:

VIGA sõlmes_moodulid / aws-sdk / kliendid / acm.d.ts (133,37): viga TS2580: ei leia nime 'puhver'. Kas peate installima sõlme tüüpide määratlused? Proovige "npm i @ tüüpi / sõlm".
....

Kui saate ülaltoodud tõrke, siis vaadake järgmist linki:

Ülaltoodud probleemi lahendamiseks vastavalt ülaltoodud dokumendile:

“Nende probleemide lahendamiseks lisage projekti tsooni tsconfig.app.json fail" tüübid ": [" sõlm "] või eemaldage väli" tüübid "täielikult."

nii et muutke tsconfig.app.json altpoolt:

{
"laieneb": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"tüübid": []
},
"välistama": [
"test.ts",
"** / *. spects"
]
}

kellele:

{
"laieneb": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
// "tüübid": ["sõlm"]
},
"välistama": [
"test.ts",
"** / *. spects"
]
}

Nüüd käivitage käsk Nurgarakenduse taaskäivitamiseks ja minge jaotisse „http: // localhost: 4200 /”, et veenduda, kas teie käivitusnurgarakendus töötab korralikult.

npm dollari algus

Kui teie rakenduse avaleht ilmub tühjaks või kui näete järgmist viga, kui paremklõpsake ja konsooli kontrollite:

Tabamata ReferenceError: globaalset pole määratletud
    objektil Object ../ node_modules / buffer / index.js (index.js: 43)
    aadressil __webpack_require__ (alglaadimisaste: 78)
    aadressil Objekt ../ node_modules / aws-sdk / lib / browserHashUtils.js (browserHashUtils.js: 1)
    aadressil __webpack_require__ (alglaadimisaste: 78)
    aadressil Objekt ../ node_modules / aws-sdk / lib / browserHmac.js (browserHmac.js: 1)
    aadressil __webpack_require__ (alglaadimisaste: 78)
    aadressil Objekt ../ node_modules / aws-sdk / lib / browserCryptoLib.js (browserCryptoLib.js: 1)
    aadressil __webpack_require__ (alglaadimisaste: 78)
    aadressil Objekt ../ node_modules / aws-sdk / lib / browser_loader.js (brauseri_loader.js: 4)
    aadressil __webpack_require__ (alglaadimisaste: 78)

Ülaltoodud probleemi lahendamiseks lisage oma koodile index.html järgmine kood enne silti


if (globaalne === määratlemata) {
var globaalne = aken;
}

lisateabe saamiseks kontrollige järgmist linki (kerige alla):

Veelkord kontrollige, kas nurkne rakendus töötab:

npm dollari algus

Eemaldage index.html-st käivitusrakendusest kõik vaikeseaded ja looge rakenduse marsruudil ka järgmised marsruudid:

const marsruudid: marsruudid = [
{tee: '', komponent: HomeComponent, pathMatch: 'täielik'},
{tee: 'auth', komponent: AuthComponent, pathMatch: 'full'},
{tee: 'turvaline', komponent: SecureComponent, pathMatch: 'täielik'},
];

Muutke oma index.html nii, et see näeks välja järgmine (pidage asja lihtsaks, me ei ürita siin UI ainulaadsust saavutada):

Tere tulemast saidile {{title}}!

     

lingid lehtedele

     
         

Jällegi veenduge, et rakendus töötab:

npm dollari algus

Kui kõik läks hästi, peaks teie rakendus välja nägema järgmine:

Rakenduse kodu peaks välja nägema nagu ülalpool

Impordi nüüd AmplifyAngularModule ja AmplifyService oma peamisse rakenduse module.ts, mis peaks välja nägema järgmiselt:

impordi {BrowserModule} kaustast @ @ nurk / platvorm-brauser;
importige {NgModule} kaustast '@ nurk / südamik';
importida {AmplifyAngularModule, AmplifyService} kaustast 'aws-amplify-angular';
importige {AppRoutingModule} rakendusest './app-routing.module';
importige {AppComponent} saidist './app.component';
importida {AuthComponent} kataloogist './auth/auth.component';
importige {HomeComponent} saidist './home/home.component';
importida {SecureComponent} saidist './secure/secure.component';
@NgModule ({
deklaratsioonid: [AppComponent, AuthComponent, HomeComponent, SecureComponent],
import: [BrowserModule, AppRoutingModule, AmplifyAngularModule],
pakkujad: [AmplifyService],
alglaadimine: [AppComponent]
})
eksportida klassi AppModule {}

Minge saidile “auth.component.html” ja asendage sisu järgmisega:

 

Salvestage ja taaskäivitage rakendus:

npm dollari algus

Minge lingile Auth ja seal peaks kuvatama autentimise komponent:

Autentimise komponent

Nüüd looge konto ja järgige autentimisprotsessi. Nüüd lubasite nurgarakendusel autentimise AWS cogito ja AWS Amplify SDK abil

… Varsti saabub veel mõni ulmeline kraam