streamalism.org

1. Áttekintés

Ebben az oktatóanyagban létrehozunk egy bejelentkezési oldal a Spring Security segítségével:

• SzögletesJS
• 2., 4., 5. és 6. szög

A példaalkalmazás, amelyet itt megvitatunk, egy kliens alkalmazásból áll, amely kommunikál a REST szolgáltatással, alap HTTP-hitelesítéssel biztosított.

2. Tavaszi biztonsági konfiguráció

Először állítsuk be a REST API-t a Spring Security és az Basic Auth segítségével:

Így van konfigurálva:

@Configuration @EnableWebSecurity nyilvános osztály A BasicAuthConfiguration kiterjeszti a WebSecurityConfigurerAdapter {@Orride védett érvénytelen konfigurációt (AuthenticationManagerBuilder auth) a {Exc. } A @Orride védett void konfiguráció (HttpSecurity http) dobja a {http.csrf (). Kivételt .httpBasic (); }}

Most hozzuk létre a végpontokat. A REST szolgáltatásunk kettővel rendelkezik - az egyik a bejelentkezéshez, a másik pedig a felhasználói adatok beolvasásához:

@RestController @CrossOrigin public class UserController {@RequestMapping ("/ login") public boolean login (@RequestBody User user) {return user.getUserName (). Egyenlő ("user") && user.getPassword (). Egyenlő ("jelszó" "); } @RequestMapping ("/ user") public Fő felhasználó (HttpServletRequest kérés) {String authToken = request.getHeader ("Engedélyezés") .substring ("Basic" .length ()). Trim (); return () -> új karakterlánc (Base64.getDecoder () .decode (authToken)). split (":") [0]; }}

Hasonlóképpen, tekintse meg a Spring Security OAuth2-ről szóló másik oktatóanyagunkat is, ha érdekel egy OAuth2-kiszolgáló hitelesítése.

3. Az Angular Client beállítása

Most, hogy létrehoztuk a REST szolgáltatást, állítsuk be a bejelentkezési oldalt az Angular kliens különböző verzióival.

Az itt látni kívánt példák felhasználásra kerülnek npm a függőség kezelésére és nodejs az alkalmazás futtatásához.

Az Angular egyoldalas architektúrát használ, ahol az összes gyermekkomponentust (esetünkben bejelentkezési és otthoni komponenseket) egy közös szülő DOM-ba injektálják.

A Java-t használó AngularJS-től eltérően az Angular 2-es verziótól kezdve a TypeScript-et használja fő nyelvként. Ezért az alkalmazás bizonyos támogató fájlokat is igényel, amelyek szükségesek a megfelelő működéshez.

Az Angular növekményes fejlesztései miatt a szükséges fájlok verzióról verzióra különböznek.

Ismerkedjünk meg ezek mindegyikével:

• systemjs.config.js - rendszerkonfigurációk (2. verzió)
• csomag.json - csomópont modul-függőségek (2. verziótól kezdve)
• tsconfig.json - gyökérszintű gépiratok konfigurációi (2. verziótól kezdve)
• tsconfig.app.json - alkalmazásszintű tipográfiai konfigurációk (4-es verziótól kezdve)
• .szögletes-cli.json - Szögletes CLI konfigurációk (4. és 5. verzió)
• szögletes.json - Szögletes CLI konfigurációk (6. verziótól kezdve)

4. Bejelentkezés oldal

4.1. Az AngularJS használatával

Hozzuk létre a index.html fájlt, és adja hozzá a releváns függőségeket:

Mivel ez egyoldalas alkalmazás, az összes gyermekkomponens hozzáadódik a div elemhez a -val ng-view attribútum az útválasztási logika alapján.

Most hozzuk létre a app.js amely meghatározza az összetevők leképezésének URL-jét:

(function () {'use strict'; szögletes .module ('app', ['ngRoute']) .config (config) .run (run); config. $ inject = ['$ routeProvider', '$ locationProvider' ]; function config ($ routeProvider, $ locationProvider) {$ routeProvider.when ('/', {controller: 'HomeController', templateUrl: 'home / home.view.html', controllerAs: 'vm'}). mikor ( '/ login', {controller: 'LoginController', templateUrl: 'login / login.view.html', controllerAs: 'vm'}). különben ({redirectTo: '/ login'});} run. $ inject = ['$ rootScope', '$ location', '$ http', '$ window']; függvény futtatása ($ 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 (esemény , következő, aktuális) {var limitedPage = $ .inArray ($ location.path (), ['/ login']) === -1; var loggedIn = $ window.sessionStorage.getItem ('userData'); if ( limitedPage &&! loggedIn) {$ location.pat h ('/ login'); }}); }}) ();

A bejelentkezési komponens két fájlból áll, a login.controller.js, és a login.view.html.

Nézzük az elsőt:

Belépés
 Felhasználónév Felhasználónév szükséges Jelszó Jelszó szükséges Jelentkezzen be 

a második pedig:

(function () {'use strict'; szögletes .module ('app') .controller ('LoginController', LoginController); LoginController. $ inject = ['$ location', '$ window', '$ http']; függvény LoginController ($ location, $ window, $ http) {var vm = this; vm.login = login; (function initController () {$ window.localStorage.setItem ('token', '');}) (); függvény bejelentkezés () {$ http ({url: '// localhost: 8082 / login', módszer: "POST", adatok: {'felhasználónév ": vm.felhasználónév,' jelszó ': vm.jelszó}}). (függvény (válasz) {if (válasz.adatok) {var token = $ window.btoa (vm.felhasználónév + ':' + vm.jelszó); var userData = {felhasználónév: vm.felhasználónév, authData: token} $ ablak .sessionStorage.setItem ('userData', JSON.stringify (userData)); $ http.defaults.headers.common ['Authorization'] = 'Basic' + token; $ location.path ('/');} else { figyelmeztetés ("A hitelesítés nem sikerült.")}});};}}) ();

A vezérlő a felhasználónév és jelszó átadásával hívja meg a REST szolgáltatást. A sikeres hitelesítést követően kódolja a felhasználónevet és a jelszót, és a kódolt tokent a munkamenet-tárolóban tárolja későbbi felhasználásra.

A bejelentkezési összetevőhöz hasonlóan az otthoni összetevő is két fájlból áll, a home.view.html:

Be van jelentkezve !!
Kijelentkezés

és a home.controller.js:

(function () {'use strict'; szögletes .module ('app') .controller ('HomeController', HomeController); HomeController. $ inject = ['$ window', '$ http', '$ hatókör']; function HomeController ($ ablak, $ http, $ hatókör) {var vm = this; vm.user = null; initController (); function initController () {$ http ({url: '// localhost: 8082 / user', metódus : "GET"}). Majd (függvény (válasz) {vm.user = válasz.adatok.neve;}, függvény (hiba) {konzol.log (hiba);});}; $ hatókör.logout = függvény ( ) {$ window.sessionStorage.setItem ('userData', ''); $ http.defaults.headers.common ['Engedélyezés] =' Alap ';}}}) ();

Az otthoni vezérlő a felhasználói adatok átadásával kéri a Engedélyezés fejléc. A REST szolgáltatásunk csak akkor adja vissza a felhasználói adatokat, ha a token érvényes.

Most telepítsük http-szerver az Angular alkalmazás futtatásához:

npm telepítse a http-szervert --save

A telepítés után megnyithatjuk a projekt gyökérmappáját a parancssorban, és végrehajthatjuk a parancsot:

http-szerver -o

4.2. A 2., 4., 5. szögletes verzió használata

A index.html a 2. verzióban kissé eltér az AngularJS verziótól:

         System.import ('app'). Catch (function (err) {console.error (err);}); Betöltés... 

A main.ts az alkalmazás fő belépési pontja. Rendszerindító az alkalmazás modul, és ennek eredményeként a böngésző betölti a bejelentkezési oldalt:

platformBrowserDynamic (). bootstrapModule (AppModule);

A app.routing.ts az alkalmazás továbbításáért felelős:

const appRoutes: Routes = [{elérési út: '', komponens: HomeComponent}, {elérési út: 'login', komponens: LoginComponent}, {path: '**', redirectTo: ''}]; export const routing = RouterModule.forRoot (appRoutes);

A app.module.ts deklarálja az összetevőket és importálja a vonatkozó modulokat:

@NgModule ({import: [BrowserModule, FormsModule, HttpModule, routing], deklarációk: [AppComponent, HomeComponent, LoginComponent], bootstrap: [AppComponent]}) exportálási osztály AppModule {}

Mivel egyoldalas alkalmazást hozunk létre, hozzunk létre egy gyökérösszetevőt, amely hozzáadja az összes gyermekkomponentot:

@Component ({selector: 'app-root', templateUrl: './app.component.html'}) exportálási osztály AppComponent {}

A app.component.html csak a címke. Az Angular ezt a címkét használja a helyirányítási mechanizmusához.

Most hozzuk létre a bejelentkezési összetevőt és a hozzá tartozó sablont login.component.ts:

@Component ({selector: 'login', templateUrl: './app/login/login.component.html'}) exportálási osztály LoginComponent megvalósítja az OnInit {model: any = {}; konstruktor (privát útvonal: ActivatedRoute, privát útválasztó: Router, privát http: Http) {} ngOnInit () {sessionStorage.setItem ('token', ''); } login () {let url = '// localhost: 8082 / login'; hadd eredmény = ez.http.post (URL, {felhasználónév: ez.modell.felhasználónév, jelszó: ez.modell.jelszó}). térkép (res => res.json ()). feliratkozás (isValid => {if ( isValid) {sessionStorage.setItem ('token', btoa (this.model.username + ':' + this.model.password)); this.router.navigate (['']);} else {alert ("Hitelesítés nem sikerült."); } }); }}

Végül vessünk egy pillantást a login.component.html:

 Felhasználónév Felhasználónév szükséges Jelszó Jelszó szükséges Jelentkezzen be 

4.3. Az Angular 6 használata

Az Angular team néhány fejlesztést hajtott végre a 6. verzióban. Ezen változtatások miatt példánk is kissé eltér a többi verziótól. Az egyetlen változás, amelyet példánkban a 6. verzió vonatkozik, a szolgáltatáshívó rész.

Ahelyett HttpModule, a 6-os verzió importál HttpClientModule tól től@ szögletes / közös / http.

A szolgáltatás hívó része is kicsit eltér a régebbi verzióktól:

ezt.http.post(URL, {felhasználónév: ez.modell.felhasználónév, jelszó: ez.modell.jelszó}). előfizetés (isValid => {if (isValid) {sessionStorage.setItem ('token', btoa (this.model.username + ') : '+ this.model.password)); this.router.navigate ([' ']);} else {alert ("A hitelesítés sikertelen.")}});

5. Következtetés

Megtanultuk, hogyan kell megvalósítani a Spring Security bejelentkezési oldalt az Angular alkalmazással. A 4. verziótól kezdve használhatjuk az Angular CLI projektet az egyszerű fejlesztés és tesztelés érdekében.

Mint mindig, az itt tárgyalt összes példa megtalálható a GitHub projektben.