streamalism.org

1. Prehľad

V našom poslednom článku o Spring Cloud sme do našej aplikácie pridali podporu Zipkin. V tomto článku budeme do nášho zásobníka pridávať klientsku aplikáciu.

Doteraz sme pri vytváraní našej cloudovej aplikácie pracovali úplne na konci. Aká dobrá je však webová aplikácia, ak neexistuje používateľské rozhranie? V tomto článku sa chystáme vyriešiť tento problém integráciou jednostránkovej aplikácie do nášho projektu.

Túto aplikáciu budeme písať pomocou Uhlové a Bootstrap. Štýl kódu Angular 4 sa veľmi podobá programovaniu aplikácie Spring, ktorá je prirodzeným prechodom pre vývojárov Spring! Aj keď bude front-endový kód používať Angular, obsah tohto článku je možné s minimálnym úsilím ľahko rozšíriť na akýkoľvek front-endový rámec.

V tomto článku budeme budovať aplikáciu Angular 4 a pripájať ju k našim cloudovým službám. Ukážeme si, ako integrovať prihlásenie medzi SPA a Spring Security. Ukážeme tiež, ako získať prístup k údajom našej aplikácie pomocou podpory Angular pre komunikáciu HTTP.

2. Zmeny brány

Po nasadení frontendu prejdeme na prihlásenie založené na formulári a zabezpečené časti používateľského rozhrania pre privilegovaných používateľov. To si vyžaduje vykonanie zmien v konfigurácii zabezpečenia našej brány.

2.1. Aktualizácia HttpSecurity

Najskôr sa poďme aktualizovať nakonfigurovať (HttpSecurity http) metóda v našej bráne SecurityConfig.java trieda:

@Override protected void configure (HttpSecurity http) {http .formLogin () .defaultSuccessUrl ("/ home / index.html", true) .and () .authorizeRequests () .antMatchers ("/ book-service / **", "/ rating-service / **", "/ login *", "/") .permitAll () .antMatchers ("/ eureka / **"). hasRole ("ADMIN") .anyRequest (). autentizovaný () .and () .logout () .and () .csrf (). disable (); }

Najskôr pridáme predvolenú úspešnú adresu URL, na ktorú ukážeme /home/index.html pretože tu bude žiť naša aplikácia Angular. Ďalej nakonfigurujeme porovnávače mravcov tak, aby umožňovali akúkoľvek požiadavku cez bránu okrem protokolu Heuréka zdrojov. Týmto sa všetky bezpečnostné kontroly delegujú na služby typu back-end.

Ďalej sme odstránili adresu URL úspešného odhlásenia, pretože predvolené presmerovanie späť na prihlasovaciu stránku bude fungovať dobre.

2.2. Pridajte hlavný koncový bod

Ďalej pridajme koncový bod, ktorý vráti autentifikovaného používateľa. Toto sa použije v našej aplikácii Angular na prihlásenie a identifikáciu rol, ktoré má náš používateľ. Toto nám pomôže kontrolovať, čo môžu robiť na našom webe.

V projekte brány pridajte znak AuthenticationController trieda:

@RestController verejná trieda AuthenticationController {@GetMapping ("/ me") public Principal getMyUser (Principal principal) {return principal; }}

Kontrolór vráti volajúcemu aktuálne prihlásený užívateľský objekt. Získate tak všetky informácie, ktoré potrebujeme na ovládanie našej aplikácie Angular.

2.3. Pridajte cieľovú stránku

Pridajme veľmi jednoduchú vstupnú stránku, aby používatelia niečo videli, keď prejdú na koreň našej aplikácie.

V src / main / resources / static, pridajme index.html súbor s odkazom na prihlasovaciu stránku:

    Kniha Rater Landing 
Toľko skvelých vecí o knihách
 Prihlásiť sa 

3. Uhlové CLI a štartovací projekt

Pred spustením nového projektu Angular nezabudnite nainštalovať najnovšie verzie súborov Node.js a npm.

3.1. Nainštalujte si Angular CLI

Najprv budeme musieť použiť npm na stiahnutie a inštaláciu rozhrania príkazového riadku Angular. Otvorte terminál a spustite:

npm install -g @ angular / cli

Týmto sa globálne stiahne a nainštaluje CLI.

3.2. Nainštalujte nový projekt

