Spring Cloud - Tilføjelse af kantet 4

1. Oversigt

I vores sidste Spring Cloud-artikel tilføjede vi Zipkin-support i vores applikation. I denne artikel vil vi tilføje en front-end-applikation til vores stack.

Indtil nu har vi arbejdet udelukkende på bagenden for at opbygge vores skyapplikation. Men hvad nytter det med en webapp, hvis der ikke er noget brugergrænseflade? I denne artikel skal vi løse dette problem ved at integrere en enkelt sideapplikation i vores projekt.

Vi skriver denne app ved hjælp af Vinklet og Bootstrap. Stilen med Angular 4-kode føles meget som at kode en Spring-app, som er en naturlig crossover for en Spring-udvikler! Mens frontend-koden bruger Angular, kan indholdet af denne artikel let udvides til enhver frontend-ramme med minimal indsats.

I denne artikel skal vi bygge en Angular 4-app og forbinde den til vores skytjenester. Vi vil demonstrere, hvordan man integrerer login mellem et SPA og Spring Security. Vi viser også, hvordan du får adgang til vores applikations data ved hjælp af Angular's support til HTTP-kommunikation.

2. Gatewayændringer

Med frontend på plads skifter vi til formbaseret login og sikre dele af brugergrænsefladen til privilegerede brugere. Dette kræver ændringer i vores gateway-sikkerhedskonfiguration.

2.1. Opdatering HttpSikkerhed

Lad os først opdatere konfigurer (HttpSecurity http) metode i vores gateway SecurityConfig.java klasse:

@ Override beskyttet ugyldig konfiguration (HttpSecurity http) {http .formLogin () .defaultSuccessUrl ("/ home / index.html", true) .and () .authorizeRequests () .antMatchers ("/ book-service / **", "/ rating-service / **", "/ login *", "/") .permitAll () .antMatchers ("/ eureka / **"). hasRole ("ADMIN") .anyRequest (). godkendt () .og () .logout () .og () .csrf () deaktiver (); }

Først tilføjer vi en standard-succes-URL til at pege på /home/index.html da dette vil være hvor vores kantede app bor. Dernæst konfigurerer vi myrematcherne til at tillade enhver anmodning gennem gatewayen undtagen Eureka ressourcer. Dette vil delegere alle sikkerhedskontroller til back-end-tjenester.

Dernæst fjernede vi URL-en til succes for logout, da standard omdirigering tilbage til login-siden fungerer fint.

2.2. Tilføj et hovedendepunkt

Lad os derefter tilføje et slutpunkt for at returnere den godkendte bruger. Dette vil blive brugt i vores Angular-app til at logge ind og identificere de roller, vores bruger har. Dette hjælper os med at kontrollere, hvilke handlinger de kan udføre på vores websted.

I gateway-projektet skal du tilføje en AuthenticationController klasse:

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

Controlleren returnerer det aktuelt loggede brugerobjekt til den, der ringer op. Dette giver os alle de oplysninger, vi har brug for til at kontrollere vores Angular-app.

2.3. Tilføj en destinationsside

Lad os tilføje en meget enkel destinationsside, så brugerne ser noget, når de går til roden af ​​vores applikation.

I src / main / ressourcer / statisk, lad os tilføje en index.html fil med et link til login-siden:

    Book Rater Landing 

Så mange gode ting ved bøgerne

Log på

3. Vinklet CLI og startprojektet

Inden du starter et nyt Angular-projekt, skal du sørge for at installere de nyeste versioner af Node.js og npm.

3.1. Installer den kantede CLI

For at begynde med bliver vi nødt til at bruge npm for at downloade og installere Angular-kommandolinjegrænsefladen. Åbn en terminal og kør:

npm install -g @ vinkel / cli

Dette downloader og installerer CLI globalt.

3.2. Installer et nyt projekt

