streamalism.org

1. Áttekintés

A React egy összetevő alapú JavaScript könyvtár, amelyet a Facebook épített. A React segítségével könnyedén felépíthetünk összetett webalkalmazásokat. Ebben a cikkben arra fogjuk késztetni a Spring Security-t, hogy működjön együtt a React Login oldallal.

Kihasználjuk az előző példák meglévő Spring Security konfigurációit. Tehát egy korábbi cikk tetejére építünk, amely arról szól, hogy miként lehet létrehozni az Űrlap bejelentkezést a Spring Security alkalmazással.

2. Állítsa be a React

Először nézzük az alkalmazás létrehozásához használja a parancssori eszközt a create-react-app parancsot a következő parancs végrehajtásával:create-reagál-app reagál ”.

A következő konfigurációval rendelkezünk: reagál / csomag.json:

{"név": "reagál", "verzió": "0,1,0", "privát": igaz, "függőségek": {"reagál": "^ 16.4.1", "reagál-dom": "^ 16,4 .1 "," reagál-szkriptek ":" 1.1.4 "}," szkriptek ": {" start ":" indít reagál-szkriptek "," épít ":" reagál-szkriptek épít "," teszt ":" reagál -scripts test --env = jsdom "," eject ":" reakció-scriptek kiadják "}}

Aztán meglesz használja a frontend-maven-plugint, hogy segítsen felépíteni a React projektet Maven-lel:

 com.github.eirslett frontend-maven-plugin 1.6 v8.11.3 6.1.0 src / main / webapp / WEB-INF / view / react telepítési csomópont és npm install-node-and-npm npm install npm npm run build npm run build 

A bővítmény legújabb verziója itt található.

Amikor futunk mvn össze, ez a bővítmény letöltésre kerül csomópont és npm, telepítse az összes csomópont modul-függőséget, és készítse el a reakcióprojektet nekünk.

Számos konfigurációs tulajdonságot kell itt elmagyaráznunk. Megadtuk a csomópont és npm, hogy a plugin tudja, melyik verziót töltse le.

A React bejelentkezési oldalunk statikus oldalként szolgál tavasszal, ezért a „src / main /webapp/ WEB-INF / nézet / reakció”As npmMunkakönyvtárát.

3. Tavaszi biztonsági konfiguráció

Mielőtt belevetnénk magunkat a React összetevőibe, frissítjük a Spring konfigurációt, hogy kiszolgáljuk a React alkalmazás statikus erőforrásait:

