streamalism.org

1. סקירה כללית

React היא ספריית JavaScript מבוססת רכיבים שנבנתה על ידי פייסבוק. בעזרת React נוכל לבנות בקלות יישומי אינטרנט מורכבים. במאמר זה אנו גורמים לאביב ביטחון לעבוד יחד עם דף כניסה להגיב.

ננצל את תצורות אבטחת האביב הקיימות של דוגמאות קודמות. אז נבנה על מאמר קודם על יצירת כניסה לטופס עם Spring Security.

2. הגדר תגובה

ראשית, בואו השתמש בכלי שורת הפקודה create-react-app כדי ליצור יישום על ידי ביצוע הפקודה "ליצור-להגיב אפליקציה להגיב ”.

תהיה לנו תצורה כמו הבאה ב תגובה / package.json:

{"name": "react", "version": "0.1.0", "private": true, "dependencies": {"react": "^ 16.4.1", "react-dom": "^ 16.4 .1 "," react-scripts ":" 1.1.4 "}," scripts ": {" start ":" react-scripts start "," build ":" build-scripts build "," test ":" react -scripts test --env = jsdom "," eject ":" react-scripts eject "}}

ואז, אנחנו השתמש בתוסף frontend-maven כדי לבנות את פרויקט React שלנו עם Maven:

 com.github.eirslett frontend-maven-plugin 1.6 v8.11.3 6.1.0 src / main / webapp / WEB-INF / view / react install install node ו- npm install-node-and-npm npm להתקין npm npm run לבנות npm run build 

הגרסה האחרונה של התוסף נמצאת כאן.

כשאנחנו רצים לקמפל mvn, תוסף זה יורד צוֹמֶת ו npm, התקן את כל התלות במודול הצומת ובנה עבורנו את פרויקט התגובה.

ישנם מספר מאפייני תצורה שעלינו להסביר כאן. ציינו את הגרסאות של צוֹמֶת ו npm, כדי שהתוסף יידע איזו גרסה להוריד.

דף הכניסה של React שלנו ישמש כעמוד סטטי באביב, ולכן אנו משתמשים ב- “src / main /webapp/ WEB-INF / להציג / להגיב" כפי ש npmמדריך העבודה.

3. תצורת אבטחה באביב

לפני שנצלול לרכיבי React, אנו מעדכנים את תצורת Spring כדי לשרת את המשאבים הסטטיים של אפליקציית React שלנו:

@EnableWebMvc @ תצורה מחלקה ציבורית MvcConfig מרחיב את WebMvcConfigurerAdapter {@ Override public void addResourceHandlers (ResourceHandlerRegistry registry) {registry.addResourceHandler ("/ static / **") .addResourceLocations ("/ WEB-INF / stat / / / ); registry.addResourceHandler ("/ *. js") .addResourceLocations ("/ WEB-INF / view / react / build /"); registry.addResourceHandler ("/ *. json") .addResourceLocations ("/ WEB-INF / view / react / build /"); registry.addResourceHandler ("/ *. ico") .addResourceLocations ("/ WEB-INF / view / react / build /"); registry.addResourceHandler ("/ index.html") .addResourceLocations ("/ WEB-INF / view / react / build / index.html"); }}

שימו לב שאנחנו מוסיפים את דף הכניסה "Index.html" כמשאב סטטי במקום JSP המוגש באופן דינמי.

לאחר מכן אנו מעדכנים את תצורת Spring Security כדי לאפשר גישה למשאבים סטטיים אלה.

במקום להשתמש "Login.jsp" כפי שעשינו במאמר התחברות הטופס הקודם, כאן אנו משתמשים "Index.html" כמו שלנו התחברות עמוד:

@Configuration @EnableWebSecurity @Profile ("! Https") מחלקה ציבורית SecSecurityConfig מרחיב את WebSecurityConfigurerAdapter {// ... @Override מוגן חלל להגדיר (HttpSecurity http סופי) זורק חריג {http.csrf (). / ... .antMatchers (HttpMethod.GET, "/ index *", "/ static / **", "/*.js", "/*.json", "/*.ico") .permitAll () .anyRequest (). מאומת () .and () .formLogin (). loginPage ("/ index.html") .loginProcessingUrl ("/ perform_login") .defaultSuccessUrl ("/ דף הבית.html", נכון) .failureUrl (" /index.html?error=true ") // ...}}

כפי שניתן לראות מהקטע הקוד לעיל כאשר אנו מפרסמים נתוני טופס ל"/ ביצוע_תחברות", האביב ינתב אותנו ל"/ דף הבית.html"אם האישורים תואמים בהצלחה ול"/index.html?error=true" אחרת.

4. רכיבי תגובה

עכשיו בואו ללכלך את הידיים על תגובה. אנו נבנה וננהל כניסה לטופס באמצעות רכיבים.

שים לב שנשתמש בתחביר ES6 (ECMAScript 2015) לבניית היישום שלנו.

4.1. קֶלֶט

נתחיל עם קֶלֶט רכיב המגבה את אלמנטים של טופס הכניסה ב תגובה / src / Input.js:

יבוא תגובה, {Component} מ- 'react' ייבא PropTypes מהמחלקה 'prop-types' קלט מרחיב את 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, מציין מיקום: PropTypes.string, סוג: PropTypes.string, className: PropTypes.string, value: PropTypes.string, handleError: PropTypes.func} ברירת מחדל לייצא קלט

כפי שנראה לעיל, אנו עוטפים את אלמנט לתוך רכיב מבוקר תגובה כדי להיות מסוגל לנהל את מצבו ולבצע אימות שדה.

React מספק דרך לאמת את הסוגים באמצעות PropTypes. באופן ספציפי, אנו משתמשים Input.propTypes = {…} כדי לאמת את סוג המאפיינים שהעביר המשתמש.

ציין זאת PropType אימות עובד לפיתוח בלבד. PropType אימות הוא לבדוק כי כל ההנחות שאנו מניחים לגבי המרכיבים שלנו מתקיימות.

עדיף שיהיה לך במקום להפתיע מ שיהוקים אקראיים בהפקה.

4.2. טופס

לאחר מכן, נבנה רכיב טופס כללי בקובץ Form.js המשלב מספר מקרים משלנו קֶלֶט רכיב עליו אנו יכולים לבסס את טופס הכניסה שלנו.

בתוך ה טופס רכיב, אנו לוקחים תכונות של HTML אלמנטים וליצור קֶלֶט רכיבים מהם.

אז ה קֶלֶט רכיבים והודעות שגיאה לאימות מוכנסים לתוך ה- טופס:

ייבא React, {Component} מ- 'react' ייבא PropTypes מ- 'prop-types' import Input from './Input' טופס מרחיב רכיב {// ... render () {const inputs = this.props.inputs.map (({שם, מציין מיקום, סוג, ערך, className}, אינדקס) => ()) שגיאות const = this.renderError () להחזיר ({this.form = fm}}> {קלט} {שגיאות})}} טופס .propTypes = {name: PropTypes.string, action: PropTypes.string, method: PropTypes.string, קלט: PropTypes.array, שגיאה: PropTypes.string} טופס ברירת מחדל לייצוא

בואו נסתכל כיצד אנו מנהלים שגיאות אימות שדה ושגיאת כניסה:

class Form מרחיב את הרכיב {constructor (props) {super (props) if (props.error) {this.state = {failure: 'שם משתמש או סיסמה שגויים!', errcount: 0}} אחר {this.state = {errcount: 0}}} handleError = (field, errmsg) => {if (! Field) להחזיר if (errmsg) {this.setState ((prevState) => ({failure: '', errcount: prevState.errcount + 1, errmsgs : {... prevState.errmsgs, [field]: errmsg}})}} אחר {this.setState ((prevState) => ({failure: '', errcount: prevState.errcount === 1? 0: prevState .errcount-1, errmsgs: {... prevState.errmsgs, [field]: ''}})}} renderError = () => {if (this.state.errcount || this.state.failure) { const errmsg = this.state.failure || Object.values ​​(this.state.errmsgs) .find (v => v) מחזירים {errmsg}}} // ...}

בקטע זה אנו מגדירים את handleError פונקציה לניהול מצב השגיאה של הטופס. נזכיר שהשתמשנו בו גם קֶלֶט אימות שדה. בעצם, handleError () מועבר ל רכיבי קלט כשיחה חוזרת ב לְדַקלֵם() פוּנקצִיָה.

אנו משתמשים renderError () לבניית אלמנט הודעת השגיאה. ציין זאת טופס קונסטרוקטור צורך שְׁגִיאָה תכונה. מאפיין זה מציין אם פעולת הכניסה נכשלה.

ואז מגיע המטפל בהגשת הטופס:

class Form מרחיב את הרכיב {// ... handleSubmit = (event) => {event.preventDefault () if (! this.state.errcount) {const data = FormData new (this.form)) אחזור (this.form.action , {method: this.form.method, body: new URLSearchParams (data)}). ואז (v => {if (v.redirected) window.location = v.url}). לתפוס (e => console.warn (ה))}}}

אנו עוטפים את כל שדות הטופס טופס מידע ולשלוח אותו לשרת באמצעות לְהָבִיא ממשק API.

בל נשכח שטופס הכניסה שלנו מגיע עם successUrl ו כישלוןכלומר, לא משנה אם הבקשה תצליח או לא, התגובה תדרוש הפניה מחדש.

זו הסיבה שאנחנו צריכים לטפל בהפניה מחדש בתשובת השיחה.

4.3. עיבוד טפסים

כעת, לאחר שהגדרנו את כל הרכיבים הדרושים לנו, אנו יכולים להמשיך ולהכניס אותם ל- DOM. מבנה ה- HTML הבסיסי הוא כדלקמן (מצא אותו תחת תגובה / ציבורי / אינדקס.html):

לבסוף, אנו מעבירים את הטופס ל- עם מזהה “מְכוֹלָה" ב תגובה / src / index.js:

יבוא תגובה מ'הגיב 'ייבא ReactDOM מ'תגובה-דומ' ייבוא ​​'./index.css' טופס ייבוא ​​מ- './Form' תשומות const = [{name: "שם משתמש", מציין מיקום: "שם משתמש", סוג: " טקסט "}, {name:" password ", placeholder:" password ", type:" password "}, {type:" submit ", value:" Submit ", className:" btn "}] const props = {name: 'loginForm', שיטה: 'POST', פעולה: '/ perform_login', קלטים: קלטים} const params = URLSearchParams חדש (window.location.search) ReactDOM.render (, document.getElementById ('מיכל'))

אז הטופס שלנו מכיל כעת שני שדות קלט: שם משתמש ו סיסמה, וכפתור הגשה.

כאן אנו מעבירים תוספת שְׁגִיאָה תכונה ל טופס רכיב מכיוון שאנו רוצים לטפל בשגיאת התחברות לאחר הפניה מחדש לכתובת ה- URL של הכשל: /index.html?error=true.

כעת סיימנו לבנות יישום כניסה לאבטחת אביב באמצעות React. הדבר האחרון שעלינו לעשות הוא לרוץ לקמפל mvn.

במהלך התהליך, התוסף של Maven יעזור לבנות את יישום ה- React שלנו ולאסוף את תוצאת ה- build src / main / webapp / WEB-INF / view / react / build.

5. מסקנה

במאמר זה סקרנו כיצד לבנות אפליקציית כניסה להגיב ולתת לה לקיים אינטראקציה עם backend של Spring Security. יישום מורכב יותר יכלול מעבר מדינה וניתוב באמצעות React Router או Redux, אך זה יהיה מעבר לתחום המאמר הזה.

כמו תמיד, ניתן למצוא את היישום המלא ב- GitHub. כדי להריץ אותו באופן מקומי, בצע מזח mvn: לרוץ בתיקיית הבסיס של הפרויקט, ואז נוכל לגשת לדף הכניסה להגיב בכתובת // localhost: 8080.