Zatiaľ čo ste v termináli, prejdite na projekt brány a choďte do priečinka gateway / src / main. Vytvorte adresár s názvom „hranatý“ a prejdite do neho. Z tohto miesta spustite:

nové ui

Buď trpezlivý; CLI pripravuje úplne nový projekt a sťahuje všetky závislosti JavaScriptu pomocou NPM. Nie je nezvyčajné, že tento proces trvá veľa minút.

The ng príkazová skratka pre Angular CLI, Nový parameter dáva príkazu tomu CLI, aby vytvoril nový projekt, a ui príkaz dáva nášmu projektu názov.

3.3. Spustite projekt

Raz Nový príkaz je dokončený. Prejdite na ikonu ui priečinok, ktorý bol vytvorený a spustený:

ng slúžiť

Po vytvorení projektu prejdite na // localhost: 4200. Mali by sme to vidieť v prehliadači:

Blahoželáme! Práve sme vytvorili aplikáciu Angular!

3.4. Nainštalujte Bootstrap

Na inštaláciu bootstrapu použijeme npm. V adresári ui spustite tento príkaz:

npm install [chránený e-mailom] - uložiť

Týmto sa stiahne bootstrap do priečinka node_modules.

V ui adresár, otvorte .angular-cli.json spis. Toto je súbor, ktorý konfiguruje niektoré vlastnosti nášho projektu. Nájsť aplikácie> štýly a pridajte umiestnenie súboru našej triedy CSS Bootstrap:

"styles": ["styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css"],

Toto dá pokyn Angular, aby zahrnul Bootstrap do skompilovaného súboru CSS vytvoreného s projektom.

3.5. Nastavte výstupný adresár zostavy

Ďalej musíme povedať Angular, kam umiestniť súbory zostavenia, aby im mohla slúžiť naša jarná bootovacia aplikácia. Spring Boot môže poskytovať súbory z dvoch umiestnení v priečinku zdrojov:

• src / main / resources / static
• src / main / resource / public

Pretože už používame statický priečinok na poskytovanie niektorých prostriedkov pre Eureku a Angular tento priečinok odstráni pri každom spustení zostavenia, zabudujme našu aplikáciu Angular do verejného priečinka.

Otvor .angular-cli.json súbor znova a nájdite aplikácie> outDir nehnuteľnosť. Aktualizujte to reťazec:

"outDir": "../../resources/static/home",

Ak sa projekt Angular nachádza v priečinku src / main / angular / ui, bude zostavený do priečinka src / main / resources / public. Ak je aplikácia v inom priečinku, bude potrebné tento reťazec upraviť, aby sa správne nastavilo umiestnenie.

3.6. Automatizujte zostavenie pomocou programu Maven

Na záver nastavíme automatizované zostavenie, ktoré sa spustí pri kompilácii nášho kódu. Táto mravčia úloha spustí úlohu zostavenia Angular CLI pri každom spustení kompilácie „mvn“. Pridajte tento krok do súboru POM.xml brány, aby ste sa uistili, že pri každej kompilácii dostaneme najnovšie zmeny používateľského rozhrania:

 maven-antrun-plugin generate-resources run 

Mali by sme poznamenať, že toto nastavenie vyžaduje, aby bol na triednej ceste k dispozícii Angular CLI. Potlačenie tohto skriptu do prostredia, ktoré túto závislosť nemá, bude mať za následok zlyhania zostavenia.

Teraz začnime vytvárať našu aplikáciu Angular!

4. Uhlové

V tejto časti tutoriálu sme na našej stránke vytvorili mechanizmus autentifikácie. Používame základné overovanie a sledujeme jednoduchý postup, aby to fungovalo.

Používatelia majú prihlasovací formulár, kde môžu zadať svoje používateľské meno a heslo.

Ďalej pomocou ich poverení vytvoríme autentifikačný token base64 a požiadame o „/ Ja“ koncový bod. Koncový bod vráti a Principal objekt obsahujúci role tohto používateľa.

Nakoniec uložíme poverenia a príkazcu, ktoré použijeme v ďalších požiadavkách.

Pozrime sa, ako sa to deje!

4.1. Šablóna

V projekte brány prejdite na src / main / angular / ui / src / app a otvorte app.component.html spis. Toto je prvá šablóna, ktorá sa Angular načíta a bude miestom, kde naši používatelia pristanú po prihlásení.

