ענן אביב - הוספת זוויתית 4

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

במאמר ענן האביב האחרון שלנו, הוספנו תמיכה של Zipkin ליישום שלנו. במאמר זה אנו הולכים להוסיף יישום חזיתי למחסנית שלנו.

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

אנו נכתוב אפליקציה זו באמצעות זוויתי ו Bootstrap. הסגנון של קוד Angular 4 מרגיש הרבה כמו קידוד אפליקציית Spring שהיא קרוסאובר טבעי עבור מפתח Spring! בעוד שקוד החזית ישתמש באנגולר, ניתן להרחיב את תוכנו של מאמר זה בקלות לכל מסגרת חזית במינימום מאמץ.

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

2. שינויים בשער

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

2.1. עדכון HttpSecurity

ראשית, בואו נעדכן הגדר (HttpSecurity http) השיטה בשער שלנו SecurityConfig.java מעמד:

התצורה הריקה המוגנת על ידי @Override (HttpSecurity http) {http .formLogin () .defaultSuccessUrl ("/ home / index.html", true) .and () .authorizeRequests () .antMatchers ("/ שירות שירות / **" "/ rating-service / **", "/ login *", "/") .permitAll () .antMatchers ("/ eureka / **"). hasRole ("ADMIN") .anyRequest (). מאומת () .and () .logout () .and () .csrf (). השבת (); }

ראשית, אנו מוסיפים כתובת URL להצלחה המוגדרת כברירת מחדל /home/index.html מכיוון שזה יהיה המקום בו מתגוררת האפליקציה Angular שלנו. לאחר מכן, אנו מגדירים את התאמת הנמלים כך שתאפשר כל בקשה דרך השער למעט ה- יוריקה אֶמְצָעִי. זה יאציל את כל בדיקות האבטחה לשירותי עורקים.

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

2.2. הוסף נקודת קצה ראשית

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

בפרויקט השער, הוסף AuthenticationController מעמד:

@RestController מחלקה ציבורית AuthenticationController {@GetMapping ("/ me") מנהל ציבורי getMyUser (מנהל ראשי) {return return; }}

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

2.3. הוסף דף נחיתה

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

ב src / main / resources / static, בואו נוסיף index.html קובץ עם קישור לדף הכניסה:

    נייר דירוג ספרים כל כך הרבה דברים מעולים בספרים
 התחברות

3. CLI זוויתי ופרויקט Starter

לפני שתתחיל פרויקט Angular חדש וודא להתקין את הגרסאות העדכניות ביותר של Node.js ו- npm.

3.1. התקן את ה- CLI הזוויתי

כדי להתחיל, נצטרך להשתמש npm להורדה והתקנה של ממשק שורת הפקודה Angular. פתח מסוף והפעל:

npm להתקין -g @ angular / cli

פעולה זו תוריד ותתקין את ה- CLI ברחבי העולם.

3.2. התקן פרויקט חדש

בעודך במסוף, נווט לפרויקט השער והיכנס לתיקיית השער / src / הראשי. צור ספריה בשם "זוויתי" ונווט אליה. מכאן לרוץ:

ממשק משתמש חדש

להיות סבלני; הקמת ה- CLI מקימה פרויקט חדש והורדת כל התלות ב- JavaScript באמצעות npm. לא נדיר שתהליך זה ייקח דקות רבות.

ה נג הפקודה היא קיצור הדרך עבור ה- CLI Angular, ה- חָדָשׁ הפרמטר מורה ל- CLI ליצור פרויקט חדש, ו- ממשק משתמש הפקודה נותנת שם לפרויקט שלנו.

3.3. הפעל את הפרויקט

פעם ה חָדָשׁ הפקודה הושלמה. נווט אל ממשק משתמש התיקיה שנוצרה והופעלה:

נג מגיש

לאחר בניית הפרויקט נווט אל // localhost: 4200. עלינו לראות זאת בדפדפן:

מזל טוב! הרגע בנינו אפליקציית Angular!

3.4. התקן את Bootstrap

בואו נשתמש ב- npm להתקנת bootstrap. מספריית ה- ui הפעל פקודה זו:

