streamalism.org

1. Áttekintés

Legutóbbi Spring Cloud cikkünkben felvettük Zipkin támogatást alkalmazásunkba. Ebben a cikkben egy front-end alkalmazást fogunk hozzáadni a veremhez.

Eddig teljes egészében a háttéren dolgoztunk a felhőalkalmazásunk felépítésén. De mire jó egy webalkalmazás, ha nincs felhasználói felület? Ebben a cikkben megoldjuk ezt a problémát egyoldalas alkalmazás integrálásával a projektünkbe.

Ezzel az alkalmazással fogjuk írni Szögletes és Bootstrap. Az Angular 4 kód stílusa nagyon hasonlít egy Spring alkalmazás kódolására, amely egy természetes crossover a Spring fejlesztő számára! Míg a kezelői kód Angular-t fog használni, a cikk tartalma minimális erőfeszítéssel könnyedén kiterjeszthető bármilyen front-end keretrendszerre.

Ebben a cikkben felépítünk egy Angular 4 alkalmazást, és összekapcsoljuk azt felhőszolgáltatásainkkal. Bemutatjuk, hogyan lehet integrálni a bejelentkezést a SPA és a Spring Security között. Megmutatjuk azt is, hogy miként férhetünk hozzá alkalmazásunk adataihoz az Angular HTTP-kommunikációs támogatásával.

2. Átjáró változásai

Ha a kezelőfelület a helyén van, áttérünk az űrlap alapú bejelentkezésre és a felhasználói felület biztonságos részeire a kiváltságos felhasználók számára. Ehhez meg kell változtatni az átjáró biztonsági konfigurációját.

2.1. Frissítés HttpBiztonság

Először frissítsük konfigurálás (HttpSecurity http) módszer az átjárónkon SecurityConfig.java osztály:

@Orride 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 (). hitelesítve () .és () .logout () .és () .csrf (). disable (); }

Először hozzáadunk egy alapértelmezett sikeres URL-t, amelyre mutat /home/index.html mivel itt él a Szögletes alkalmazásunk. Ezután konfiguráljuk a hangyaillesztőket, hogy minden kérést engedélyezzenek az átjárón, kivéve a Eureka erőforrások. Ez az összes biztonsági ellenőrzést a háttérszolgáltatásokra ruházza át.

Ezután eltávolítottuk a kijelentkezés sikeres URL-jét, mivel az alapértelmezett visszairányítás a bejelentkezési oldalra jól fog működni.

2.2. Adjon meg egy fő végpontot

Ezután adjunk hozzá egy végpontot a hitelesített felhasználó visszaadásához. Ezt az Angular alkalmazásban fogjuk használni a bejelentkezéshez és a felhasználó által betöltött szerepek azonosításához. Ez segít abban, hogy ellenőrizzük, milyen tevékenységeket hajthatnak végre az oldalunkon.

Az átjáró projektben adjon hozzá egy AuthenticationController osztály:

@RestController public class AuthenticationController {@GetMapping ("/ me") public Principal getMyUser (Principal megbízó) {return principál; }}

A vezérlő az aktuálisan bejelentkezett felhasználói objektumot adja vissza a hívónak. Ez minden információt megad nekünk, amire szükségünk van az Angular alkalmazás vezérléséhez.

2.3. Céloldal hozzáadása

Adjunk hozzá egy nagyon egyszerű céloldalt, hogy a felhasználók valamit láthassanak, amikor az alkalmazásunk gyökeréhez lépnek.

Ban ben src / main / resources / static, adjunk hozzá egy index.html fájl a bejelentkezési oldal linkjével:

    Book Rater Landing 
Annyi nagyszerű dolog a könyvekkel kapcsolatban
 Belépés 

3. Szögletes CLI és a kezdő projekt

Az új Angular projekt megkezdése előtt feltétlenül telepítse a Node.js és az npm legújabb verzióit.

3.1. Telepítse a szögletes CLI-t

A kezdéshez használnunk kell npm az Angular parancssori felület letöltéséhez és telepítéséhez. Nyisson meg egy terminált és futtassa:

npm telepítés -g @ angular / cli

Ez globálisan letölti és telepíti a CLI-t.

3.2. Telepítsen egy új projektet

Ha még mindig a terminálban van, keresse meg az átjáró projektet, és menjen az átjáró / src / main mappába. Hozzon létre egy „szögletes” nevű könyvtárat, és keresse meg azt. Innen fut:

új ui

