Angular – Tokens Part 1: Cookies vs Tokens

הקדמה

כאשר אנו מפתחים אפליקציות ישנם 2 דרכים לביצוע אימות (=authentication) בצד שרת:

1.  הפופלארית וותיקה – Cookies:

– מאוכסן ב Session ID

– כל המידע שב Session מאוחסן בצד השרת.

2. הגישה החדשה – Tokens (יוסבר בהמשך)

Token vs Cookie

Cross-domain – ה Cookie לא יכול לעבור בין דומיינים. בגישה של Token אין זאת בעיה מכיוון שאנו משתמשים ב HTTP header על מנת להעביר מידע על המשתמש.

Cookie נשלח בכל בקשה – ה Cookie נשלח בכל בקשה לשרת.

Token – דורש מאתנו יותר קוד אך יש לו יותר מגוון אפשרויות (נותן יותר שליטה)

אחסון– בגדול ה Token נשמר עצמאית ולא צריך להיות מאוכסן ב Session, אך יש לנו בעיה שאם נעשו refresh לדף הוא יעלם, לכן יש צורך לשמור אותו ב Session \ Local Storage. בשונה מאימות בעזרת Cookie ששם אנחנו משתמשים ב Cookie לצורך מערכת אימות בשרת, ב Token רק מאוחסן ב Session.

פג תוקף – גם ל Token יש תאריך תוקף (מצויין בערך exp של JWT)  כמו ל Cookie אך היתרון הוא שברגע שה Token פג ניתן ליצור את ה Token מחדש במידת הצורך.

שליחה לשרת – ה Cookie נשלח עבור כל קריאה לשרת, לעומת זאת ה Token נשלח רק מתי שצריך.

הפרדת גבולות – ב Token אין סכמה קבועה לאימות, ה Token יכול להיווצר מכל מקום.

מובייל – כאשר עובדים עם פיתוח web שיצרו אפליקציות native למובייל, השימוש ב Cookies אינו אידיאלי. גישה של Token הרבה יותר קלה.

בדיקות – אם משמשים לצורך הבדיקות ב Protractor בעזרת Token לא יהיה צורך לפתור את בעיית ה login

Token Based Authentication

לאחר ששלחנו את פרטי המשתמש לשרת כדי לבדוק את ה login, בחזרה מהשרת נקבל מה שנקרא JWT – JSON Web Token: בקצרה זה אובייקט JSON מקודד שמייצג מוסכמות העברת נתונים בין 2 משתמשים (הלקוח והשרת).

token-based-authentication-system-png

חשוב לציןן, כאשר משתמשים בגישת ה Token אין שימוש לצורך האימות המשתמש.

Token with Api and Angular

Overview

נניח שיש לנו שרת שיש לו 2 נקודות גישה:

1. api/userBankData/

2. login/

בשביל לקבל את המידע שיש ב userBankData ישנו צורך באימות, לצורך האימות יש לנו את נקודת הגישה של ה login שעובד עם אימות OAuth2 style.

הדרך שלנו לעבודה עם השרת היא בכמה Servers של Angular:

1. oauth – אחראי על יצירת קשר עם ה login באמצעות http request.

2. currentUser – לאחר אימות של ה oauth מול הלוגין הישלח לנו Token והוא יאוחסן ב Service של currentUser

3. addToken –  ידע איך לשלוח בקשות תוספת של ה Token על מנת לקבל פרטים הדורשים משתמש מאומת.

לכידה

בפרק הבא נבנה דמו שמציגת אימות באמצעות Token + Angular.

לסיכום:

עם התגית: , , , , , ,
פורסם ב-Angular, AngularJs, Cookies, OAuth, Session, Token, אנ

כתיבת תגובה