streamalism.org

1. Prehľad

V tomto tutoriáli budeme vytvárať prihlasovacia stránka pomocou Spring Security s:

• AngularJS
• Uhlové 2, 4, 5 a 6

Príklad aplikácie, o ktorej si tu povieme, pozostáva z klientskej aplikácie komunikujúcej so službou REST, zabezpečenej základnou autentifikáciou HTTP.

2. Jarná konfigurácia zabezpečenia

Najskôr si nastavíme REST API s Spring Security a Basic Auth:

Takto je nakonfigurovaný:

@Configuration @EnableWebSecurity verejná trieda BasicAuthConfiguration rozširuje WebSecurityConfigurerAdapter {@Override protected void configure (AuthenticationManagerBuilder auth) vyvolá výnimku {auth .inMemoryAuthentication () .withUser ("užívateľ") .password ("heslo") .roles ("USER") .roles ("USER") } @Override protected void configure (HttpSecurity http) vyvolá výnimku {http.csrf (). Disable () .authorizeRequests () .antMatchers ("/ login"). PermitAll () .anyRequest () .authenticated (). A () .httpBasic (); }}

Teraz vytvorme koncové body. Naša služba REST bude mať dve - jednu na prihlásenie a druhú na načítanie údajov používateľa:

@RestController @CrossOrigin verejná trieda UserController {@RequestMapping ("/ login") verejné logické prihlásenie (používateľ @RequestBody User) {return user.getUserName (). Equals ("user") && user.getPassword (). Equals ("heslo "); } @RequestMapping ("/ user") public Hlavný užívateľ (požiadavka HttpServletRequest) {String authToken = request.getHeader ("Autorizácia") .substring ("Základné" .dĺžka ()). Trim (); return () -> new String (Base64.getDecoder () .decode (authToken)). split (":") [0]; }}

Rovnako si môžete pozrieť náš ďalší návod o Spring Security OAuth2, ak máte záujem o implementáciu servera OAuth2 na autorizáciu.

3. Nastavenie uhlového klienta

Teraz, keď sme vytvorili službu REST, nastavme prihlasovaciu stránku s rôznymi verziami klienta Angular.

Príklady, ktoré tu uvidíme, sa používajú npm pre správu závislostí a nodejs na spustenie aplikácie.

Angular používa architektúru jednej stránky, kde sú všetky podradené komponenty (v našom prípade sú to prihlasovacie a domáce komponenty) vložené do spoločného nadradeného DOM.

Na rozdiel od AngularJS, ktorý používa JavaScript, od verzie Angular 2 používa ako hlavný jazyk TypeScript. Aplikácia preto vyžaduje aj určité podporné súbory, ktoré sú potrebné pre správne fungovanie.

Kvôli prírastkovým vylepšeniam Angular sa potrebné súbory líšia od verzie k verzii.

Zoznámime sa s každou z týchto možností:

• systemjs.config.js - konfigurácie systému (verzia 2)
• balíček.json - závislosti uzlových modulov (od verzie 2)
• tsconfig.json - konfigurácie strojopisu na koreňovej úrovni (od verzie 2)
• tsconfig.app.json - konfigurácie strojopisu na úrovni aplikácie (od verzie 4)
• .angular-cli.json - Uhlové konfigurácie CLI (verzia 4 a 5)
• hranatý.json - Uhlové konfigurácie CLI (verzia 6 a novšia)

4. Prihlasovacia stránka

4.1. Pomocou AngularJS

Vytvorme index.html súbor a pridajte doň príslušné závislosti:

Pretože sa jedná o jednostránkovú aplikáciu, všetky podradené komponenty sa pridajú do prvku div pomocou ng-pohlad atribút založený na smerovacej logike.

Teraz vytvorme app.js ktorý definuje URL na mapovanie komponentov:

(function () {'use strict'; angular .module ('app', ['ngRoute']) .config (config) .run (run); config. $ inject = ['$ routeProvider', '$ locationProvider' ]; funkcia config ($ routeProvider, $ locationProvider) {$ routeProvider.when ('/', {controller: 'HomeController', templateUrl: 'home / home.view.html', controllerAs: 'vm'}). when ( '/ login', {controller: 'LoginController', templateUrl: 'login / login.view.html', controllerAs: 'vm'}). inak ({redirectTo: '/ login'});} spustiť. $ inject = ['$ rootScope', '$ location', '$ http', '$ window']; spustenie funkcie ($ rootScope, $ location, $ http, $ window) {var userData = $ window.sessionStorage.getItem ('userData '); if (userData) {$ http.defaults.headers.common [' Authorization '] =' Basic '+ JSON.parse (userData) .authData;} $ rootScope. $ on (' $ locationChangeStart ', function (event) , next, current) {var limitedPage = $ .inArray ($ location.path (), ['/ login']) === -1; var logIn = $ window.sessionStorage.getItem ('userData'); if ( limitedPage &&! prihlásený) {$ location.pat h („/ prihlásenie“); }}); }}) ();

Prihlasovací komponent sa skladá z dvoch súborov, login.controller.jsa login.view.html.

Pozrime sa na prvý:

Prihlásiť sa
 Užívateľské meno Užívateľské meno je vyžadované Heslo Heslo je vyžadované Prihlásenie 

a druhá:

(function () {'use strict'; angular .module ('app') .controller ('LoginController', LoginController); LoginController. $ inject = ['$ location', '$ window', '$ http']; funkcia LoginController ($ location, $ window, $ http) {var vm = this; vm.login = login; (function initController () {$ window.localStorage.setItem ('token', '');}) (); function login () {$ http ({url: '// localhost: 8082 / login', method: "POST", data: {'userName': vm.username, 'password': vm.password}}) then (function (response) {if (response.data) {var token = $ window.btoa (vm.username + ':' + vm.password); var userData = {userName: vm.username, authData: token} $ window .sessionStorage.setItem ('userData', JSON.stringify (userData)); $ http.defaults.headers.common ['Authorization'] = 'Základné' + token; $ location.path ('/');} else { alert ("Overenie zlyhalo.")}});};}}) ();

Ovládač vyvolá službu REST zadaním používateľského mena a hesla. Po úspešnej autentifikácii zakóduje používateľské meno a heslo a uloží zakódovaný token do úložiska relácie pre ďalšie použitie.

Podobne ako prihlasovací komponent, aj domáci komponent sa skladá z dvoch súborov, home.view.html:

Ste prihlásený !!
Odhlásiť sa

a home.controller.js:

(function () {'use strict'; angular .module ('app') .controller ('HomeController', HomeController); HomeController. $ inject = ['$ window', '$ http', '$ scope']; funkcia HomeController ($ window, $ http, $ scope) {var vm = this; vm.user = null; initController (); function initController () {$ http ({url: '// localhost: 8082 / user', method : "GET"}). Then (function (response) {vm.user = response.data.name;}, function (error) {console.log (error);});}; $ scope.logout = function ( ) {$ window.sessionStorage.setItem ('userData', ''); $ http.defaults.headers.common ['Authorization'] = 'Základné';}}})) ();

Domový radič vyžiada údaje o užívateľovi odovzdaním Povolenie hlavička. Naša služba REST vráti údaje používateľa iba v prípade, že je token platný.

Teraz poďme inštalovať http-server pre spustenie aplikácie Angular:

NPM nainštaluje http-server - uložiť

Po nainštalovaní môžeme v príkazovom riadku otvoriť koreňový priečinok projektu a vykonať príkaz:

http-server -o

4.2. Používanie uhlovej verzie 2, 4, 5

The index.html vo verzii 2 sa mierne líši od verzie AngularJS:

         System.import ('app'). Catch (function (err) {console.error (err);}); Načítava... 

The main.ts je hlavným vstupným bodom aplikácie. Zavádza aplikačný modul a vo výsledku prehľadávač načíta prihlasovaciu stránku:

platformBrowserDynamic (). bootstrapModule (AppModule);

The app.routing.ts je zodpovedný za smerovanie aplikácií:

const appRoutes: Routes = [{cesta: '', komponent: HomeComponent}, {cesta: 'login', komponent: LoginComponent}, {cesta: '**', redirectTo: ''}]; export const routing = RouterModule.forRoot (appRoutes);

The app.module.ts deklaruje komponenty a importuje príslušné moduly:

@NgModule ({importuje: [BrowserModule, FormsModule, HttpModule, smerovanie], deklarácie: [AppComponent, HomeComponent, LoginComponent], bootstrap: [AppComponent]}) exportná trieda AppModule {}

Pretože vytvárame jednostránkovú aplikáciu, vytvorme koreňový komponent, ktorý doň pridá všetky podradené komponenty:

@Component ({selector: 'app-root', templateUrl: './app.component.html'}) exportná trieda AppComponent {}

The app.component.html bude mať iba a značka. Angular používa túto značku pre svoj mechanizmus smerovania polohy.

Teraz vytvorme prihlasovací komponent a jeho zodpovedajúcu šablónu v login.component.ts:

@Component ({selector: 'login', templateUrl: './app/login/login.component.html'}) exportná trieda LoginComponent implementuje OnInit {model: any = {}; konštruktér (súkromná trasa: ActivatedRoute, súkromný smerovač: smerovač, súkromný http: Http) {} ngOnInit () {sessionStorage.setItem ('token', '')); } login () {let url = '// localhost: 8082 / login'; let result = this.http.post (url, {userName: this.model.username, password: this.model.password}). map (res => res.json ()). subscribe (isValid => {if ( isValid) {sessionStorage.setItem ('token', btoa (this.model.username + ':' + this.model.password)); this.router.navigate (['']);} else {alert ("Overenie zlyhalo. ");}}); }}

Na záver sa pozrime na login.component.html:

 Užívateľské meno Užívateľské meno je vyžadované Heslo Heslo je vyžadované Prihlásenie 

4.3. Používanie Angular 6

Tím Angular urobil niektoré vylepšenia vo verzii 6. Kvôli týmto zmenám bude náš príklad tiež trochu odlišný od ostatných verzií. Jedinou zmenou v našom príklade, pokiaľ ide o verziu 6, je časť volajúca službu.

Namiesto HttpModule, importuje sa verzia 6 HttpClientModule od@ uhlové / bežné / http.

Časť volajúca službu sa tiež bude trochu líšiť od starších verzií:

this.http.post(url, {userName: this.model.username, heslo: this.model.password}). subscribe (isValid => {if (isValid) {sessionStorage.setItem ('token', btoa (this.model.username + ') : '+ this.model.password)); this.router.navigate ([' ']);} else {alert ("Overenie zlyhalo.")}});

5. Záver

Naučili sme sa, ako implementovať prihlasovaciu stránku Spring Security s Angular. Od verzie 4 môžeme pre ľahký vývoj a testovanie využívať projekt Angular CLI.

Ako vždy všetky príklady, o ktorých sme tu hovorili, nájdete v projekte GitHub.