npm להתקין [מוגן באמצעות דוא"ל] - שמור

פעולה זו תוריד את bootstrap לתיקיית node_modules.

בתוך ה ממשק משתמש ספריה, פתח את .angular-cli.json קוֹבֶץ. זהו הקובץ שמגדיר כמה מאפיינים לגבי הפרויקט שלנו. למצוא את ה אפליקציות> סגנונות מאפיין והוסף מיקום קובץ של מחלקת ה- Bootstrap CSS שלנו:

"סגנונות": ["styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css"],

פעולה זו תנחה את Angular לכלול את Bootstrap בקובץ ה- CSS המהולל שנבנה עם הפרויקט.

3.5. הגדר את מדריך הפלט לבנות

לאחר מכן, עלינו לומר ל- Angular היכן לשים את קבצי ה- build כך שאפליקציית אתחול האביב שלנו תוכל לשרת אותם. Spring Boot יכול להגיש קבצים משני מיקומים בתיקיית המשאבים:

src / main / resources / static
src / main / resource / public

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

פתח את ה .angular-cli.json הקובץ שוב ומצא את אפליקציות> outDir תכונה. עדכן את זה חוּט:

"outDir": "../../resources/static/home",

אם פרויקט Angular ממוקם ב- src / main / angular / ui, הוא יבנה לתיקייה src / main / resources / public. אם האפליקציה בתיקיה אחרת תצטרך לשנות מחרוזת זו כדי להגדיר את המיקום כהלכה.

3.6. אוטומט את הבניין עם Maven

לבסוף, אנו קובעים בנייה אוטומטית להפעלה כאשר אנו מרכיבים את הקוד שלנו. משימת נמלים זו תפעיל את משימת בניית ה- CLI Angular בכל פעם ש- "compile compile" מופעל. הוסף שלב זה ל- POM.xml של השער כדי להבטיח שבכל פעם שאנחנו מקבצים נקבל את השינויים האחרונים בממשק המשתמש:

 לרוץ משאבי ייצור של maven-antrun-plugin

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

עכשיו נתחיל בבניית היישום Angular שלנו!

4. זוויתי

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

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

בשלב הבא אנו משתמשים בתעודות שלהם כדי ליצור אסימון אימות base64 ולבקש את ה- "/לִי" נקודת סיום. נקודת הסיום מחזירה א קֶרֶן אובייקט המכיל את התפקידים של משתמש זה.

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

בואו נראה איך זה נעשה!

4.1. תבנית

בפרויקט השער, נווט אל src / main / angular / ui / src / app ופתח את app.component.html קוֹבֶץ. זו התבנית הראשונה ש- Angular טוענת ויהיה המקום בו המשתמשים שלנו ינחתו לאחר הכניסה לחשבון.

כאן אנו נוסיף קוד להצגת סרגל ניווט עם טופס כניסה:

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

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

הצהרות כמו (ngSubmit) = "onLogin (f)" פשוט ציין שכאשר הטופס מוגש התקשר לשיטה "OnLogin (f)" ולהעביר את הטופס לאותה פונקציה. בתוך ה ג'ומבוטרון div, יש לנו תגי פסקאות שיוצגו באופן דינמי בהתאם למצב האובייקט העיקרי שלנו.

לאחר מכן, בואו לקודד את קובץ ה- Typescript שיתמוך בתבנית זו.

4.2. כתב כתב

מאותה ספריה פתח את הקובץ app.component.ts. בקובץ זה נוסיף את כל המאפיינים והשיטות הנדרשים בכדי לגרום לתפקוד התבנית שלנו:

ייבא את {Component} מ- "@ angular / core"; ייבא את {Principal} מ- "./principal"; ייבא את {Response} מ- "@ angular / http"; ייבא את {Book} מ- "./book"; ייבא את {HttpService} מ- "./http.service"; @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) מחלקת ייצוא AppComponent {שנבחר ספר: ספר = null; המנהל: המנהל = המנהל החדש (שקר, []); loginFailed: בוליאני = false; קונסטרוקטור (פרטי httpService: HttpService) {} ngOnInit (): בטל {this.httpService.me (). מנוי ((תגובה: תגובה) => {let principalJson = response.json (); this.principal = מנהל חדש (principalJson .authenticated, principalJson.authorities);}, (error) => {console.log (error);}); } onLogout () {this.httpService.logout (). מנוי ((תגובה: תגובה) => {אם (respons.status === 200) {this.loginFailed = false; this.principal = חדש מנהל (false, [ window.location.replace (response.url);}}, (error) => {console.log (error);}); }}

מעמד זה משתלב בשיטת מחזור החיים הזוויתי, ngOnInit (). בשיטה זו אנו מכנים /לִי נקודת קצה כדי לקבל את התפקיד והמצב הנוכחי של המשתמש. זה קובע מה המשתמש רואה בעמוד הראשי. שיטה זו תפוטר בכל פעם שיוצר רכיב זה וזה זמן מצוין לבדוק את מאפייני המשתמש לגבי הרשאות באפליקציה שלנו.

יש לנו גם onLogout () שיטה שמנתקת את המשתמש שלנו ומחזירה את מצב הדף להגדרות המקוריות שלו.

יש כאן קסם. ה httpService נכס המוצהר בבונה. Angular מזריקה נכס זה לשיעור שלנו בזמן ריצה. Angular מנהלת מקרים בודדים של שיעורי שירות ומזריקה אותם באמצעות הזרקת קונסטרוקטור, ממש כמו אביב!

בשלב הבא עלינו להגדיר את HttpService מעמד.

4.3. HttpService

באותה ספריה צור קובץ בשם "Http.service.ts". בקובץ זה הוסף קוד זה לתמיכה בשיטות הכניסה וההתקה:

ייבא את {Injectable} מ- "@ angular / core"; ייבא את {Observable} מ- "rxjs"; ייבא את {Response, Http, Headers, RequestOptions} מ- "@ angular / http"; ייבא את {Book} מ- "./book"; ייבא את {Rating} מ- "./rating"; @Injectable () מחלקת ייצוא HttpService {קונסטרוקטור (פרטי http: Http) {} אותי (): נצפה {להחזיר this.http.get ("/ לי", this.makeOptions ())} יציאה (): נצפה {להחזיר את זה .http.post ("/ logout", '', this.makeOptions ())} makeOptions פרטיים (): RequestOptions {let headers = new Headers ({'Content-Type': 'application / json'}); להחזיר RequestOptions חדשים ({headers: headers}); }}

בשיעור זה אנו מזריקים תלות נוספת באמצעות מבנה DI של Angular. הפעם זה ה Http מעמד. כיתה זו מטפלת בכל תקשורת ה- HTTP ומסופקת לנו על ידי המסגרת.

שיטות אלה מבצעות כל אחת בקשת HTTP באמצעות ספריית ה- HTTP של angular. כל בקשה מציינת גם סוג תוכן בכותרות.

עכשיו אנחנו צריכים לעשות דבר נוסף כדי להשיג את HttpService רשום במערכת הזרקת התלות. פתח את ה app.module.ts להגיש ולמצוא את רכוש הספקים תוסיף את ה HttpService למערך ההוא. התוצאה צריכה להיראות כך:

ספקים: [HttpService],

4.4. הוסף מנהל

לאחר מכן, בואו נוסיף את אובייקט ה- DTO הראשי שלנו בקוד Typescript. באותה ספריה הוסף קובץ בשם "principal.ts" והוסף קוד זה:

מחלקת ייצוא המנהלת {ציבורית מאומתת: בוליאנית; רשויות ציבוריות: סמכות [] = []; אישורי ציבור: כלשהו; קונסטרוקטור (מאומת: בוליאני, רשויות: כל [], אישורים: כל אחד) {this.authenticated = מאומת; autorisations.map (auth => this.authorities.push (רשות חדשה (auth.authority))) this.credentials = אישורים; } isAdmin () {להחזיר this.authorities.some ((auth: Authority) => auth.authority.indexOf ('ADMIN')> -1)}} מחלקת ייצוא סמכות {רשות ציבורית: String; קונסטרוקטור (סמכות: מחרוזת) {this.authority = סמכות; }}

הוספנו את קֶרֶן כיתה ו רָשׁוּת מעמד. אלה שני שיעורי DTO, בדומה ל- POJO באפליקציית אביב. מסיבה זו, איננו צריכים לרשום שיעורים אלה במערכת ה- DI בזווית.

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

4.5. 404 טיפול

בואו ננווט בחזרה לקוד Java עבור שירות השער. באיפה GatewayApplication בכיתה מתגוררת להוסיף מחלקה חדשה בשם ErrorPageConfig:

המחלקה הציבורית @Component ErrorPageConfig מיישמת את ErrorPageRegistrar {@Override public void registerErrorPages (ErrorPageRegistry registry) {registry.addErrorPages (חדש ErrorPage (HttpStatus.NOT_FOUND, "/home/index.html")); }}

מחלקה זו תזהה כל תגובה 404 ותנתב את המשתמש אליה “/Home/index.html”. באפליקציה של עמודים בודדים, כך אנו מטפלים בכל תעבורה שלא עוברת למשאב ייעודי מכיוון שהלקוח צריך לטפל בכל המסלולים הניתנים לניווט.

עכשיו אנחנו מוכנים להפעיל את האפליקציה הזו ולראות מה בנינו!

4.6. לבנות ולהציג

עכשיו רוץ “לקמפל mvn”מתיקיית השער. זה ירכיב את מקור ה- Java שלנו ויבנה את אפליקציית Angular לתיקיה הציבורית. נתחיל ביישומי הענן האחרים: config, תַגלִית, ו זיפקין. ואז הפעל את פרויקט השער. כאשר השירות מתחיל, נווט אל // localhost: 8080 לראות את האפליקציה שלנו. אנחנו צריכים לראות משהו כזה:

לאחר מכן, בוא נלך על הקישור לדף הכניסה:

התחבר באמצעות אישורי המשתמש / סיסמה. לחץ על "התחברות", וכי יש להפנות אותנו אל /home/index.html שם אפליקציית העמוד היחיד שלנו נטענת.

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

נראה טוב! עכשיו אנחנו מחוברים כמנהל.

5. מסקנה

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

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

אם תרצה לראות כיצד שאר האתר בנוי כמו תמיד, תוכל למצוא את קוד המקור ב- Github.

streamalism.org