Legyél türelmes; a CLI vadonatúj projektet állít fel, és az összes JavaScript-függőséget az npm segítségével tölti le. Nem ritka, hogy ez a folyamat sok percet vesz igénybe.

A ng a parancs az Angular CLI parancsikonja, a új paraméter utasítja a CLI-t egy új projekt létrehozására, és a ui parancs megadja a projektünk nevét.

3.3. Futtassa a projektet

Egyszer a új parancs teljes. Navigáljon a ui létrehozott és futtatott mappa:

tálalás

A projekt felépítése után keresse meg a // localhost: 4200 fájlt. Ezt látnunk kell a böngészőben:

Gratulálunk! Most építettünk egy Angular alkalmazást!

3.4. Telepítse a Bootstrap programot

Használjuk az npm-et a bootstrap telepítéséhez. Az ui könyvtárból futtassa ezt a parancsot:

npm install [email protected] - mentés

Ez letölti a bootstrap-ot a node_modules mappába.

Ban,-ben ui könyvtárat, nyissa meg a .angular-cli.json fájl. Ez a fájl konfigurálja a projekt néhány tulajdonságát. Találd meg alkalmazások> stílusok tulajdonságot, és adja hozzá a Bootstrap CSS osztály fájlhelyét:

"stílusok": ["stílusok.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css"],

Ez arra utasítja az Angulart, hogy a Bootstrap-ot vegye fel a lefordított CSS-fájlba, amelyet a projekttel építenek.

3.5. Állítsa be a Build Output Directory-t

Ezután meg kell mondanunk az Angularnak, hová tegyük a build fájlokat, hogy a tavaszi indító alkalmazásunk kiszolgálja őket. A Spring Boot az erőforrások mappában két helyről tud fájlokat kiszolgálni:

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

Mivel már a statikus mappát használjuk bizonyos források kiszolgálására az Eureka számára, és az Angular ezt a mappát minden egyes törléskor törli, építsük az Angular alkalmazást a nyilvános mappába.

Nyissa meg a .angular-cli.json fájl újra, és keresse meg a alkalmazások> outDir ingatlan. Frissítse ezt húr:

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

Ha az Angular projekt az src / main / angular / ui fájlban található, akkor az src / main / resources / public mappába épít. Ha az alkalmazás egy másik mappában van, akkor ezt a karakterláncot módosítani kell a hely megfelelő beállításához.

3.6. Automatizálja a Build With Maven-t

Végül létrehozunk egy automatizált összeállítást, amely a kód összeállításakor futtatható. Ez a hangya feladat az „mvn compile” futtatásakor futtatja az Angular CLI build feladatot. Adja hozzá ezt a lépést az átjáró POM.xml fájljához annak biztosítására, hogy minden fordításkor megkapjuk a legfrissebb felhasználói változásokat:

 maven-antrun-plugin generál-erőforrások futnak 

Meg kell jegyeznünk, hogy ez a beállítás megköveteli, hogy az Angular CLI elérhető legyen az osztályúton. Ha ezt a parancsfájlt olyan környezetbe továbbítja, amely nem rendelkezik ezzel a függőséggel, összeépítési hibákhoz vezet.

Most kezdjük el építeni az Angular alkalmazást!

4. Szögletes

Az oktatóanyag ezen szakaszában hitelesítési mechanizmust építünk fel az oldalunkra. Alapvető hitelesítést használunk, és egyszerű folyamatot követünk annak működéséhez.

A felhasználóknak van egy bejelentkezési űrlapjuk, ahol megadhatják felhasználónevüket és jelszavukat.

Ezután a hitelesítő adataikkal létrehozunk egy base64 hitelesítési tokent, és kérjük a "/nekem" végpont. A végpont visszatér a Fő a felhasználó szerepeit tartalmazó objektum.

Végül a hitelesítő adatokat és a megbízót az ügyfélen tároljuk, hogy a későbbi kérések során felhasználhassuk.

Lássuk, hogyan sikerült ez!

4.1. Sablon

Az átjáró projektben lépjen a következőre: src / main / angular / ui / src / kb és nyissa meg a app.component.html fájl. Ez az első sablon, amelyet a Angular betölt, és ahol a felhasználók belépnek a bejelentkezés után.

Itt hozzáadunk néhány kódot a navigációs sáv megjelenítéséhez bejelentkezési űrlappal:

    Book Rater Admin 
 Kijelentkezés 
 Bárki megtekintheti a könyveket. 
 A felhasználók megtekinthetik és létrehozhatják az értékeléseket
Az adminisztrátorok bármit megtehetnek!

