PracticU

שליחת JWT Token - ריאקט

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

שליחת JWT Token - ריאקט
איך שולחים ל-Backend את הטוקן, כך שראוט שדורש כניסה יאשר את הבקשה. הדוגמה היא פונקציית קבלת העובדים בסרוויס העובדים.
השלבים העיקריים
1. איפה מוסיפים: הפנייה ל-Backend נמצאת בסרוויס, והיא קוראת ל-Axios בלי הטוקן. האובייקט השני של Axios (AxiosRequestConfig) כולל headers, מידע נלווה לבקשה, כמו IP, סוג דפדפן או תאריך. בבקשת get אין body, אבל יש headers.
2. בניית ה-header: יוצרים משתנה headers עם שדה Authorization שערכו Bearer (עם רווח) משורשר לטוקן המדויק שקיבלנו מהשרת. מעבירים אותו בקונפיג של הבקשה: { headers }.
3. מי מביא את הטוקן: סרוויס העובדים עוסק רק בעובדים, ולכן הגישה ל-State של האימות שייכת ל-AuthService. בונים בו getter בשם token שמחזיר מחרוזת (או null) מתוך store.getState(). קוראים לו בלי סוגריים, כמו משתנה.
4. בדיקה: אחרי רענון לא מחוברים ויש שגיאה. אחרי כניסה עם המשתמש שנרשם, רשימת העובדים מוצגת.
טעויות נפוצות
- כתיבת Bearer בלי רווח אחריו.
- שליחת ערך אחר מהטוקן.
- טוקן שפג תוקפו.
בכל אחד מהמקרים השרת ידחה את הבקשה.
אחרי השיעור הטוקן נשלח בבקשה בפורמט שהשרת מצפה לו, אבל בינתיים בכל בקשה בנפרד.
השיעור הבא בקורס: שליחת JWT דרך Interceptor - ריאקט

פרקי ההרצאה: שליחת JWT Token - ריאקט

  1. 00:00

    מתי ואיפה שולחים את הטוקן

  2. 00:41

    בעיית העובדים ללא טוקן

  3. 01:16

    שליחת הטוקן ב-headers

  4. 01:53

    הדר Authorization לפי JWT

  5. 02:32

    גישה לטוקן מתוך Redux

תמלול ההרצאה: שליחת JWT Token - ריאקט

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

  1. 00:02

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

  2. 00:21

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

  3. 00:38

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

  4. 00:56

    איך היא אמורה לעשות את זה? היא אמורה לעשות את זה במשהו שנקרא headers אם אני אשים פה פסיק אני אני אראה שיש פה עוד קונפיגורציה של access, שזה סך הכל איזשהו אובייקט שנקרא access request config.

  5. 01:13

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

  6. 01:29

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

  7. 01:54

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

  8. 02:23

    authorization והvalue שלו אמור להיות ברר רווח ואז כאן אני רוצה לשרשר את אותו טוקן. איך אני מגיע לטוקן? Store, Get a State, Outstate, טוקן.

  9. 02:43

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

  10. 02:57

    Employees Service מתעסקת רק עם דברים שקשורים ל-Employees, וניגשת לרידאקס של אמפלואיז. אם אני רוצה לגשת לרידאקס של מישהו אחר,

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

ההרצאה הקודמת: ריאקט - Blocking Backend Route

ההרצאה הבאה: שליחת JWT דרך Interceptor - ריאקט

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

  • FortiGate Token
  • שליחת email
  • הסבר על JWT לאימות משתמשים
  • שליחת מאפיינים לרכיב

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

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