PracticU

יצירת Auth Service

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › יצירת Auth Service
מילון מושגים:
צד שרת - החלק של היישום שרץ בשרת ואחראי על הלוגיקה, מסדי הנתונים והעיבוד שמאחורי הקלעים.
TypeScript - שפת תכנות המרחיבה את JavaScript בהוספת טיפוסים, ומתקמפלת ל-JavaScript רגיל.
POST - שיטת HTTP לשליחת נתונים לשרת כדי ליצור או לעדכן משאב, למשל שליחת טופס.
טוקן - פיסת מידע שמשמשת לאימות או להרשאה, שהמערכת מנפיקה ללקוח ומוצגת בבקשות הבאות במקום סיסמה.
JWT - אסימון חתום בפורמט JSON שמעביר נתוני זהות והרשאה בין צדדים באופן קומפקט ומאומת.
צד לקוח - החלק של היישום שרץ בדפדפן ומולו המשתמש מתקשר, הכולל את התצוגה והאינטראקציה.
Callback - פונקציה שמועברת כארגומנט לפונקציה אחרת כדי שתופעל מאוחר יותר, לרוב בסיום פעולה.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.

יצירת Auth Service
בניית סרוויס לאימות (AuthService) שמרכז את כל העבודה מול ה-Backend ומול Redux, כדי שהקומפוננטות של הטפסים יישארו פשוטות.
הפונקציות שנבנו
1. המבנה: מחלקה AuthService ב-TypeScript, ממנה נוצר אובייקט אחד שמיוצא כ-export default. הרעיון כמו אחרי לימוד Redux: משתמשים בסרוויס ולא ב-Redux ישירות מהקומפוננטות.
2. register: פונקציה async שמקבלת UserModel מהטופס, שולחת אותו בבקשת post לכתובת ההרשמה, שולפת את token מ-response.data ועושה dispatch עם register action. אין תמונה, ולכן אפשר לשלוח את המשתמש כמו שהוא, בלי form data.
3. כתובות בקונפיג: מוסיפים בקובץ הקונפיגורציה שתי כתובות, הרשמה וכניסה, שבנויות מה-base ועוד auth/register ו-auth/login. אין כתובת ללוג אאוט, כי השרת עובד עם JWT.
4. login: מועתקת מ-register אך מקבלת CredentialsModel, ממשק חדש שמכיל רק username ו-password. כי לכניסה אין צורך בשם פרטי ובשם משפחה. הפעולה היא login action.
5. logout: עושה רק dispatch של logout action. לא פונים לשרת, כי שרת REST API לא שומר מי מחובר. האחריות על הטוקן היא של ה-Frontend, ומחיקת הטוקן מ-Redux מנתקת את הגישה.
6. subscribe: מקבלת callback שמקבל את AuthState, ומחזירה את ה-unsubscribe של Redux. הקומפוננטה מקבלת רק את AuthState ובוחרת ממנו את המשתמש או הטוקן.
שימו לב
- ל-register ול-login משתמשים ב-post, כי כך מקובל בכל העולם, גם כשהכניסה מחזירה מידע.
- בזמן ההרצאה קובץ הקונפיג לא זוהה אוטומטית ויובא ידנית.
אחרי ההרצאה יש סרוויס שיודע להירשם, להתחבר, לצאת ולהאזין לשינויי ה-State.
השיעור הבא בקורס: יצירת Registration Component

פרקי ההרצאה: יצירת Auth Service

  1. 00:00

    בניית הסרוויס לאותנטיקציה

  2. 00:39

    יצירת מחלקת OutService

  3. 01:17

    פונקציית register בסרוויס

  4. 02:11

    שימוש ב-access.post

  5. 03:03

    קבלת טוקן מהשרת

  6. 03:57

    הכרת ה-URLs בקונפיג

  7. 04:33

    הוספת URL להרשמה וכניסה

תמלול ההרצאה: יצירת Auth Service

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

  1. 00:02

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

  2. 00:29

    אוקיי? אם זה יותר הגיוני לבנות Service, כבר עכשיו נבנה את הסרוויס ואז בהמשך נשתמש עם הסרוויס ולא עם רידאקס בצורה ישירה במהלך הקומפוננטות. עכשיו אנחנו ניגשים לסרוויסים, מוסיפים outService typeScript class outService בואו נייצר מהדבר הזה Object const outService שווה new outService ונחצין

  3. 00:54

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

  4. 01:27

    החזיר promise void ו-register זאת פונקציה שכנראה טופס הרשמה יקרא לה ויגיד הנה user בוא תשלח אותו לדאטאבייס כולל ל-redux אז אנחנו מקבלים את ה-user לכאן user מודל זה בעצם משהו שהטופס אמור להביא לנו הפורם אמור להביא user מודל ולא בעצמו לשלוח ל-redux או ל-backend אלא להביא לסרוויס לפונקציה הזאת ואנחנו גם

  5. 01:57

    גם שולחים לבקאנד וגם מעדכנים את הרידאקס. אוקיי, מה אנחנו רוצים לעשות בתוך הפונקציה? אנחנו רוצים לקרוא ל-access, אז בואו ניקח ריספונס, await access, מאיזושהי סיבה הוא עוטף לי את זה, פדיחה של ויז'ל סטודיו, העפנו, access.post, גם רג'יסטר וגם לוגין עבור הבקאנד זה תמיד פוסט.

  6. 02:22

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

  7. 02:43

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

  8. 03:00

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

  9. 03:10

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

  10. 03:22

    איפה הקונפיג שלנו? אוי, שאני לא כל כך רואה את זה. למה אני לא רואה את זה? מסתתר לי קונפיג מה זה הקונפיג הזה?

  11. 03:32

    זה לא, לא, לא, אין לי קונפיג. זה פרוסס. זה, מה זה? גם פרוסס. למה הוא לא מראה לי קונפיג?

  12. 03:43

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

  13. 03:55

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

  14. 04:11

    וה-URLים זה אלה, זה ה-URL עבור רג'יסטר, זה ה-URL עבור הלוגין. שימו לב שאין פה URL עבור לוגאוט, כי השרת הזה משתמש בטכניקה שנקראת JWT. וגם אתם יכולים להיכנס לדוקומנטציה של הדבר הזה, ראינו שמתקינים את זה מ-npm אז בדוקומנטציה אפשר לראות בדיוק מה שר"פ מצפה.

  15. 04:33

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

  16. 05:08

    יש לנו אפשרות ל-URL'ים, ה-URL'ים, אוי, שזה

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

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

ההרצאה הבאה: יצירת Registration Component

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

  • יצירת Service ב-Windows
  • הסבר על Firebase Auth - יצירת משתמשים והתחברות לאפלקציה
  • יצירת RESTful Service מאפס
  • יצירת מחלקת Customers Service

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

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