Sem pridáme nejaký kód na zobrazenie navigačnej lišty s prihlasovacím formulárom:

    Book Rater Admin 
 Odhlásiť sa 
 Knihy si môže pozrieť ktokoľvek. 
 Používatelia môžu prezerať a vytvárať hodnotenia
Správcovia môžu robiť čokoľvek!

Tento kód nastavuje navigačný panel s triedami Bootstrap. V lište je vložený prihlasovací formulár. Angular používa toto označenie na dynamickú interakciu s JavaScriptom na vykreslenie rôznych častí stránky a na kontrolu vecí, ako je odosielanie formulárov.

Výroky ako (ngSubmit) = ”onLogin (f)” jednoducho označte, že keď je formulár odoslaný, zavolajte metódu „OnLogin (f)“ a odovzdať formulár tejto funkcii. V rámci jumbotron div, máme značky odsekov, ktoré sa budú dynamicky zobrazovať v závislosti od stavu nášho hlavného objektu.

Ďalej si napíšeme kód do súboru Typescript, ktorý bude podporovať túto šablónu.

4.2. Strojopis

V rovnakom adresári otvorte súbor app.component.ts. V tomto súbore pridáme všetky vlastnosti a metódy strojopisu potrebné na fungovanie našej šablóny:

importovať {Komponent} z "@ angular / core"; importovať {Principal} z "./principal"; importovať {Response} z "@ angular / http"; importovať {Book} z "./book"; importovať {HttpService} z "./http.service"; @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})) exportná trieda AppComponent {selectedBook: Book = null; príkazca: príkazca = nový príkazca (false, []); loginFailed: boolean = false; konštruktor (súkromný httpService: HttpService) {} ngOnInit (): void {this.httpService.me () .subscribe ((response: Response) => {let principalJson = response.json (); this.principal = new Principal (principalJson .authenticated, principalJson.authorities);}, (chyba) => {console.log (chyba);}); } onLogout () {this.httpService.logout () .subscribe ((response: Response) => {if (response.status === 200) {this.loginFailed = false; this.principal = new Principal (false, [ ]); window.location.replace (response.url);}}, (chyba) => {console.log (chyba);}); }}

Táto trieda sa pripája k metóde uhlového životného cyklu, ngOnInit (). V tejto metóde nazývame / ja koncový bod na získanie aktuálnej roly a stavu používateľa. Toto určuje, čo užívateľ vidí na hlavnej stránke. Táto metóda bude spustená pri každom vytvorení tohto komponentu, čo je vynikajúci čas na kontrolu povolení vlastností používateľa v našej aplikácii.

Máme tiež onLogout () metóda, ktorá odhlási nášho používateľa a obnoví pôvodné nastavenia tejto stránky.

Tu sa však deje nejaké kúzlo. The httpService vlastnosť deklarovaná v konštruktore. Angular vkladá túto vlastnosť do našej triedy za behu. Angular spravuje jednotlivé inštancie tried služieb a injektuje ich pomocou injektora konštruktora, rovnako ako Spring!

Ďalej musíme definovať HttpService trieda.

4.3. HttpService

V rovnakom adresári vytvorte súbor s názvom „Http.service.ts“. Do tohto súboru pridajte tento kód na podporu metód prihlásenia a odhlásenia:

importovať {Injectable} z "@ angular / core"; importovať {Pozorovateľné} z "rxjs"; importovať {Response, Http, Headers, RequestOptions} z "@ angular / http"; importovať {Book} z "./book"; importovať {Rating} z "./rating"; @Injectable () exportná trieda HttpService {konštruktor (súkromný http: Http) {} me (): pozorovateľný {návrat this.http.get ("/ me", this.makeOptions ())} odhlásenie (): pozorovateľný {návrat .http.post ("/ logout", '', this.makeOptions ())} súkromné ​​makeOptions (): RequestOptions {let headers = new Headers ({'Content-Type': 'application / json'}); vrátiť nové RequestOptions ({headers: headers}); }}

V tejto triede vkladáme ďalšiu závislosť pomocou DI konštrukcie Angular. Tentokrát je to Http trieda. Táto trieda spracováva všetku komunikáciu HTTP a poskytuje nám ju rámec.

