Proljetna sigurnosna stranica za prijavu s kutnim

1. Pregled

U ovom uputstvu stvorit ćemo stranica za prijavu koristeći Spring Security sa:

  • KutniJS
  • Kutni 2, 4, 5 i 6

Primjer aplikacije o kojem ćemo ovdje razgovarati sastoji se od klijentske aplikacije koja komunicira s REST uslugom, zaštićena osnovnom HTTP autentifikacijom.

2. Proljetna sigurnosna konfiguracija

Prije svega, postavimo REST API s Spring Security i Basic Auth:

Evo kako je konfigurirano:

@Configuration @EnableWebSecurity javna klasa BasicAuthConfiguration proširuje WebSecurityConfigurerAdapter {@Override zaštićena void konfiguracija (AuthenticationManagerBuilder auth) baca izuzetak {auth .inMemoryAuthentication () .withUser ("user"). "Lozinka" "." US "." } @Override zaštićena void konfiguracija (HttpSecurity http) baca izuzetak {http.csrf (). Disable () .authorizeRequests () .antMatchers ("/ login"). AllowAll () .anyRequest () .authenticated () .and () .httpBasic (); }}

Sada kreirajmo krajnje točke. Naša REST usluga imat će dva - jedan za prijavu i drugi za dohvat korisničkih podataka:

@RestController @CrossOrigin javna klasa UserController {@RequestMapping ("/ login") javna logička prijava (@RequestBody User user) {return user.getUserName (). Equals ("user") && user.getPassword (). Equals ("lozinka "); } @RequestMapping ("/ user") javni glavni korisnik (HttpServletRequest zahtjev) {String authToken = request.getHeader ("Autorizacija") .substring ("Basic" .length ()). Trim (); return () -> novi niz (Base64.getDecoder () .decode (authToken)). split (":") [0]; }}

Isto tako, možete pogledati i naš drugi vodič o Spring Security OAuth2 ako ste zainteresirani za implementaciju OAuth2 poslužitelja za autorizaciju.

3. Postavljanje kutnog klijenta

Sad kad smo stvorili REST uslugu, postavimo stranicu za prijavu s različitim verzijama klijenta Angular.

Primjeri koje ćemo ovdje vidjeti koriste se npm za upravljanje ovisnostima i nodejs za pokretanje aplikacije.

Angular koristi arhitekturu s jednom stranicom gdje se sve podređene komponente (u našem slučaju to su komponente za prijavu i dom) ubrizgavaju u zajednički nadređeni DOM.

Za razliku od AngularJS, koji koristi JavaScript, Angular verzija 2 nadalje koristi TypeScript kao svoj glavni jezik. Stoga aplikacija također zahtijeva određene podržavajuće datoteke potrebne za njezin ispravan rad.

Zbog dodatnih poboljšanja programa Angular, potrebne se datoteke razlikuju od verzije do verzije.

Upoznajmo se sa svakim od sljedećeg:

  • systemjs.config.js - konfiguracije sustava (verzija 2)
  • paket.json - ovisnosti modula čvora (verzija 2 nadalje)
  • tsconfig.json - konfiguracije Typescripta na osnovnoj razini (verzija 2 nadalje)
  • tsconfig.app.json - konfiguracije Typescripta na razini aplikacije (verzija 4 nadalje)
  • .kutni-cli.json - Kutne CLI konfiguracije (inačice 4 i 5)
  • kutni.json - Kutne CLI konfiguracije (verzija 6 nadalje)

4. Stranica za prijavu

4.1. Korištenje AngularJS

Stvorimo index.html datoteku i dodajte joj relevantne ovisnosti:

Budući da je ovo aplikacija na jednoj stranici, sve podređene komponente bit će dodane u element div pomoću ng-pogled atribut na temelju logike usmjeravanja.

Ajmo sada stvoriti app.js koji definira URL za mapiranje komponenata:

(function () {'use strict'; angular .module ('app', ['ngRoute']) .config (config) .run (run); config. $ inject = ['$ routeProvider', '$ locationProvider' ]; funkcija konfiguracije ($ routeProvider, $ locationProvider) {$ routeProvider.when ('/', {kontroler: 'HomeController', templateUrl: 'home / home.view.html', controllerAs: 'vm'}). when ( '/ login', {kontroler: 'LoginController', templateUrl: 'login / login.view.html', controllerAs: 'vm'}). u suprotnom ({redirectTo: '/ login'});}} run. $ inject = ['$ rootScope', '$ location', '$ http', '$ window']; pokretanje funkcije ($ rootScope, $ location, $ http, $ window) {var userData = $ window.sessionStorage.getItem ('userData '); if (userData) {$ http.defaults.headers.common [' Autorizacija '] =' Basic '+ JSON.parse (userData) .authData;} $ rootScope. $ on (' $ locationChangeStart ', funkcija (događaj , sljedeća, trenutna) {var restrictedPage = $ .inArray ($ location.path (), ['/ login']) === -1; var loggedIn = $ window.sessionStorage.getItem ('userData'); if ( restrictedPage &&! loggedIn) {$ location.pat h ('/ prijava'); }}); }}) ();

Komponenta za prijavu sastoji se od dvije datoteke, login.controller.js, i login.view.html.

Pogledajmo prvi:

Prijaviti se

Korisničko ime Korisničko ime je potrebno Lozinka je potrebno Lozinka Prijava

i drugi:

(function () {'use strict'; angular .module ('app') .controller ('LoginController', LoginController); LoginController. $ inject = ['$ location', '$ window', '$ http']; funkcija LoginController ($ location, $ window, $ http) {var vm = this; vm.login = login; (funkcija initController () {$ window.localStorage.setItem ('token', '');}) (); login login () {$ http ({url: '// localhost: 8082 / login', method: "POST", data: {'userName': vm.username, 'password': vm.password}}). (funkcija (odgovor) {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'] = 'Basic' + token; $ location.path ('/');} else { alert ("Autentifikacija nije uspjela.")}});};}}) ();

Upravljač će pozvati REST uslugu prosljeđivanjem korisničkog imena i lozinke. Nakon uspješne provjere autentičnosti kodirat će korisničko ime i lozinku i pohraniti kodirani token u pohranu sesije za buduću upotrebu.

Slično komponenti za prijavu, komponenta kuće također se sastoji od dvije datoteke, home.view.html:

Prijavljeni ste !!

Odjavite se

i home.controller.js:

(function () {'use strict'; angular .module ('app') .controller ('HomeController', HomeController); HomeController. $ inject = ['$ window', '$ http', '$ scope']; funkcija HomeController ($ window, $ http, $ scope) {var vm = this; vm.user = null; initController (); function initController () {$ http ({url: '// localhost: 8082 / user', method : "GET"}). Zatim (funkcija (odgovor) {vm.user = response.data.name;}, funkcija (pogreška) {console.log (pogreška);});}; $ scope.logout = function ( ) {$ window.sessionStorage.setItem ('userData', ''); $ http.defaults.headers.common ['Autorizacija'] = 'Osnovno';}}}) ();

Kućni kontroler će zatražiti korisničke podatke prosljeđujući Ovlaštenje Zaglavlje. Naša usluga REST vratit će korisničke podatke samo ako je token valjan.

Ajmo sada instalirati http-poslužitelj za pokretanje aplikacije Angular:

npm instalirati http-poslužitelj --save

Nakon što se ovo instalira, možemo otvoriti korijensku mapu projekta u naredbenom retku i izvršiti naredbu:

http-poslužitelj -o

4.2. Korištenje kutne verzije 2, 4, 5

The index.html u verziji 2 malo se razlikuje od verzije AngularJS:

         System.import ('app'). Catch (function (err) {console.error (err);}); Učitavam... 

The glavni.ts je glavna ulazna točka prijave. Pokreće aplikacijski modul i kao rezultat toga preglednik učitava stranicu za prijavu:

platformBrowserDynamic (). bootstrapModule (AppModule);

The app.routing.ts odgovoran je za usmjeravanje aplikacija:

const appRoutes: Routes = [{put: '', komponenta: HomeComponent}, {path: 'login', komponenta: LoginComponent}, {path: '**', redirectTo: ''}]; izvoz const usmjeravanja = RouterModule.forRoot (appRoutes);

The app.module.ts deklarira komponente i uvozi relevantne module:

@NgModule ({import: [BrowserModule, FormsModule, HttpModule, usmjeravanje], deklaracije: [AppComponent, HomeComponent, LoginComponent], bootstrap: [AppComponent]}) klasa izvoza AppModule {}

Budući da stvaramo aplikaciju s jednom stranicom, stvorimo root komponentu koja joj dodaje sve podređene komponente:

@Component ({selector: 'app-root', templateUrl: './app.component.html'}) klasa izvoza AppComponent {}

The app.component.html imat će samo a označiti. Angular koristi ovu oznaku za svoj mehanizam usmjeravanja lokacije.

Sada stvorimo komponentu za prijavu i odgovarajući predložak u login.component.ts:

@Component ({selector: 'login', templateUrl: './app/login/login.component.html'}) klasa izvoza LoginComponent implementira OnInit {model: any = {}; konstruktor (privatna ruta: ActivatedRoute, privatni usmjerivač: usmjerivač, privatni http: Http) {} ngOnInit () {sessionStorage.setItem ('token', ''); } login () {neka url = '// localhost: 8082 / login'; neka rezultat = this.http.post (url, {userName: this.model.username, lozinka: this.model.password}). map (res => res.json ()). pretplatite se (isValid => {if ( isValid) {sessionStorage.setItem ('token', btoa (this.model.username + ':' + this.model.password)); this.router.navigate (['']);} else {alert ("Autentifikacija neuspjeh."); } }); }}

Napokon, pogledajmo login.component.html:

 Korisničko ime Korisničko ime je potrebno Lozinka je potrebno Lozinka Prijava 

4.3. Korištenje Kutnog 6

Angular tim izvršio je neka poboljšanja u verziji 6. Zbog ovih promjena naš će se primjer također malo razlikovati u odnosu na druge verzije. Jedina promjena koju imamo u našem primjeru u odnosu na verziju 6 je u dijelu pozivanja usluge.

Umjesto HttpModule, verzija 6 se uvozi HttpClientModule iz@ kutna / uobičajena / http.

Dio pozivanja usluge također će se malo razlikovati od starijih verzija:

ovo.http.post(url, {userName: this.model.username, lozinka: this.model.password}). pretplatite se (isValid => {if (isValid) {sessionStorage.setItem ('token', btoa (this.model.username + ' : '+ this.model.password)); this.router.navigate ([' ']);} else {upozorenje ("Autentifikacija nije uspjela.")}});

5. Zaključak

Naučili smo kako implementirati stranicu za prijavu Spring Security s Angulom. Od verzije 4 nadalje, možemo koristiti projekt Angular CLI za lakši razvoj i testiranje.

Kao i uvijek svi primjeri o kojima smo ovdje razgovarali mogu se naći u projektu GitHub.


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