Ez a kód létrehoz egy navigációs sávot a Bootstrap osztályokkal. A sávba beágyazott bejelentkezési űrlap található. Az Angular ezt a jelölést használja arra, hogy dinamikusan interakcióba lépjen a JavaScript-szel az oldal különböző részeinek megjelenítéséhez és az olyan dolgok ellenőrzéséhez, mint az űrlap beküldése.

Nyilatkozatok, mint (ngSubmit) = ”onLogin (f)” egyszerűen jelezze, hogy az űrlap benyújtásakor hívja meg a módszert „OnLogin (f)” és adja át az űrlapot annak a függvénynek. Belül jumbotron div, rendelkezünk olyan bekezdési címkékkel, amelyek a fő objektum állapotától függően dinamikusan jelennek meg.

Ezután kódoljuk be a Typescript fájlt, amely támogatja ezt a sablont.

4.2. Gépelt

Ugyanabból a könyvtárból nyissa meg az app.component.ts fájlt. Ebben a fájlban hozzáadjuk a sablonfunkciónk elkészítéséhez szükséges összes gépírási tulajdonságot és módszert:

importálja a (z) {Component} elemet a "@ angular / core" fájlból; importálja a {Principal} fájlt a "./principal" fájlból; importálja a {Response} fájlt a "@ angular / http" mappából; importálja a {Book} fájlt a "./book" könyvtárból; importálja a {HttpService} fájlt a "./http.service" mappából; @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) exportálási osztály AppComponent {selectedBook: Book = null; megbízó: Megbízó = új Megbízó (hamis, []); loginFailed: logikai = hamis; konstruktor (privát httpService: HttpService) {} ngOnInit (): void {this.httpService.me () .subscribe ((válasz: Válasz) => {legyen főJson = válasz.json (); ez.elv = új Fő (főJson) .hitelesítve, megbízóJson.authorities);}, (hiba) => {konzol.log (hiba);}); } onLogout () {this.httpService.logout () .subscribe ((response: Response) => {if (response.status === 200) {this.loginFailed = false; this.principal = new Principal (hamis, [ ]); window.location.replace (response.url);}}, (hiba) => {konzol.log (hiba);}); }}

Ez az osztály bekapcsolódik a szögletes életciklus-módszerbe, ngOnInit (). Ebben a módszerben a /nekem végpont a felhasználó aktuális szerepének és állapotának megismeréséhez. Ez meghatározza, hogy a felhasználó mit lát a főoldalon. Ez a módszer mindig elindul, ha létrejön ez az összetevő, ami kiváló alkalom arra, hogy ellenőrizzük a felhasználó tulajdonságait az alkalmazásunk engedélyeinek ellenőrzése érdekében.

Van egy onLogout () módszer, amely kijelenti a felhasználónkat, és visszaállítja az oldal állapotát az eredeti beállításaihoz.

Bár itt valami varázslat folyik. A httpSzolgáltatás a konstruktorban deklarált tulajdonság. Angular futás közben injektálja ezt a tulajdonságot osztályunkba. A Angular kezeli a szolgáltatási osztályok egyedi példányait, és a konstruktőri befecskendezéssel injektálja őket, akárcsak a Spring!

Ezután meg kell határoznunk a HttpService osztály.

4.3. HttpService

Ugyanabban a könyvtárban hozzon létre egy nevű fájlt „Http.service.ts”. Ebben a fájlban adja hozzá ezt a kódot a bejelentkezési és kijelentkezési módszerek támogatásához:

importálja az {Injectable} fájlt a "@ angular / core" fájlból; importál {Megfigyelhető} az "rxjs" fájlból; importálja a {Response, Http, Headers, RequestOptions} fájlt a "@ angular / http" mappából; importálja a {Book} fájlt a "./book" könyvtárból; importálja a (z) {Rating} fájlt a "./rating" fájlból; @Injectable () export osztály HttpService {konstruktor (privát http: Http) {} me (): Megfigyelhető {return this.http.get ("/ me", this.makeOptions ())} kijelentkezés (): megfigyelhető {return .http.post ("/ logout", '', this.makeOptions ())} private makeOptions (): RequestOptions {let headers = new Headers ({'Content-Type': 'application / json'}); return new RequestOptions ({fejlécek: fejlécek}); }}

Ebben az osztályban egy másik függőséget injektálunk az Angular DI konstrukciójával. Ezúttal a Http osztály. Ez az osztály kezeli az összes HTTP kommunikációt, és a keretrendszer biztosítja számunkra.