@EnableWebMvc @Configuration nyilvános osztály Az MvcConfig kiterjeszti a WebMvcConfigurerAdapter {@Orride public void addResourceHandlers (ResourceHandlerRegistry registry) {register.addResourceHandler ("/ static / **") .addResourceLocations / "/ WEB ); register.addResourceHandler ("/ *. js") .addResourceLocations ("/ WEB-INF / view / reagál / build /"); register.addResourceHandler ("/ *. json") .addResourceLocations ("/ WEB-INF / view / reagál / build /"); register.addResourceHandler ("/ *. ico") .addResourceLocations ("/ WEB-INF / view / reagál / build /"); register.addResourceHandler ("/ index.html") .addResourceLocations ("/ WEB-INF / view / reagál / build / index.html"); }}

Ne feledje, hogy hozzáadjuk a bejelentkezési oldalt „Index.html” mint statikus erőforrás dinamikusan kiszolgált JSP helyett.

Ezután frissítjük a Spring Security konfigurációt, hogy hozzáférést biztosítsunk ezekhez a statikus erőforrásokhoz.

Használat helyett „Login.jsp” ahogy az előző űrlap bejelentkezési cikkében tettük, itt is használjuk „Index.html” mint a mienk Belépés oldal:

@Configuration @EnableWebSecurity @Profile ("! Https") nyilvános osztály A SecSecurityConfig kiterjeszti a WebSecurityConfigurerAdapter {// ... @Override protected void configure (final HttpSecurity http) dobja a (z) {http.csrf (). Kivételt (disable (). AutorizeRequests () / / ... .antMatchers (HttpMethod.GET, "/ index *", "/ static / **", "/*.js", "/*.json", "/*.ico") .permitAll () .anyRequest (). hitelesítve () .and () .formLogin (). loginPage ("/ index.html") .loginProcessingUrl ("/ perform_login") .defaultSuccessUrl ("/ homepage.html", true) .failureUrl (" /index.html?error=true ") // ...}}

Amint a fenti részletből láthatjuk, amikor űrlapadatokat küldünk a/ perform_login„, A tavasz átirányít minket a/homepage.html”, Ha a hitelesítő adatok sikeresen egyeznek, és/index.html?error=true" másképp.

4. Reakció komponensek

Most piszkoljuk be a kezünket a React-be. Építünk és kezelünk egy űrlap bejelentkezést összetevők felhasználásával.

Ne feledje, hogy az ES6 (ECMAScript 2015) szintaxist fogjuk használni az alkalmazásunk felépítéséhez.

4.1. Bemenet

Kezdjük egy Bemenet komponens, amely támogatja a A bejelentkezési űrlap elemei reakció / src / Input.js:

import React, {Komponens} a 'reagálásból' PropTypes importálása a 'prop-type' osztályból Az input kiterjeszti a (z) {constructor (props) {super (props) komponenst this.state = {value: props.value? kellékek.érték: '', className: kellékek.osztályNév? props.className: '', hiba: hamis}} // ... render () {const {handleError, ... opts} = this.props this.handleError = handleError return ()}} Input.propTypes = {név : PropTypes.string, helyőrző: PropTypes.string, típus: PropTypes.string, className: PropTypes.string, érték: PropTypes.string, handleError: PropTypes.func} alapértelmezett exportálási bemenet

Amint fent látható, becsomagoljuk a elemet egy React által vezérelt komponensbe annak állapotának kezeléséhez és a terepi ellenőrzés elvégzéséhez.

A React lehetőséget nyújt a típusok érvényesítésére a használatával PropTypes. Pontosabban használjuk Input.propTypes = {…} a felhasználó által átadott tulajdonságok típusának érvényesítéséhez.

Vegye figyelembe, hogy PropType az érvényesítés csak fejlesztés céljából működik. PropType Az érvényesítés célja annak ellenőrzése, hogy az összes feltételezés, amelyet komponenseinkkel kapcsolatban megfogalmazunk, teljesül.

Jobb, ha megvan, nem pedig a gyártás véletlenszerű csuklása lepi meg.

4.2. Forma

Ezután létrehozunk egy általános Form összetevőt a fájlban Form.js amely egyesíti a mi több példányunkat Bemenet komponens, amelyre alapozhatjuk bejelentkezési űrlapunkat.

Ban,-ben Forma komponens, a HTML attribútumait vesszük elemeket és létrehozni Bemenet alkatrészeket tőlük.

Aztán a Bemenet összetevőket és érvényesítési hibaüzeneteket illesztenek a Forma:

import React, {Component} from "reagál" import PropTypes from "prop-type" import Bemenet a "./Input" osztályról Az űrlap kiterjeszti az összetevőt {// ... render () {const bemenetek = this.props.inputs.map (({név, helyőrző, típus, érték, osztálynév}, index) => ()) const hibák = this.renderError () return ({this.form = fm}}> {bemenetek} {hibák})}} űrlap .propTypes = {név: PropTypes.string, művelet: PropTypes.string, módszer: PropTypes.string, bemenetek: PropTypes.array, hiba: PropTypes.string} alapértelmezett exportálási űrlap

Most nézzük meg, hogyan kezeljük a mezőellenőrzési hibákat és a bejelentkezési hibákat:

A Class Form kiterjeszti az {konstruktor (kellékek) {szuper (kellékek) if (props.hiba) {this.state = {hiba: 'hibás felhasználónév vagy jelszó!', errcount: 0}} else {this.state = {errcount: 0}}} handleError = (mező, errmsg) => {if (! Mező) visszatér, ha (errmsg) {this.setState ((prevState) => ({hiba: '', errcount: prevState.errcount + 1, errmsgs : {... prevState.errmsgs, [mező]: errmsg}}))}} else {this.setState ((prevState) => ({hiba: '', errcount: prevState.errcount === 1? 0: prevState .errcount-1, errmsgs: {... prevState.errmsgs, [mező]: ''}})))}} renderError = () => {if (this.state.errcount || this.state.failure) { const errmsg = this.állam.hiba || Object.values ​​(this.state.errmsgs) .find (v => v) return {errmsg}}} // ...}

Ebben a részletben definiáljuk a handleError funkció az űrlap hibaállapotának kezelésére. Emlékezzünk vissza, hogy mi is használtuk Bemenet mező érvényesítése. Tulajdonképpen, handleError () átadják a Bemeneti alkatrészek visszahívásként a Vakol() funkció.

Használunk renderError () a hibaüzenet elem elkészítéséhez. Vegye figyelembe, hogy Formák a konstruktor egy hiba ingatlan. Ez a tulajdonság jelzi, ha a bejelentkezési művelet sikertelen.

Ezután jön az űrlap benyújtási kezelő:

class űrlap kiterjeszti az összetevőt {// ... handleSubmit = (event) => {event.preventDefault () if (! this.state.errcount) {const data = new FormData (this.form) fetch (this.form.action , {method: this.form.method, body: new URLSearchParams (data)}). akkor (v => {if (v.redirected) window.location = v.url}) .catch (e => console.warn (e))}}}

Az összes űrlapmezőt bepakoljuk FormData és elküldi a szerverre a elhozni API.

Ne felejtsük el, hogy a bejelentkezési űrlapunkhoz tartozik egy sikerUrl és FailUrl, vagyis függetlenül attól, hogy a kérés sikeres-e vagy sem, a válasz átirányítást igényel.

Ezért kell kezelnünk az átirányítást a válaszhívásban.

4.3. Forma renderelés

Most, hogy beállítottuk az összes szükséges elemet, tovább helyezhetjük a DOM-ba. Az alapvető HTML struktúra a következő (keresse meg a reagálni / public / index.html):

Végül megjelenítjük az űrlapot a azonosítóval “tartály" ban ben reakció / src / index.js:

import React from 'react' import ReactDOM from 'react-dom' import './index.css' import Form from './Form' const input = [{név: "felhasználónév", helyőrző: "felhasználónév", típus: " szöveg "}, {név:" jelszó ", helyőrző:" jelszó ", típus:" jelszó "}, {típus:" beküldés ", érték:" Küldés ", osztályNév:" btn "}] const props = {név: 'loginForm', módszer: 'POST', művelet: '/ perform_login', bemenetek: bemenetek} const params = új URLSearchParams (window.location.search) ReactDOM.render (, document.getElementById ('container'))

Az űrlapunk tehát két beviteli mezőt tartalmaz: felhasználónév és Jelszó, és egy beküldés gombra.

Itt adunk át egy kiegészítőt hiba attribútum a Forma összetevőt, mert a bejelentkezési hibát szeretnénk kezelni a hiba URL-re történő átirányítás után: /index.html?error=true.

Most befejeztük a Spring Security bejelentkezési alkalmazás felépítését a React használatával. Az utolsó dolog, amit meg kell tennünk, az a futás mvn össze.

A folyamat során a Maven plugin segít a React alkalmazásunk felépítésében és az összeépítési eredmény összegyűjtésében src / main / webapp / WEB-INF / view / reagál / build.

5. Következtetés

Ebben a cikkben kitértünk arra, hogyan lehet a React bejelentkezési alkalmazást létrehozni, és hagyni, hogy az együttműködjön a Spring Security háttérprogrammal. Egy bonyolultabb alkalmazás magában foglalja az állapotátállást és az útválasztást a React Router vagy Redux használatával, de ez meghaladná a cikk kereteit.

Mint mindig, a teljes megvalósítás megtalálható a GitHubon. Helyi futtatásához hajtsa végre mvn móló: futás a projekt gyökérmappájában, akkor elérhetjük a React bejelentkezési oldalt a címen // localhost: 8080.