Mens du stadig er i terminalen, skal du navigere til gateway-projektet og gå ind i gateway / src / hovedmappen. Opret en mappe kaldet "kantet" og naviger til den. Herfra løber:

ng ny brugergrænseflade

Vær tålmodig; CLI opretter et helt nyt projekt og downloader alle JavaScript-afhængigheder med npm. Det er ikke ualmindeligt, at denne proces tager mange minutter.

Det ng kommandoen er genvejen til Angular CLI, ny parameter instruerer, at CLI skal oprette et nyt projekt, og ui kommando giver vores projekt et navn.

3.3. Kør projektet

En gang ny kommandoen er komplet. Naviger til ui mappe, der blev oprettet og kørt:

ng server

Når projektet er bygget, skal du navigere til // localhost: 4200. Vi skal se dette i browseren:

Tillykke! Vi har lige bygget en vinkelapp!

3.4. Installer Bootstrap

Lad os bruge npm til at installere bootstrap. Kør denne kommando fra ui-biblioteket:

npm install [email protected] - gem

Dette downloader bootstrap til mappen node_modules.

I ui bibliotek, skal du åbne .angular-cli.json fil. Dette er den fil, der konfigurerer nogle egenskaber om vores projekt. Find apps> stilarter egenskab og tilføj en filplacering i vores Bootstrap CSS-klasse:

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

Dette vil instruere Angular til at inkludere Bootstrap i den kompilerede CSS-fil, der er bygget sammen med projektet.

3.5. Indstil telefonbogen for udgangsudstyr

Dernæst skal vi fortælle Angular, hvor build-filerne skal placeres, så vores spring-boot-app kan tjene dem. Spring Boot kan servere filer fra to placeringer i ressourcemappen:

  • src / main / ressourcer / statisk
  • src / main / resource / public

Da vi allerede bruger den statiske mappe til at tjene nogle ressourcer til Eureka, og Angular sletter denne mappe hver gang en build køres, lad os bygge vores Angular-app i den offentlige mappe.

Åbn .angular-cli.json fil igen og find apps> outDir ejendom. Opdater det snor:

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

Hvis Angular-projektet er placeret i src / main / angular / ui, vil det bygge til mappen src / main / resources / public. Hvis appen i en anden mappe skal denne streng ændres for at indstille placeringen korrekt.

3.6. Automatiser Byg med Maven

Endelig opretter vi en automatiseret build, der skal køre, når vi kompilerer vores kode. Denne myreopgave kører Angular CLI build-opgaven, når "mvn compile" køres. Tilføj dette trin til gatewayens POM.xml for at sikre, at hver gang vi kompilerer, får vi de seneste ui-ændringer:

 maven-antrun-plugin generere ressourcer køre 

Vi skal bemærke, at denne opsætning kræver, at Angular CLI er tilgængelig på klassestien. At skubbe dette script til et miljø, der ikke har den afhængighed, vil resultere i byggefejl.

Lad os nu begynde at opbygge vores Angular-applikation!

4. Vinklet

I dette afsnit af selvstudiet bygger vi en godkendelsesmekanisme på vores side. Vi bruger grundlæggende godkendelse og følger et simpelt flow for at få det til at fungere.

Brugere har en loginformular, hvor de kan indtaste deres brugernavn og adgangskode.

Dernæst bruger vi deres legitimationsoplysninger til at oprette et base64-godkendelsestoken og anmode om "/mig" slutpunkt. Slutpunktet returnerer a Rektor objekt, der indeholder rollerne for denne bruger.

Endelig gemmer vi legitimationsoplysningerne og hovedmanden på klienten, der skal bruges i efterfølgende anmodninger.

Lad os se, hvordan dette er gjort!

4.1. Skabelon

Naviger til i gateway-projektet src / main / vinkel / ui / src / app og åbn app.component.html fil. Dette er den første skabelon, som Angular indlæser og vil være, hvor vores brugere lander efter at have logget ind.