Ezek a módszerek mindegyike végrehajt egy HTTP kérést az angular HTTP könyvtárának felhasználásával. Minden kérelem tartalomtípust is megad a fejlécekben.

Most még egyet kell tennünk a HttpService regisztrálva van a függőségi injekciós rendszerben. Nyissa meg a app.module.ts fájlt, és keresse meg a szolgáltatók tulajdonát. Add hozzá a HttpService ahhoz a tömbhöz. Az eredménynek így kell kinéznie:

szolgáltatók: [HttpService],

4.4. Adja hozzá az igazgatót

Ezután adjuk hozzá a DIP objektumot a Gépirat kódunkba. Ugyanabba a könyvtárba adjon hozzá egy „basic.ts” nevű fájlt, és adja hozzá ezt a kódot:

export osztály Megbízó {public hitelesítve: logikai; állami hatóságok: hatóság [] = []; közokirat: bármilyen; konstruktor (hitelesítve: logikai érték, hatóságok: bármilyen [], hitelesítő adatok: bármilyen) {this.authenticated = hitelesítve; hatóságok.map (auth => this.authorities.push (új hatóság (auth.authority))) this.credentials = hitelesítő adatok; } isAdmin () {return this.authorities.some ((auth: Authority) => auth.authority.indexOf ('ADMIN')> -1)}} export osztály Authority {public authority: String; konstruktor (autoritás: String) {this.authority = autoritás; }}

Hozzáadtuk a Fő osztály és egy Hatóság osztály. Ez két DTO osztály, hasonlóan a POJO-khoz egy tavaszi alkalmazásban. Emiatt nem kell ezeket az osztályokat szögben regisztrálnunk a DI rendszerben.

Ezután állítsunk be egy átirányítási szabályt az ismeretlen kérések átirányítására az alkalmazás gyökerébe.

4.5. 404 Kezelés

Menjünk vissza az átjáró szolgáltatás Java-kódjába. A hol GatewayApplication osztály lakóhelye hozzáad egy új osztályt ErrorPageConfig:

A @Component public class ErrorPageConfig végrehajtja a ErrorPageRegistrar {@Orride public void registerErrorPages (ErrorPageRegistry registry) {register.addErrorPages (new ErrorPage (HttpStatus.NOT_FOUND, "/home/index.html")); }}

Ez az osztály azonosítja az esetleges 404 választ, és átirányítja a felhasználót „/Home/index.html”. Egyoldalas alkalmazásban így kezeljük az összes forgalmat, amely nem dedikált erőforráshoz vezet, mivel az ügyfélnek az összes hajózható útvonalat kezelnie kell.

Most készen állunk az alkalmazás elindítására, és megnézhetjük, mit építettünk!

4.6. Építés és megtekintés

Most fussmvn össze”Az átjáró mappájából. Ez összeállítja a java forrásunkat és felépíti az Angular alkalmazást a nyilvános mappába. Indítsuk el a többi felhőalkalmazást: konfig, felfedezés, és cipzár. Ezután futtassa az átjáró projektet. Amikor a szolgáltatás elindul, keresse meg a // localhost: 8080 hogy megtekinthesse kb. Valami ilyesmit kellene látnunk:

Ezután kövessük a bejelentkezési oldalra mutató linket:

Jelentkezzen be a felhasználói / jelszó hitelesítő adatokkal. Kattintson a „Bejelentkezés” gombra, és át kell irányítanunk a /home/index.html oldalra, ahova az egyoldalas alkalmazásunk betöltődik.

Úgy néz ki, mint a miénk jumbotron azt jelzi, hogy felhasználóként vagyunk bejelentkezve! Most jelentkezzen ki a jobb felső sarokban található linkre kattintva, és jelentkezzen be a admin / admin ezúttal hitelesítő adatok.

Jól néz ki! Most rendszergazdaként vagyunk bejelentkezve.

5. Következtetés

Ebben a cikkben láttuk, milyen egyszerű integrálni egyoldalas alkalmazást a felhőrendszerünkbe. Vettünk egy modern keretet és integráltunk egy működő biztonsági konfigurációt alkalmazásunkba.

Ezeknek a példáknak a segítségével próbálja meg megírni a kódot, hogy felhívja a könyv-szolgáltatás vagy minősítés-szolgáltatás. Mivel most vannak példáink a HTTP-hívások kezdeményezésére és az adatok bekötésére a sablonokba, ennek viszonylag egyszerűnek kell lennie.

Ha szeretné megtudni, hogy a webhely többi része miként épül fel, mint mindig, a forráskódot megtalálhatja a Githubon.