Každá z týchto metód vykonáva požiadavku HTTP pomocou Angular knižnice HTTP. Každá požiadavka tiež určuje typ obsahu v hlavičkách.

Teraz musíme urobiť ešte jednu vec, aby sme získali HttpService zaregistrovaný v systéme vstrekovania závislostí. Otvor app.module.ts súbor a nájdite vlastníctvo poskytovateľov. Pridajte znak HttpService na to pole. Výsledok by mal vyzerať takto:

poskytovatelia: [HttpService],

4.4. Pridajte príkazcu

Ďalej pridajme náš hlavný objekt DTO do nášho kódu strojopisu. Do toho istého adresára pridajte súbor s názvom „principal.ts“ a pridajte tento kód:

trieda exportu Principal {verejné overené: boolean; verejné orgány: Orgán [] = []; verejné údaje: akékoľvek; konštruktor (autentifikovaný: boolean, oprávnenia: akýkoľvek [], poverenia: akýkoľvek) {this.authenticated = autentizovaný; Authority.map (auth => this.authorities.push (new Authority (auth.authority))) this.credentials = poverenia; } isAdmin () {return this.authorities.some ((auth: Authority) => auth.authority.indexOf ('ADMIN')> -1)}} oprávnenie exportnej triedy {verejné oprávnenie: String; konštruktor (autorita: reťazec) {this.authority = autorita; }}

Pridali sme Principal triedy a an Orgánu trieda. Toto sú dve triedy DTO, podobne ako POJO v jarnej aplikácii. Z tohto dôvodu nemusíme tieto triedy registrovať v systéme DI v uhle.

Ďalej nakonfigurujme pravidlo presmerovania na presmerovanie neznámych požiadaviek do koreňového adresára našej aplikácie.

4.5. 404 Manipulácia

Prejdime späť do kódu Java pre službu brány. Kde GatewayApplication trieda býva pridať novú triedu s názvom ErrorPageConfig:

@Component public class ErrorPageConfig implementuje ErrorPageRegistrar {@Override public void registerErrorPages (register ErrorPageRegistry) {registry.addErrorPages (nový ErrorPage (HttpStatus.NOT_FOUND, "/home/index.html")); }}

Táto trieda identifikuje akúkoľvek odpoveď 404 a presmeruje používateľa na „/Home/index.html“. V jednej stránke aplikácie takto riešime všetku komunikáciu, ktorá nesmeruje na vyhradený zdroj, pretože klient by mal spracovávať všetky splavné trasy.

Teraz sme pripravení spustiť túto aplikáciu a zistiť, čo sme vytvorili!

4.6. Zostavte a zobrazte

Teraz bež “mvn zostaviť”Z priečinka brány. Toto skompiluje náš zdroj java a vytvorí aplikáciu Angular do verejného priečinka. Začnime ďalšie cloudové aplikácie: konfigur, objava zips. Potom spustite projekt brány. Po spustení služby prejdite na // localhost: 8080 vidieť našu aplikáciu. Mali by sme vidieť niečo také:

Ďalej nasledujme odkaz na prihlasovaciu stránku:

Prihláste sa pomocou prihlasovacích údajov používateľa / hesla. Kliknite na tlačidlo „Prihlásiť sa“ a mali by sme byť presmerovaní na stránku /home/index.html, kde sa načíta naša jednostránková aplikácia.

Vyzerá to ako naše jumbotron znamená, že sme prihlásení ako používatelia! Teraz sa odhláste kliknutím na odkaz v pravom hornom rohu a prihláste sa pomocou admin / admin poverenia tentokrát.

Vyzerá dobre! Teraz sme prihlásení ako správcovia.

5. Záver

V tomto článku sme videli, aké ľahké je integrovať jednostránkovú aplikáciu do nášho cloudového systému. Vzali sme moderný rámec a do našej aplikácie sme integrovali funkčnú konfiguráciu zabezpečenia.

Na týchto príkladoch sa pokúste napísať nejaký kód, pomocou ktorého zavoláte na číslo knižná služba alebo hodnotiaca služba. Pretože teraz máme príklady uskutočňovania hovorov HTTP a údajov o zapojení do šablón, malo by to byť pomerne jednoduché.

Ak chcete vidieť, ako sa zvyšok webu stavia, vždy nájdete zdrojový kód na stránkach Github.