Herinde vil vi tilføje noget kode for at få vist en navigationslinje med en loginformular:

    Book Rater Admin 
    Log ud

    Alle kan se bøgerne.

    Brugere kan se og oprette ratings

    Administratorer kan gøre hvad som helst!

    Denne kode opretter en navigationslinje med Bootstrap-klasser. Indbygget i linjen er en integreret loginformular. Angular bruger denne markering til at interagere med JavaScript dynamisk for at gengive forskellige dele af siden og kontrollere ting som formularindsendelse.

    Erklæringer som (ngSubmit) = ”onLogin (f)” Du skal blot angive, at når metoden er sendt, skal du ringe til metoden “OnLogin (f)” og videregive formularen til den funktion. Indenfor jumbotron div, vi har afsnitstags, der vises dynamisk afhængigt af tilstanden for vores hovedobjekt.

    Lad os derefter kode op Typescript-filen, der understøtter denne skabelon.

    4.2. Typeskrift

    Åbn filen app.component.ts fra samme bibliotek. I denne fil vil vi tilføje alle de typeskriftegenskaber og -metoder, der kræves for at gøre vores skabelonfunktion:

    importer {Component} fra "@ vinkel / kerne"; importer {Principal} fra "./principal"; importer {Response} fra "@ angular / http"; importer {Book} fra "./book"; importer {HttpService} fra "./http.service"; @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksportklasse AppComponent {valgt Bog: Bog = null; princip: Principal = ny Principal (falsk, []); loginFailed: boolsk = falsk; konstruktør (privat httpService: HttpService) {} ngOnInit (): ugyldig {this.httpService.me (). abonner ((svar: Svar) => {lad principJson = svar.json (); denne.principal = ny rektor (hovedJson) .authenticated, principalJson.authorities);}, (error) => {console.log (error);}); } onLogout () {this.httpService.logout (). abonner ((respons: Response) => {if (response.status === 200) {this.loginFailed = false; this.principal = new Principal (false, [ ]); window.location.replace (response.url);}}, (error) => {console.log (error);}); }}

    Denne klasse hænger ind i Angular livscyklusmetoden, ngOnInit (). I denne metode kalder vi /mig slutpunkt for at få brugerens aktuelle rolle og tilstand. Dette bestemmer, hvad brugeren ser på hovedsiden. Denne metode vil blive affyret, når denne komponent oprettes, hvilket er et godt tidspunkt at kontrollere brugerens egenskaber for tilladelser i vores app.

    Vi har også en onLogout () metode, der logger vores bruger ud og gendanner tilstanden på denne side til dens oprindelige indstillinger.

    Der foregår dog noget magi her. Det httpService ejendom, der er angivet i konstruktøren. Angular injicerer denne ejendom i vores klasse ved kørsel. Angular administrerer enkelte forekomster af serviceklasser og injicerer dem ved hjælp af konstruktionsinjektion, ligesom Spring!

    Dernæst skal vi definere HttpService klasse.

    4.3. HttpService

    Opret en fil med samme navn i samme bibliotek “Http.service.ts”. I denne fil skal du tilføje denne kode for at understøtte login- og logoutmetoderne:

    importer {Injectable} fra "@ vinkel / kerne"; importer {Observable} fra "rxjs"; importer {Response, Http, Headers, RequestOptions} fra "@ angular / http"; importer {Book} fra "./book"; importer {Rating} fra "./rating"; @Injectable () eksportklasse HttpService {konstruktør (privat http: Http) {} mig (): Observerbar {returner this.http.get ("/ mig", this.makeOptions ())} logout (): Observerbar {returner dette .http.post ("/ logout", '', this.makeOptions ())} private makeOptions (): RequestOptions {let headers = new Headers ({'Content-Type': 'application / json'}); returner nye RequestOptions ({headers: headers}); }}

    I denne klasse injicerer vi en anden afhængighed ved hjælp af Angular's DI-konstruktion. Denne gang er det Http klasse. Denne klasse håndterer al HTTP-kommunikation og leveres til os af rammen.

    Disse metoder udfører hver en HTTP-anmodning ved hjælp af angular's HTTP-bibliotek. Hver anmodning specificerer også en indholdstype i overskrifterne.

    Nu er vi nødt til at gøre en ting mere for at få HttpService registreret i afhængighedsindsprøjtningssystemet. Åbn app.module.ts fil og find udbyderens ejendom. Tilføj HttpService til den matrix. Resultatet skal se sådan ud:

    udbydere: [HttpService],

    4.4. Tilføj rektor

    Lad os derefter tilføje vores Principal DTO-objekt i vores Typescript-kode. I den samme mappe skal du tilføje en fil kaldet “principal.ts” og tilføje denne kode:

    eksportklasse Principal {offentligt godkendt: boolsk; offentlige myndigheder: Myndighed [] = []; offentlige legitimationsoplysninger: enhver; konstruktør (godkendt: boolsk, autoriteter: enhver [], legitimationsoplysninger: enhver) {this.authenticated = godkendt; autoriteter.map (auth => this.authorities.push (ny autoritet (auth.authority))) this.credentials = legitimationsoplysninger; } isAdmin () {returner this.authorities.some ((auth: Authority) => auth.authority.indexOf ('ADMIN')> -1)}} eksportklasse Authority {public Authority: String; konstruktør (autoritet: String) {denne.autoritet = autoritet; }}

    Vi tilføjede Rektor klasse og en Myndighed klasse. Dette er to DTO-klasser, ligesom POJO'er i en Spring-app. På grund af det behøver vi ikke at registrere disse klasser med DI-systemet i vinkel.

    Lad os derefter konfigurere en omdirigeringsregel til at omdirigere ukendte anmodninger til roden af ​​vores applikation.

    4.5. 404 Håndtering

    Lad os navigere tilbage i Java-koden til gatewaytjenesten. I hvor GatewayApplication klasse bor tilføj en ny klasse kaldet ErrorPageConfig:

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

    Denne klasse identificerer ethvert 404-svar og omdirigerer brugeren til “/Home/index.html”. I en enkelt side app er det sådan, vi håndterer al trafik, der ikke går til en dedikeret ressource, da klienten skal håndtere alle navigerbare ruter.

    Nu er vi klar til at skyde denne app op og se, hvad vi byggede!

    4.6. Byg og se

    Kør nu “mvn kompilere”Fra gateway-mappen. Dette vil kompilere vores java-kilde og bygge Angular-appen til den offentlige mappe. Lad os starte de andre skyapplikationer: config, opdagelseog zipkin. Kør derefter gateway-projektet. Når tjenesten starter, skal du navigere til // localhost: 8080 for at se vores app. Vi skulle se noget som dette:

    Lad os derefter følge linket til login-siden:

    Log ind ved hjælp af bruger- / adgangskodeoplysningerne. Klik på "Login", så omdirigeres vi til /home/index.html, hvor vores app til en enkelt side indlæses.

    Det ligner vores jumbotron angiver, at vi er logget ind som bruger! Log nu ud ved at klikke på linket i øverste højre hjørne, og log ind med admin / admin legitimationsoplysninger denne gang.

    Ser godt ud! Nu er vi logget ind som administrator.

    5. Konklusion

    I denne artikel har vi set, hvor let det er at integrere en enkelt-sideapp i vores cloud-system. Vi tog en moderne ramme og integrerede en fungerende sikkerhedskonfiguration i vores applikation.

    Brug disse eksempler til at prøve at skrive en kode for at ringe til bog-service eller rating-service. Da vi nu har eksempler på at foretage HTTP-opkald og ledningsdata til skabelonerne, skal dette være relativt let.

    Hvis du gerne vil se, hvordan resten af ​​webstedet er bygget som altid, kan du finde kildekoden på Github.


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