streamalism.org

1. Prehľad

React je knižnica JavaScriptu založená na komponentoch, ktorú vytvoril Facebook. S Reactom môžeme ľahko vytvárať zložité webové aplikácie. V tomto článku sa chystáme zaistiť spoluprácu Spring Security so stránkou React Login.

Využijeme výhody existujúcich konfigurácií Spring Security z predchádzajúcich príkladov. Nadviažeme teda na predchádzajúci článok o vytvorení prihlásenia do formulára s jarným zabezpečením.

2. Nastaviť Reagovať

Najprv poďme na vytvorenie aplikácie použite nástroj príkazového riadku create-react-app vykonaním príkazu „vytvoriť-reagovať-reagovať na aplikáciu “.

V konfigurácii budeme mať nasledujúcu konfiguráciu reagovať / balíček.json:

{"name": "reagovat", "verzia": "0.1.0", "súkromné": true, "závislosti": {"reagovat": "^ 16.4.1", "reagovat-dom": "^ 16.4 .1 "," react-scripts ":" 1.1.4 "}," scripts ": {" start ":" start-skriptov spustiť "," build ":" build-skriptov "," test ":" reagovať -skriptový test --env = jsdom "," vysunúť ":" vysunúť reagujúce skripty "}}

Potom budeme použite frontend-maven-plugin na pomoc pri zostavovaní nášho projektu React s Maven:

 com.github.eirslett frontend-maven-plugin 1.6 v8.11.3 6.1.0 src / main / webapp / WEB-INF / zobraziť / reagovať inštalovať uzol a npm install-node-and-npm npm install npm npm run build npm run build 

Najnovšiu verziu pluginu nájdete tu.

Keď bežíme mvn zostaviť, tento doplnok sa stiahne uzol a npm, nainštalujte všetky závislosti uzlových modulov a vytvorte za nás projekt reagovania.

Tu musíme vysvetliť niekoľko konfiguračných vlastností. Zadali sme verzie uzol a npm, aby plugin vedel, ktorú verziu si má stiahnuť.

Naša prihlasovacia stránka React bude na jar slúžiť ako statická stránka, takže použijeme „src / main /webapp/ WEB-INF / zobraziť / reagovať“Ako npmPracovný adresár.

3. Jarná konfigurácia zabezpečenia

Predtým, ako sa ponoríme do komponentov React, aktualizujeme jarnú konfiguráciu, aby slúžila statickým zdrojom našej aplikácie React:

@EnableWebMvc @Configuration verejná trieda MvcConfig rozširuje WebMvcConfigurerAdapter {@Override public void addResourceHandlers (register ResourceHandlerRegistry) {registry.addResourceHandler ("/ static / **") .addResourceLocations ("/ WEB-INF / ); registry.addResourceHandler ("/ *. js") .addResourceLocations ("/ WEB-INF / zobraziť / reagovať / zostaviť /"); registry.addResourceHandler ("/ *. json") .addResourceLocations ("/ WEB-INF / zobraziť / reagovať / zostaviť /"); registry.addResourceHandler ("/ *. ico") .addResourceLocations ("/ WEB-INF / zobraziť / reagovať / zostaviť /"); registry.addResourceHandler ("/ index.html") .addResourceLocations ("/ WEB-INF / zobraziť / reagovať / zostaviť / index.html"); }}

Upozorňujeme, že sme pridali prihlasovaciu stránku „Index.html“ ako statický zdroj namiesto dynamicky obsluhovaného JSP.

Ďalej aktualizujeme konfiguráciu Spring Security, aby sme povolili prístup k týmto statickým prostriedkom.

Namiesto použitia „Login.jsp“ rovnako ako v predchádzajúcom článku prihlasovacieho formulára, aj tu používame „Index.html“ ako náš Prihlásiť sa stránka:

@Configuration @EnableWebSecurity @Profile ("! Https") verejná trieda SecSecurityConfig rozširuje WebSecurityConfigurerAdapter {// ... @Override protected void configure (konečná HttpSecurity http) vyvolá výnimku {http.csrf (). Disable (). / ... .antMatchers (HttpMethod.GET, "/ index *", "/ static / **", "/*.js", "/*.json", "/*.ico") .permitAll () .anyRequest (). authenticated (). a () .formLogin (). loginPage ("/ index.html") .loginProcessingUrl ("/ perform_login") .defaultSuccessUrl ("/ homepage.html", true) .failureUrl (" /index.html?error=true ") // ...}}

Ako vidíme z úryvku vyššie, keď zverejňujeme údaje z formulára „/ perform_login„Jar nás presmeruje na“/homepage.html„Ak sa prihlasovacie údaje úspešne zhodujú a do„/index.html?error=true" inak.

4. Reagujte komponenty

Teraz si špinime ruky na React. Zostavíme a spravujeme prihlásenie do formulára pomocou komponentov.

Upozorňujeme, že na zostavenie našej aplikácie použijeme syntax ES6 (ECMAScript 2015).

4.1. Vstup

Začnime s Vstup komponent, ktorý podporuje prvky prihlasovacieho formulára v reagovat / src / Input.js:

import React, {Component} z 'react' import PropTypes z '' prop-types 'triedy Vstup rozširuje Component {constructor (props) {super (props) this.state = {value: props.value? props.value: '', className: props.className? props.className: '', error: false}} // ... render () {const {handleError, ... opts} = this.props this.handleError = handleError return ()}} Input.propTypes = {name : PropTypes.string, zástupný symbol: PropTypes.string, typ: PropTypes.string, className: PropTypes.string, hodnota: PropTypes.string, handleError: PropTypes.func} exportovať predvolený vstup

Ako je vidieť vyššie, zabalíme prvok do reagujúceho riadeného komponentu, aby bolo možné riadiť jeho stav a vykonávať validáciu poľa.

React poskytuje spôsob overenia typov pomocou PropTypes. Konkrétne používame Input.propTypes = {…} na overenie typu vlastností odovzdaných používateľom.

Poznač si to PropType validácia funguje iba pre vývoj. PropType validácia je skontrolovať, či sú splnené všetky predpoklady, ktoré o svojich komponentoch robíme.

Je lepšie mať to, ako sa nechať prekvapiť náhodným štikútaním vo výrobe.

4.2. Formulár

Ďalej v súbore vytvoríme všeobecný komponent Form Form.js ktorá kombinuje viac inštancií Vstup komponent, na ktorom môžeme založiť náš prihlasovací formulár.

V Formulár komponent, berieme atribúty HTML prvky a vytvárať Vstup komponenty z nich.

Potom Vstup komponenty a chybové správy o overení sa vkladajú do Forma:

import React, {Component} z 'React' import PropTypes z 'prop-types' import Input from './Input' class Form extends Component {// ... render () {const Inputs = this.props.inputs.map (({name, placeholder, type, value, className}, index) => ()) const errors = this.renderError () return ({this.form = fm}}> {vstupy} {chyby})}} Formulár .propTypes = {názov: PropTypes.string, akcia: PropTypes.string, metóda: PropTypes.string, vstupy: PropTypes.array, chyba: PropTypes.string} export predvoleného formulára

Poďme sa teraz pozrieť na to, ako spravujeme chyby overenia poľa a chyby prihlásenia:

class Form extends Component {constructor (props) {super (props) if (props.error) {this.state = {failure: 'wrong username or password!', errcount: 0}} else {this.state = {errcount: 0}}} handleError = (field, errmsg) => {if (! Field) return if (errmsg) {this.setState ((prevState) => ({failure: '', errcount: prevState.errcount + 1, errmsgs : {... prevState.errmsgs, [pole]: errmsg}}))} else {this.setState ((prevState) => ({zlyhanie: '', errcount: prevState.errcount === 1? 0: prevState .errcount-1, errmsgs: {... prevState.errmsgs, [pole]: ''}}))}} renderError = () => {if (this.state.errcount || this.state.failure) { const errmsg = this.state.failure || Object.values ​​(this.state.errmsgs) .find (v => v) return {errmsg}}} // ...}

V tomto úryvku definujeme handleError funkcia na správu chybového stavu formulára. Pripomeňme, že sme to tiež použili Vstup overenie poľa. Vlastne, handleError () sa odovzdáva Vstupné komponenty ako spätné volanie v render () funkcie.

Používame renderError () na zostrojenie prvku chybovej správy. Poznač si to Formulár konštruktér spotrebuje chyba nehnuteľnosť. Táto vlastnosť označuje, či akcia prihlásenia zlyhala.

Potom príde obslužný program na odoslanie formulára:

class Form extends Component {// ... 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)}) .then (v => {if (v.redirected) window.location = v.url}) .catch (e => console.warn (e))}}}

Zbalíme všetky polia formulára FormData a pošlite ho na server pomocou aportovať API.

Nezabudnime, že náš prihlasovací formulár je dodávaný s successUrl a failureUrl, čo znamená, že bez ohľadu na to, či je žiadosť úspešná alebo nie, odpoveď by si vyžadovala presmerovanie.

Preto musíme vo spätnom volaní odpovede zvládnuť presmerovanie.

4.3. Vykreslenie formulára

Teraz, keď sme nastavili všetky komponenty, ktoré potrebujeme, môžeme pokračovať v ich umiestňovaní do DOM. Základná štruktúra HTML je nasledovná (nájdete ju pod reagovat / public / index.html):

Nakoniec formulár vykreslíme do s id “kontajner “ v reaguj / src / index.js:

import Reagovať z 'Reagovať' Importovať ReactDOM z 'Reagovať-Dom' Importovať './index.css' Importovať formulár z './Form' Const Input = [{name: "username", placeholder: "username", type: " text "}, {name:" password ", placeholder:" password ", type:" password "}, {type:" submit ", value:" Submit ", className:" btn "}] const props = {name: 'loginForm', metóda: 'POST', akcia: '/ perform_login', vstupy: vstupy} const params = new URLSearchParams (window.location.search) ReactDOM.render (, document.getElementById ('container'))

Takže náš formulár teraz obsahuje dve vstupné polia: používateľské meno a hesloa tlačidlo na odoslanie.

Tu míňame ďalšie chyba atribút Formulár komponent, pretože chceme spracovať chybu prihlásenia po presmerovaní na URL zlyhania: /index.html?error=true.

Teraz sme dokončili vytváranie prihlasovacej aplikácie Spring Security pomocou aplikácie React. Posledná vec, ktorú musíme urobiť, je kandidovať mvn zostaviť.

Počas procesu pomôže doplnok Maven s zostavením našej aplikácie React a zhromaždením výsledku zostavenia src / main / webapp / WEB-INF / zobraziť / reagovať / zostaviť.

5. Záver

V tomto článku sme sa venovali tomu, ako zostaviť prihlasovaciu aplikáciu React a nechať ju interagovať s backendom Spring Security. Komplexnejšia aplikácia by vyžadovala prechod štátu a smerovanie pomocou React Router alebo Redux, ale to by bolo nad rámec tohto článku.

Plnú implementáciu nájdete ako vždy na GitHube. Ak ho chcete spustiť lokálne, vykonajte príkaz mvn mólo: spustiť v koreňovom priečinku projektu potom môžeme prejsť na prihlasovaciu stránku React na adrese // localhost: 8080.