PracticU

פתיחה ופענוח טוקן - Decoding the Token

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › פתיחה ופענוח טוקן - Decoding the Token
מילון מושגים:
טוקן - פיסת מידע שמשמשת לאימות או להרשאה, שהמערכת מנפיקה ללקוח ומוצגת בבקשות הבאות במקום סיסמה.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
ספרייה - אוסף קוד מוכן, כמו פונקציות ומחלקות, שמפתחים משתמשים בו בתוכניותיהם במקום לכתוב הכול מחדש.
חבילה - אוסף ארוז של קוד, ספריות או קבצים המופץ כיחידה אחת ומותקן בעזרת מנהל חבילות.
JWT - אסימון חתום בפורמט JSON שמעביר נתוני זהות והרשאה בין צדדים באופן קומפקט ומאומת.
קומפיילר - תוכנה שממירה קוד מקור שנכתב בשפת תכנות לקוד שהמחשב יכול להריץ, ומדווחת על שגיאות תחביר.
שם משתמש - מזהה ייחודי שמשתמש מזין כדי להזדהות במערכת, לרוב יחד עם סיסמה.
אתר אינטרנט - אוסף של דפים ומשאבים מקושרים המתארחים תחת כתובת אחת ומוגשים דרך דפדפן.

פתיחה ופענוח טוקן - Decoding the Token

בשיעור זה אנו משלימים את ה-Reducer של האימות ולומדים כיצד לפענח את הטוקן שקיבלנו מהשרת, כדי לחלץ מתוכו את אובייקט המשתמש ולשמור אותו ב-State עבור כל רחבי האפליקציה.
נושאי הסיכום המוצגים בשיעור:
1. היעד שלנו: לחלץ את אובייקט המשתמש שנמצא בתוך הטוקן ולשים אותו ב-State, כדי שנוכל להשתמש בו בכל מקום באפליקציה, וחשוב להבין שאין לנו לנחש מה השרת שולח, אלא חובה להכיר בדיוק מה הוא מחזיר בתוך הטוקן.
2. התקנת הספרייה לפענוח: מתקינים בעזרת מנהל החבילות ספריית פענוח מסוג JWT, שמכילה פונקציה בודדת ופשוטה לפענוח הטוקן, ואין צורך להתקין הגדרות טיפוסים עבורה.
3. הפעלת פונקציית הפענוח: הפונקציה מקבלת את הטוקן ששמרנו ב-State החדש, או לחלופין את ה-Load שהגיע מהפעולה, ומחזירה אובייקט מעטפת ולא ישירות את אובייקט המשתמש.
4. מה יש בתוך הטוקן: בתוך הטוקן שתולים נתונים שונים כמו תאריך תפוגה ועוד, ואחד מהם הוא אובייקט המשתמש, והאובייקט המעטפת שמתקבל מהפענוח מכונה בז'רגון של JWT בשם payload, ומוטב לקרוא לו payload של JWT כדי לא להתבלבל עם ה-Load של ה-Action.
5. הבעיה של טיפוס לא ידוע: כאשר ניגשים לשדה המשתמש בתוך המעטפת שפוענחה, הקומפיילר מתריע שהוא אינו יודע מה יש בתוכה, מכיוון שהפונקציה כללית ומחזירה טיפוס לא ידוע.
6. הפתרון, המרת טיפוס: כיוון שאנחנו יודעים בוודאות שהשרת שתל בתוך הטוקן אובייקט בשם משתמש, מבצעים המרת טיפוס ומכריזים לקומפיילר שהערך הזה הוא כל טיפוס שהוא, ואם השרת באמת מחזיר משתמש בשם הזה הכל יעבוד, ואם לא, יתקבל ערך לא מוגדר ויהיו בעיות בפרויקט.
7. השלמת ה-State: את אובייקט המשתמש שחולץ מציבים ב-State החדש, ובכך השלמנו את State האימות שמכיל הן את הטוקן שניתן להשתמש בו בכל רחבי האפליקציה והן את אובייקט המשתמש שחולץ ממנו ונשמר במשתנה נפרד.
8. בדיקת התוכן של טוקן בעיניים: בהמשך נראה איך ניתן לפתוח טוקן ולראות את תוכנו באתר אינטרנט ייעודי בלי לכתוב קוד, אך לצורך זה דרוש קודם כל טוקן אמיתי, והוא מתקבל רק אחרי רישום או התחברות שעוד לא בנינו.
לסיכום, בשיעור זה השלמנו את ה-Reducer של האימות על ידי פענוח הטוקן בעזרת ספרייה ייעודית, הבנו מה המבנה של הטוקן ומהו ה-payload שלו, למדנו כיצד מספקים לקומפיילר שהשדה הרצוי אכן קיים באמצעות המרת טיפוס, ובכך ה-State שלנו מכיל עתה גם את הטוקן וגם את אובייקט המשתמש המחולץ ממנו. SR12683HE

פרקי ההרצאה: פתיחה ופענוח טוקן - Decoding the Token

  1. 00:00

    חילוץ היוזר מתוך הטוקן

  2. 00:41

    התקנת ספריית JWT Decode

  3. 01:18

    שימוש בפונקציית JWT Decode

  4. 01:56

    הכרת ה-JWT payload

תמלול ההרצאה: פתיחה ופענוח טוקן - Decoding the Token

הטקסט המלא של הדקות הראשונות בהרצאה «פתיחה ופענוח טוקן - Decoding the Token» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:26

    בסדר? אז בשביל להצליח לעשות את זה אנחנו צריכים התקנה. ההתקנה שאנחנו צריכים NPMI נקראת JWT מקף Decode, כי זה מה שאנחנו עושים, אנחנו עושים Decode וכאילו מפענחים את מה שכתוב בתוך ה-JSON Web טוקן במחוזת הזאת.

  3. 00:49

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

  4. 01:11

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

  5. 01:26

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

  6. 01:46

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

  7. 02:03

    אנחנו נקרא לאובייקט הזה JWT payload כי בז'רגון המונחים של JWT הוא נקרא payload אבל אנחנו לא רוצים להתבלבל בין ה-payload הזה ל-payload הזה אז קראתי לו JWTpayload זה payload ש-JWT מביאה לי בתוך הטוקן בתוך ה-payload יושב אותו יוזר אבל רגע קודם כל הפונקציה פענחה את האובייקט הראפר הזה והביאה לי

  8. 02:31

    אותו.

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: יצירת Redux AuthState

ההרצאה הבאה: יצירת Auth Service

הרצאות קשורות מקורסים אחרים

  • FortiGate Token
  • הגדרת מסך פתיחה - Splash Screen
  • גניבת זהות והעלאת הרשאות - meterpreter steal token

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS