Proljetni oblak - dodavanje kutnih 4

1. Pregled

U našem posljednjem članku Spring Cloud dodali smo Zipkin podršku u našu aplikaciju. U ovom ćemo članku dodati svoj front-end program.

Do sada smo u potpunosti radili na pozadini kako bismo izgradili našu aplikaciju u oblaku. Ali kakva je korist od web aplikacije ako nema korisničkog sučelja? U ovom ćemo članku riješiti taj problem integriranjem aplikacije na jednoj stranici u naš projekt.

Ovu ćemo aplikaciju pisati pomoću Kutni i Bootstrap. Stil koda Angular 4 sliči na kodiranje aplikacije Spring koja je prirodni crossover za programera Springa! Iako će prednji kraj koristiti Angular, sadržaj ovog članka može se lako proširiti na bilo koji prednji okvir uz minimalan napor.

U ovom ćemo članku izraditi aplikaciju Angular 4 i povezati je s našim uslugama u oblaku. Pokazat ćemo kako integrirati prijavu između SPA-a i Spring Security-a. Pokazat ćemo i kako pristupiti podacima naše aplikacije koristeći podršku tvrtke Angular za HTTP komunikaciju.

2. Promjene pristupnika

S postavljenim prednjim krajem, prebacit ćemo se na prijavu zasnovanu na obrascu i zaštićene dijelove korisničkog sučelja privilegiranim korisnicima. To zahtijeva promjene u našoj sigurnosnoj konfiguraciji pristupnika.

2.1. ažuriranje HttpSecurity

Prvo, ažurirajmo konfigurirati (HttpSecurity http) metoda u našem gatewayu SecurityConfig.java razred:

@Override zaštićena void konfiguracija (HttpSecurity http) {http .formLogin () .defaultSuccessUrl ("/ home / index.html", true) .and () .authorizeRequests () .antMatchers ("/ book-service / **", "/ rating-service / **", "/ login *", "/") .permitAll () .antMatchers ("/ eureka / **"). hasRole ("ADMINISTRATOR") .anyRequest (). authenticated () .and () .logout () .and () .csrf (). disable (); }

Prvo dodamo zadani URL uspjeha na koji treba ukazati /home/index.html jer će ovo biti mjesto gdje živi naša aplikacija Angular. Dalje, konfiguriramo podudaranje mrava kako bi omogućio bilo koji zahtjev kroz pristupnik, osim za Eureka resursi. Ovo će prenijeti sve sigurnosne provjere na pozadinske usluge.

Dalje smo uklonili URL uspješne odjave jer će zadano preusmjeravanje natrag na stranicu za prijavu dobro funkcionirati.

2.2. Dodajte glavnu krajnju točku

Dalje, dodajmo krajnju točku za vraćanje autentificiranog korisnika. To će se koristiti u našoj aplikaciji Angular za prijavu i utvrđivanje uloga koje ima naš korisnik. To će nam pomoći da kontroliramo koje radnje mogu raditi na našoj web stranici.

U projekt pristupnika dodajte znak AuthenticationController razred:

@RestController javna klasa AuthenticationController {@GetMapping ("/ me") public Principal getMyUser (Principal principal) {return principal; }}

Kontroler vraća trenutno prijavljeni korisnički objekt pozivatelju. To nam daje sve informacije potrebne za upravljanje našom kutnom aplikacijom.

2.3. Dodajte odredišnu stranicu

Dodajmo vrlo jednostavnu odredišnu stranicu tako da korisnici vide nešto kada odu do korijena naše aplikacije.

U src / main / resources / static, dodajmo an index.html datoteka s vezom na stranicu za prijavu:

    Book Rater slijetanje 

Toliko sjajnih stvari o knjigama

Prijaviti se

3. Kutni CLI i početni projekt

Prije pokretanja novog Angular projekta obavezno instalirajte najnovije verzije Node.js i npm.

3.1. Instalirajte kutni CLI

Za početak ćemo trebati koristiti npm za preuzimanje i instaliranje sučelja Angular naredbenog retka. Otvorite terminal i pokrenite:

npm instaliraj -g @ angular / cli

Ovo će preuzeti i instalirati CLI globalno.

3.2. Instalirajte novi projekt

Dok ste još u terminalu, dođite do projekta gateway-a i idite u gateway / src / glavnu mapu. Izradite direktorij nazvan "kutni" i dođite do njega. Odavde trčite:

ng novi ui

Budi strpljiv; CLI postavlja potpuno novi projekt i preuzima sve JavaScript ovisnosti s npm. Nije neuobičajeno da ovaj postupak traje mnogo minuta.

The ng naredba je prečac za Angular CLI, novi parametar upućuje CLI da kreira novi projekt, a ui naredba daje našem projektu naziv.

3.3. Pokrenite projekt

Jednom novi naredba je završena. Idite na ui mapa koja je stvorena i pokrenuta:

ng poslužiti

Nakon izrade projekta, idite na // localhost: 4200. Ovo bismo trebali vidjeti u pregledniku:

Čestitamo! Upravo smo izgradili Angular aplikaciju!

3.4. Instalirajte Bootstrap

Upotrijebimo npm za instalaciju bootstrapa. Iz direktorija ui pokrenite ovu naredbu:

npm install [email protected] --save

Ovo će preuzeti bootstrap u mapu node_modules.

U ui direktorij, otvorite .kutni-cli.json datoteka. Ovo je datoteka koja konfigurira neka svojstva o našem projektu. Naći aplikacije> stilovi i dodajte mjesto datoteke naše Bootstrap CSS klase:

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

To će uputiti Angular da uključi Bootstrap u kompiliranu CSS datoteku koja je izgrađena s projektom.

3.5. Postavite Build Output Directory

Dalje, Angulu moramo reći gdje da stavi datoteke gradnje kako bi ih naša proljetna aplikacija za pokretanje mogla poslužiti. Spring Boot može posluživati ​​datoteke s dva mjesta u mapi resursa:

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

Budući da već koristimo statičku mapu za posluživanje nekih resursa za Eureku, a Angular briše ovu mapu svaki put kad se izvrši gradnja, izgradimo našu aplikaciju Angular u javnu mapu.

Otvori .kutni-cli.json ponovno podnesite datoteku i pronađite aplikacije> outDir imovine. Ažurirajte to niz:

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

Ako se projekt Angular nalazi u src / main / angular / ui, tada će se graditi u mapu src / main / resources / public. Ako je aplikacija u drugoj mapi, ovaj će niz trebati izmijeniti kako bi se lokacija pravilno postavila.

3.6. Automatizirajte izgradnju s Mavenom

I na kraju, postavit ćemo automatiziranu izgradnju koja će se izvoditi kada kompajliramo naš kôd. Ovaj zadatak mrava pokrenut će zadatak izrade Angular CLI kad god se pokrene “mvn compile”. Dodajte ovaj korak na POM.xml pristupnika kako biste osigurali da svaki put kad kompajliramo dobijemo najnovije promjene korisničkog sučelja:

 maven-antrun-plugin generiranje-resursi trčanje 

Trebali bismo imati na umu da ovo postavljanje zahtijeva da kutni CLI bude dostupan na putu predavanja. Guranje ove skripte u okruženje koje nema tu ovisnost rezultirat će neuspjesima u gradnji.

Počnimo sada graditi našu Angular aplikaciju!

4. Kutni

U ovom odjeljku uputstva na našoj stranici gradimo mehanizam provjere autentičnosti. Koristimo osnovnu provjeru autentičnosti i slijedimo jednostavan tijek kako bismo uspjeli.

Korisnici imaju obrazac za prijavu u koji mogu unijeti svoje korisničko ime i lozinku.

Dalje, koristimo njihove vjerodajnice za stvaranje osnovnog tokena za provjeru autentičnosti i zahtijevamo "/mi" krajnja točka. Krajnja točka vraća a Glavni objekt koji sadrži uloge ovog korisnika.

I na kraju, pohranit ćemo vjerodajnice i glavnicu na klijentu koje ćemo koristiti u sljedećim zahtjevima.

Da vidimo kako se to radi!

4.1. Predložak

U projektu gatewaya idite na src / main / angular / ui / src / app i otvorite app.component.html datoteka. Ovo je prvi predložak koji se Angular učitava i bit će tamo gdje će korisnici sletjeti nakon prijave.

Ovdje ćemo dodati neki kôd za prikaz navigacijske trake s obrascem za prijavu:

    Administrator ocjenjivanja knjiga 
    Odjavite se

    Svatko može pogledati knjige.

    Korisnici mogu pregledavati i stvarati ocjene

    Administratori mogu sve!

    Ovaj kod postavlja navigacijsku traku s razredima Bootstrap. U traku je ugrađen obrazac za prijavu. Angular koristi ovu oznaku za dinamičku interakciju s JavaScriptom za prikazivanje različitih dijelova stranice i kontrolu stvari poput slanja obrasca.

    Izjave poput (ngSubmit) = "onLogin (f)" jednostavno naznačite da prilikom slanja obrasca pozovite metodu “OnLogin (f)” i predati obrazac toj funkciji. Unutar jumbotron div, imamo oznake odlomaka koje će se dinamički prikazivati ​​ovisno o stanju našeg glavnog objekta.

    Dalje, kodirajmo datoteku Typescript koja će podržavati ovaj predložak.

    4.2. Strojopis

    Iz istog direktorija otvorite datoteku app.component.ts. U ovu ćemo datoteku dodati sva svojstva typeScript-a i metode potrebne za našu funkciju predloška:

    uvoz {Komponenta} iz "@ kutna / jezgra"; uvoz {Principal} iz "./principal"; uvoz {Response} iz "@ angular / http"; uvoz {Book} iz "./book"; uvoz {HttpService} iz "./http.service"; @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) klasa izvoza AppComponent {selectedBook: Book = null; nalogodavac: ravnatelj = novi nalogodavac (netačno, []); loginFailed: boolean = false; konstruktor (privatni httpService: HttpService) {} ngOnInit (): void {this.httpService.me () .subscribe ((response: Response) => {let principalJson = response.json (); this.principal = novi Principal (principalJson .authenticated, principalJson.authorities);}, (pogreška) => {console.log (pogreška);}); } onLogout () {this.httpService.logout () .subscribe ((response: Response) => {if (response.status === 200) {this.loginFailed = false; this.principal = new Principal (false, [ ]); window.location.replace (response.url);}}, (pogreška) => {console.log (pogreška);}); }}

    Ova klasa se uključuje u metodu Kutnog životnog ciklusa, ngOnInit (). U ovoj metodi nazivamo /mi krajnja točka za dobivanje trenutne uloge i stanja korisnika. Ovo određuje ono što korisnik vidi na glavnoj stranici. Ova će se metoda aktivirati kad god je ova komponenta stvorena, što je sjajno vrijeme za provjeru korisničkih svojstava za dozvole u našoj aplikaciji.

    Također imamo i onLogout () metoda koja odjavljuje našeg korisnika i vraća stanje ove stranice na izvorne postavke.

    Ipak se ovdje događa neka čarolija. The httpService svojstvo koje je deklarirano u konstruktoru. Angular ubrizgava ovo svojstvo u našu klasu tijekom izvođenja. Angular upravlja pojedinačnim primjercima klasa usluga i ubrizgava ih pomoću ubrizgavanja konstruktora, baš kao i Spring!

    Dalje, moramo definirati HttpService razred.

    4.3. HttpService

    U istom direktoriju stvorite datoteku s imenom "Http.service.ts". U ovu datoteku dodajte ovaj kôd za podršku načinima prijave i odjave:

    uvoz {Injectable} iz "@ angular / core"; import {Observable} iz "rxjs"; uvoz {Response, Http, Headers, RequestOptions} iz "@ angular / http"; uvoz {Book} iz "./book"; uvoz {Ocjena} iz "./rating"; @Injectable () klasa izvoza HttpService {konstruktor (privatni http: Http) {} me (): Observable {return this.http.get ("/ me", this.makeOptions ())} logout (): Observable {return this .http.post ("/ logout", '', this.makeOptions ())} private makeOptions (): RequestOptions {let headers = new Headers ({'Content-Type': 'application / json'}); vratiti nove RequestOptions ({zaglavlja: zaglavlja}); }}

    U ovoj klasi ubrizgavamo drugu ovisnost pomoću Angular-ove DI konstrukcije. Ovaj put je Http razred. Ova klasa obrađuje svu HTTP komunikaciju i pruža nam je okvir.

    Svaka od ovih metoda izvodi HTTP zahtjev pomoću HTTP biblioteke angular-a. Svaki zahtjev također navodi vrstu sadržaja u zaglavljima.

    Sada moramo učiniti još jednu stvar da bismo dobili HttpService registriran u sustavu ubrizgavanja ovisnosti. Otvori app.module.ts datoteku i pronađite svojstvo davatelja. Dodajte HttpService tom nizu. Rezultat bi trebao izgledati ovako:

    davatelji usluga: [HttpService],

    4.4. Dodaj ravnatelja

    Dalje, dodajte naš Principal DTO objekt u naš Typescript kod. U isti direktorij dodajte datoteku nazvanu "principal.ts" i dodajte ovaj kod:

    klasa izvoza Principal {javno ovjereno: boolean; tijela javne vlasti: Autoritet [] = []; javne vjerodajnice: bilo koje; konstruktor (ovjereno: logičko, ovlasti: bilo koji [], vjerodajnice: bilo koje) {this.authenticated = provjereno; powers.map (auth => this.authorities.push (novo tijelo (auth.authority))) this.credentials = vjerodajnice; } isAdmin () {return this.authorities.some ((auth: Authority) => auth.authority.indexOf ('ADMIN')> -1)}} klasa izvoza Authority {javno ovlaštenje: String; konstruktor (autoritet: String) {this.authority = organ; }}

    Dodali smo Glavni razred i an Autoritet razred. To su dvije DTO klase, slično kao POJO u proljetnoj aplikaciji. Zbog toga ove klase ne trebamo registrirati u DI sustav u kutnom.

    Dalje, konfigurirajmo pravilo preusmjeravanja za preusmjeravanje nepoznatih zahtjeva u korijen naše aplikacije.

    4.5. 404 Rukovanje

    Vratimo se natrag u Java kôd za gateway uslugu. U gdje GatewayApplication klasa prebiva dodati novu klasu pod nazivom ErrorPageConfig:

    @Component javna klasa ErrorPageConfig implementira ErrorPageRegistrar {@Override public void registerErrorPages (Registar ErrorPageRegistry) {registry.addErrorPages (nova ErrorPage (HttpStatus.NOT_FOUND, "/home/index.html"); }}

    Ova će klasa identificirati bilo koji odgovor 404 i preusmjeriti korisnika na “/Home/index.html”. U aplikaciji s jednom stranicom, na ovaj način obrađujemo sav promet koji ne ide na namjenski resurs, jer bi klijent trebao upravljati svim plovnim rutama.

    Sada smo spremni za pokretanje ove aplikacije i vidjeti što smo izgradili!

    4.6. Izrada i prikaz

    Sada pokrenite “mvn sastaviti”Iz mape pristupnika. Ovo će kompajlirati naš izvor Java i izgraditi aplikaciju Angular u javnu mapu. Pokrenimo ostale aplikacije u oblaku: konfiguracija, otkriće, i zipkin. Zatim pokrenite projekt pristupnika. Kada usluga započne, idite na // localhost: 8080 da biste vidjeli našu aplikaciju. Trebali bismo vidjeti nešto poput ovoga:

    Dalje, slijedimo vezu do stranice za prijavu:

    Prijavite se pomoću vjerodajnica korisnika / lozinke. Kliknite "Prijava" i trebali bismo biti preusmjereni na /home/index.html gdje se učitava naša jednostrana aplikacija.

    Izgleda kao naš jumbotron označava da smo prijavljeni kao korisnik! Sada se odjavite klikom na vezu u gornjem desnom kutu i prijavite se pomoću admin / admin vjerodajnice ovaj put.

    Izgleda dobro! Sada smo prijavljeni kao administrator.

    5. Zaključak

    U ovom smo članku vidjeli kako je lako integrirati aplikaciju s jednom stranicom u naš sustav u oblaku. Uzeli smo moderan okvir i integrirali radnu sigurnosnu konfiguraciju u našu aplikaciju.

    Koristeći ove primjere, pokušajte napisati neki kôd za poziv na knjiga-usluga ili rejting-usluga. Budući da sada imamo primjere upućivanja HTTP poziva i povezivanja podataka na predloške, to bi trebalo biti relativno lako.

    Ako želite vidjeti kako je ostatak web stranice izgrađen kao i uvijek, izvorni kod možete pronaći na Githubu.


    $config[zx-auto] not found$config[zx-overlay] not found