streamalism.org

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

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

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

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

מאמר זה מתמקד ב- MVC באביב. המאמר שלנו Validation in Spring Boot מתאר כיצד לבצע אימות ב- Spring Boot.

2. תלות Maven

כדי להתחיל, בואו נוסיף את התלות הבאה:

 org.springframework spring-webmvc 4.3.7.RELEASE org.hibernate hibernate-validator 5.4.0.Final com.fasterxml.jackson.core jackson-databind 2.8.7 

ניתן להוריד את הגרסאות העדכניות ביותר של אביב-webmvc, מאמת תרדמה ו- jackson-databind ממייבן סנטרל.

3. אימות באמצעות MVC באביב

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

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

3.1. מודל הנתונים

בואו ניצור מִשׁתַמֵשׁ מחלקה הכוללת מאפיינים עם הערות אימות מתאימות:

משתמש בכיתה ציבורית {@NotNull @Email דוא"ל מחרוזת פרטי; @NotNull @Size (min = 4, max = 15) סיסמת מחרוזת פרטית; @NotBlank שם מחרוזת פרטי; @Min (18) @Digits (מספר שלם = 2, שבר = 0) גילאי פרטי; // קונסטרוקטור סטנדרטי, גטרים, סטרים}

ההערות ששימשו לעיל שייכות ל JSR 349 מפרט, למעט @אימייל ו @NotBlank, הספציפיים ל מאמת תרדמת שינה סִפְרִיָה.

3.2. בקר MVC באביב

בואו ניצור מחלקת בקר המגדירה א /מִשׁתַמֵשׁ נקודת קצה, אשר תשמש לשמירת חדש מִשׁתַמֵשׁ התנגדות ל רשימה.

על מנת לאפשר אימות של מִשׁתַמֵשׁ אובייקט שהתקבל באמצעות פרמטרים של בקשה, יש להקדים את ההצהרה על ידי @תָקֵף ביאור, ושגיאות האימות יישמרו ב BindingResult למשל.

כדי לקבוע אם האובייקט מכיל ערכים לא חוקיים, נוכל להשתמש ב- hasErrors () שיטה של BindingResult.

אם hasErrors () החזרות נָכוֹן, אנחנו יכולים להחזיר א מערך JSON המכיל את הודעות השגיאה המשויכות לאימות שלא עבר. אחרת, נוסיף את האובייקט לרשימה:

@PostMapping (value = "/ user") @ResponseBody Public ResponseEntity saveUser (@Valid User user, BindingResult result, Model Model) {if (result.hasErrors ()) {List שגיאות = result.getAllErrors (). Stream (). מפה (DefaultMessageSourceResolvable :: getDefaultMessage) .collect (Collectors.toList ()); להחזיר ResponseEntity חדש (שגיאות, HttpStatus.OK); } אחר {if (users.stream (). anyMatch (it -> user.getEmail (). שווה ל- (it.getEmail ()))) {להחזיר ResponseEntity חדש (Collections.singletonList ("הדוא"ל כבר קיים!"), HttpStatus .סְתִירָה); } אחר {users.add (user); להחזיר ResponseEntity חדש (HttpStatus.CREATED); }}}

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

במקרה שלנו, אנו יכולים לאמת אם כבר קיים משתמש עם אותו דוא"ל - ולהחזיר סטטוס של 409 CONFLICT אם זה המקרה.

עלינו להגדיר את רשימת המשתמשים שלנו ולאתחל אותה בכמה ערכים:

משתמשים ברשימה פרטית = Arrays.asList (משתמש חדש ("[דוא"ל מוגן]", "לעבור", "אנא", 20), משתמש חדש ("[דוא"ל מוגן]", "לעבור", "בוב", 30), משתמש חדש ("[email protected]", "pass", "John", 40), משתמש חדש ("[email protected]", "pass", "Mary", 30));

בואו להוסיף מיפוי לאחזור רשימת המשתמשים כאובייקט JSON:

@GetMapping (value = "/ users") @ResponseBody רשימת משתמשים ציבורי getUsers () {משתמשים חוזרים; }

הפריט הסופי שאנו זקוקים לו בבקר MVC האביב שלנו הוא מיפוי להחזרת הדף הראשי של היישום שלנו:

@GetMapping ("/ userPage") מחרוזת ציבורית getUserProfilePage () {להחזיר "משתמש"; }

אנו נסתכל על ה- user.html עמוד בפירוט רב יותר בסעיף AngularJS.

3.3. תצורת MVC באביב

בואו להוסיף תצורת MVC בסיסית ליישום שלנו:

מחלקה @Configuration @EnableWebMvc @ComponentScan (basePackages = "com.baeldung.springmvcforms") ApplicationConfiguration מיישמת את WebMvcConfigurer {@Override public void configureDefaultServletHandling (DefaultServletHandlerConfigurer configureer (תצורה מוגדרת)); } @Bean InternalResourceViewResolver הציבור htmlViewResolver () {InternalResourceViewResolver שעועית = חדש InternalResourceViewResolver (); bean.setPrefix ("/ WEB-INF / html /"); bean.setSuffix (". html"); שעועית להחזיר; }}

3.4. אתחול היישום

בואו ניצור מחלקה שמיישמת WebApplicationInitializer ממשק להפעלת היישום שלנו:

מחלקה ציבורית WebInitializer מיישמת את WebApplicationInitializer {public void onStartup (ServletContext container) זורק את ServletException {AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext (); ctx.register (ApplicationConfiguration.class); ctx.setServletContext (מיכל); container.addListener (ContextLoaderListener חדש (ctx)); ServletRegistration.Dynamic servlet = container.addServlet ("dispatcher", DispatcherServlet חדש (ctx)); servlet.setLoadOnStartup (1); servlet.addMapping ("/"); }}

3.5. בדיקת אימות Mvc באביב באמצעות סלסול

לפני שאנחנו מיישמים את קטע הלקוח AngularJS, אנו יכולים לבדוק את ה- API שלנו באמצעות cURL עם הפקודה:

תלתל -אי -X POST -H "קבל: יישום / json" "localhost: 8080 / spring-mvc-forms / user? email = aaa & password = 12 & age = 12"

התגובה היא מערך המכיל את הודעות השגיאה המוגדרות כברירת מחדל:

["לא כתובת דוא"ל מעוצבת היטב", "הגודל חייב להיות בין 4 ל -15", "לא יכול להיות ריק", "חייב להיות גדול מ- 18 או שווה לזה"]

4. אימות AngularJS

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

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

ראשית, בואו ניצור מודול AngularJS שמזריק את ה- ng הודעות מודול, המשמש להודעות אימות:

var app = angular.module ('app', ['ngMessages']);

לאחר מכן, בואו ניצור שירות ובקר AngularJS שיצרוך את ה- API שנבנה בסעיף הקודם.

4.1. שירות AngularJS

לשירות שלנו יהיו שתי שיטות המכנות את שיטות הבקר MVC - אחת להצלת משתמש ואחת לאחזור רשימת המשתמשים:

app.service ('UserService', ['$ http', function ($ http) {this.saveUser = function saveUser (user) {return $ http ({method: 'POST', url: 'user', params: { דוא"ל: user.email, סיסמה: user.password, שם: user.name, גיל: user.age}, כותרות: 'קבל: application / json'});} this.getUsers = פונקציה getUsers () {החזר $ http ({שיטה: 'GET', url: 'משתמשים', כותרות: 'קבל: יישום / json'}). ואז (פונקציה (תגובה) {return response.data;});}}]);

4.2. בקר AngularJS

ה UserCtrl בקר מזריק את שירות משתמש, מתקשר לשיטות השירות ומטפל בתגובות התגובה והשגיאה:

app.controller ('UserCtrl', ['$ scope', 'UserService', פונקציה ($ scope, UserService) {$ scope.submitted = false; $ scope.getUsers = פונקציה () {UserService.getUsers (). ואז ( פונקציה (נתונים) {$ scope.users = נתונים;});} $ scope.saveUser = פונקציה () {$ scope.submitted = true; אם ($ scope.userForm. $ תקף) {UserService.saveUser ($ scope. משתמש). ואז (הצלחה בפונקציה (תגובה) {$ scope.message = 'המשתמש נוסף!'; $ scope.errorMessage = ''; $ scope.getUsers (); $ scope.user = null; $ scope.subitted = false ;}, שגיאת פונקציה (תגובה) {if (response.status == 409) {$ scope.errorMessage = response.data.message;} אחר {$ scope.errorMessage = 'שגיאה בהוספת משתמש!';} $ scope.message = '';});}} $ scope.getUsers ();}]);

אנו יכולים לראות בדוגמה לעיל ששיטת השירות נקראת רק אם ה- $ תקף רכוש של userForm נכון. ובכל זאת, במקרה זה, ישנו בדיקה נוספת לגבי מיילים כפולים, אשר ניתן לבצע רק בשרת ומטופלים בנפרד ב שְׁגִיאָה() פוּנקצִיָה.

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

בתחילה, משתנה זה יהיה שֶׁקֶר, ועל קריאתו של saveUser () שיטה, זה הופך להיות נָכוֹן. אם איננו רוצים שיופיעו הודעות אימות לפני שהמשתמש מגיש את הטופס, אנו יכולים להשתמש ב- הוגש משתנה כדי למנוע זאת.

4.3. טופס באמצעות אימות AngularJS

על מנת להשתמש בספריית AngularJS ובמודול AngularJS שלנו, נצטרך להוסיף את הסקריפטים שלנו user.html עמוד:

אז נוכל להשתמש במודול ובבקר שלנו על ידי הגדרת ה- אפליקציה ng ו ng-controller נכסים:

בואו ניצור את טופס ה- HTML שלנו:

 ... 

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

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

ה ng-submit תכונה מגדירה את פונקציית הבקר AngularJS שתיקרא כאשר הטופס שנשלח. באמצעות ng-submit במקום נג לחץ יש את היתרון שהוא מגיב גם להגשת הטופס באמצעות מקש ENTER.

עכשיו בואו נוסיף את ארבעת שדות הקלט לתכונות המשתמש:

דוא"ל: סיסמא: שם: גיל: 

לכל שדה קלט יש כריכה למאפיין של מִשׁתַמֵשׁ משתנה דרך מודל ng תְכוּנָה.

לקביעת כללי אימות, אנו משתמשים ב- HTML5 נדרש תכונה ומספר מאפיינים ספציפיים ל- AngularJS: ng-minglength, ng-maxlength, ng-min, ו נג-לקצץ.

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

על מנת להוסיף הודעות שגיאה המתאימות לכל שדה, AngularJS מציעה את הודעות ng הנחיה, שעוברת דרך קלט שגיאות $ מתנגד ומציג הודעות על בסיס כל כלל אימות.

בואו נוסיף את ההנחיה ל אימייל שדה מיד לאחר הגדרת הקלט:

אימייל שגוי!
נדרש אימייל!

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

אנו יכולים לשלוט מתי מוצגת ההנחיה בשביל ה אימייל שדה באמצעות ng-show נכס עם ביטוי בוליאני. בדוגמה שלנו, אנו מציגים את ההנחיה כאשר לשדה ערך לא חוקי, כלומר ה- $ לא חוקי רכוש הוא נָכוֹן, וה הוגש משתנה הוא גם נָכוֹן.

הודעת שגיאה אחת בלבד תוצג בכל פעם עבור שדה.

אנו יכולים להוסיף סימן סימן ביקורת (המיוצג על ידי תו קוד HEX ✓) לאחר שדה הקלט למקרה שהשדה תקף, תלוי $ תקף תכונה:

 ✓ 

אימות AngularJS מציע גם תמיכה בעיצוב באמצעות שיעורי CSS כגון תקף ng ו ng- לא חוקי או יותר ספציפיים כמו ng- לא חוקי-חובה ו ng-invalid-minlength.

בואו נוסיף את מאפיין CSS גבול צבע: אדום לתשומות לא חוקיות בתוך הטפסים שגיאת טופס מעמד:

.form-error input.ng- לא חוקי {color-color: red; }

אנו יכולים גם להציג את הודעות השגיאה באדום באמצעות מחלקת CSS:

הודעות שגיאה {צבע: אדום; }

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

5. מסקנה

במדריך זה, הראינו כיצד נוכל לשלב אימות בצד הלקוח ובצד השרת באמצעות AngularJS ו- Spring MVC.

כמו תמיד, ניתן למצוא את קוד המקור המלא של הדוגמאות ב- GitHub.

כדי להציג את היישום, גש אל / userPage כתובת אתר לאחר הפעלתו.