26/05/2019

JWT & Angular

בפוסט הקודם דיברנו על הטמעת JWT בצד השרת (מבוסס .NET), בפוסט זה נדבר על ההטמעה מהצד של הלקוח.

בצד הלקוח, בחרנו באנגולר (גירסה 6 למי שתוהה) עם Bootstrap 4, Angular Materials כסיפריות UI. אהה, וממש קצת ng-bootstrap.

נעבור על שליחת בקשת האימות לשרת, איך נתמודד עם JWT המתקבל מהשרת ואיך אנו שולחים את מחרוזת ה-JWT לשרת בכל קריאה (לא, לא נוסיף אותה בכל קריאה לשרת באופן ידני, בשביל זה יש לנו Interceptors)

בקשת אימות לשרת

בקשת אימות לשרת תתבצע מהלקוח. המשתמש מזין את פרטיו בטופס כניסה (בדרך כלל שם משתמש וסיסמא). מומלץ מאוד לנקות רווחים לפני ו/או אחרי הנתונים המוקלדים (Trim) לפני השליחה לשרת (בכלל, כל טופס בו אנו מקבלים נתונים מהמשתמש, רצוי לנקות רווחים לפני השליחה לשרת).

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

מחרוזת JWT מהשרת

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

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

localStorage.setItem('myToken', data.token);

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

1. בקשה לרענון המחרוזת ע"י הודעה מתאימה למשתמש ובקשת הזדהות חדשה

2. הודעה מתאימה על פג תוקף האימות, ומעבר לדף הזדהות. אנו בחרנו באפשרות זו.

אז איך קוראים את הפרטים ששלחנו במחרוזת?

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

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

עוד פרטים על הסיפרייה המעולה הזו (איך מתקינים, מתודות וכו') כאן, או ב- GitHub.

שליחת JWT לשרת

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

איך עושים את זה? פשוט – Interceptors.

אנגולר נותן לנו אפשרות להעביר כל קריאת HTTP דרך קומפוננטה מיוחדת, הנקראית Interceptor. בסיפרייה זו, נשכפל את הקריאה לשרת ונוסיף ל- Header שלה את המחרוזת. כפי שכתבנו בפוסט הקודם, השרת יודע "לפרק" מה- Header את המחרוזת ולוודא את תקינותה ולהחליט על דרך הפעולה.

אז, איך מטמיעים Interceptor?

האינטרנט מלא בדוגמאות… זוכרים שאמרנו שאנחנו לא רוצים להיות כמו כולם? אז לא נרשום פה עוד דוגמא… פשוט, תוכלו למצוא פרטים נוספים על Interceptors ואיך להטמיע בפרוייקט שלכם כאן. (בכלל, במדיום יש מלא מידע (לא רק על אנגולר). אם תחפשו Angular Interceptors Medium תמצאו לא מעט דוגמאות. רק לוודא שהדוגמאות תואמות לגירסה שלכם).

נדגיש ונאמר – Interceptors פועלים לשני הכיוונים, ז"א בקריאה לשרת (Request) ובקבלת תשובה (Response). כך למשל, אפשר לבדוק את תשובת השרת ולהחליט מה לעשות (למשל, אם קיבלנו תשובה 401 – Unauthorized, נעביר הודעה מסודרת למשתמש ונעביר אותו לדף האימות מחדש)

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