אימות משתמשים בריאקט
Authentication & Authorization
api/products פתוח לכולם, בלי קשר ל-JWT. זה מה שעבדנו איתו עד כה.api/employees דורש שהמשתמש יהיה מחובר.api/auth/register). ה-Frontend שולח את פרטי המשתמש שה-Backend דורש, וה-Backend שומר אותם בדאטאבייס.Authorization עם הערך Bearer, רווח והטוקן עצמו.Bearer או שהטוקן שבור או פג, השירות לא ניתן.credentials, כלומר מה שה-Backend דורש לכניסה כמו אימייל וסיסמה או שם משתמש וסיסמה. בתשובה חוזר שוב טוקן, ואיתו אותו מנגנון.פרקי ההרצאה: אימות משתמשים בריאקט Authentication & Authorization
תמלול ההרצאה: אימות משתמשים בריאקט Authentication & Authorization
הטקסט המלא של הדקות הראשונות בהרצאה «אימות משתמשים בריאקט Authentication & Authorization» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לנושא חדש בשם Authentication and Authorization. בגדול זה נקרא Out. מה שהנושא הזה מאפשר לנו לעשות זה את כל הפעולות של הרשמה, כלומר רג'יסטר של לוג אין, כניסה של לוג אאוט, איך אנחנו יוצאים מהמערכת, איך אנחנו מזהים מי זה אותו יוזר שכרגע, איך
אנחנו יודעים אם יש לו או אין לו הרשאות. כל הנושא הזה הוא נושא מאוד מאוד חשוב. קודם כל בואו נבין מה זה Authentication ו-Authorization. Authentication זה פשוט אותו תהליך שמזהה את היוזר.
מי זה היוזר? האם היוזר שלנו הוא מוישה? האם היוזר שלנו הוא חיים או דנה? מי זה היוזר הזה? כמובן אפשר לעשות את זה רק אחרי שהיוזר מבצע או הרשמה או כניסה או רג'יסטר או לוגין.
לפני זה אני לא אמור לדעת מי זה אותו יוזר, ולכן המצב הזה נקרא יוזר אנונימי, אנונימוס יוזר, אם אני לא יודע מי הוא. האוטוריזיישן זה התהליך של מתן פרמישן, כלומר איזושהי הרשאה ליוזר לבצע משהו.
אני קובע שהיוזר הוא אדמיניסטרטור, או היוזר הוא מנהל, או היוזר הוא מזכירה, או שהוא סתם יוזר פשוט ויש לו את המינימום הרשאות.
לפי ההרשאה הזאת אנחנו יודעים מה הוא יכול לעשות, האם הוא יכול לקבל מידע מסוים או שרק אם הוא מנהל הוא יכול לראות את המידע הזה? האם הוא יכול לעשות פעולה מסוימת או רק אם הוא אדמיניסטרטור הוא יכול לעשות את אותה פעולה?
אז האותנטיקיישן זה אימות ואאוטוריזיישן זה הרשאה מה הוא יכול לעשות. אנחנו הולכים להיכנס לתחום שנקרא JWT. JWT זה Json Web Token וסך הכל מנגנון שמאפשר לזהות מיהו אותו היוזר בצד של ה-Back-End.
אבל אנחנו לא כותבים Back-End, אנחנו React, אנחנו כותבים Front-End. אבל ה-Back-End ברוב המקרים וברוב ה-APIs היום עובדים עם JWT, עם הקונספט הזה.
אנחנו תכף הולכים לראות מה בעצם ה-Back-End מביא לנו, מה אנחנו צריכים להביא לו בחזרה כאשר הוא עובד עם הטכניקה הזאת לזהות את אותו היוזר ולאפשר לנו לעשות כל מיני דברים שאנחנו רוצים לבצע.
לפי כך שהשרת יודע מי אותו יוזר, אז כמובן הוא יכול לדעת מה מותר לו לעשות, מה אסור לו לעשות, יש לו פשוט את ההרשאות לגביו. אז בואו ניכנס ונראה איך כל המנגנון של JWT עובד.
הדבר הראשון שאנחנו הולכים לראות זה מה קורה אם יש לנו ראוט מסוים ב-Backend, אנחנו מדברים על ה-Backend, שהוא פתוח לכולם זאת אומרת גם יוזרים אנונימיים יכולים לגלוש אליו אנחנו לא צריכים להירשם או להיכנס בשביל לגלוש לראוט הזה יש לנו את צד הבאק יש לנו את צד הפרונט ובואו נניח שאותו ראוט שמותר לנו לגלוש אליו שזה דרך אגב גם מה שאנחנו עשינו בפרויקט
הזה לא התעסקנו עם כניסה והרשמה וכולי והצלחנו לגלוש לראוט בשביל לקבל את המוצרים אז בואו נניח שיש לנו ראוט כזה api product ב-Backend, אנחנו מדברים תמיד על ה-Back, ואנחנו רוצים לגלוש אליו ולקבל את המוצרים.
אוקיי, אם הוא פתוח לכולם, אז אנחנו גולשים ומקבלים בחזרה JSON של המוצרים, אין שום בעיה. כאשר יש לנו ראוט כזה, אין פה שום קשר ל-JWT.
אנחנו יכולים להירשם, אבל וואלה, השרת לא מצפה שנביא לו שום דבר מעבר לגלישה פשוטה. כמובן שיש המון ראוטים כאלה.
זאת דוגמה מאוד מאוד פשוטה שזה מה שעשינו עד היום. עכשיו, מה קורה אם יש לנו איזשהו ראוט בבקאנד אבל הוא פתוח רק למשתמשים שעשו לוגד אין.
אתה חייב לבצע לוג אין בשביל להיכנס לראוט הזה. הנה הבקאנד, הנה הפרונט אנד, ובוא נניח שהראוט הזה זה ראוט של אמפלואיז.
אם אתה רוצה לראות את רשימת העובדים, אתה חייב לעשות לוג אין. זה לא משהו שעשינו אותו עד היום, למרות שבדוגמה שאנחנו עובדים איתה כן הצלחנו לראות את העובדים בלי לבצע הרשמה, אבל אנחנו הולכים לשנות את זה.
אז בואו נניח לצורך הדוגמה הזאת שבשביל לקבל את רשימת העובדים, זה ה-Route API employees, ב-Backend אנחנו חייבים לבצע או הרשמה או כניסה, כלומר להיות לוגדיים.
אז איך כל המנגנון עכשיו מתנהל מבחינת ה-Backend וה-Frontend כאשר אנחנו עובדים בטכניקה שנקראת JWT? ה-Backend אשר לנו ראוט נוסף לא משנה מה הראוט ויכול להיות api outh register זה יכול להיות api/register לא משנה כרגע קראתי לו api outh register הבק אנד מכיל ראוט כזה
אנחנו לא כותבים בקורס הזה בק אנד ולכן אנחנו בעצם לא יודעים שזה מה שקורה מאחורי הקלעים ולכן חשוב שנבין שאכן הבק אנד מספק אפשרות כזאת to register ואז מה בעצם הפרונט-אנד צריך לשלוח לאותו ראוט בשביל הרשמה?
הפרונט-אנד צריך לקבל את כל הפרטים של אותו יוזר. כשהוא רוצה לבצע הרשמה אז הוא צריך לקבל מה שהבק-אנד רוצה. נניח שם פרטי ושם משפחה ואימייל וכתובת ותעודת זהות וסיסמה ואולי תחביבים ותמונה ולא משנה מה.
מה שהבק-אנד מחייב אותי, אני צריך כמובן לדעת את זה לפי הדוקומנטציה אולי ולארגן יוזר כזה ולשלוח לו את היוזר. אוקיי, מה ה-Backend עושה? מן הסתם הוא שומר את הפרטים בדאטאבייס, זה בסדר.
אבל מה הוא מחזיר לי בחזרה? ה-Backend מחזיר בחזרה, שימו לב, משהו שנקרא טוקן. טוקן זאת סך הכל מכרוזת, מכרוזת די ארוכה.
המכרוזת הזאת בנויה בפורמט מאוד מיוחד שזה בעצם הפטנט של JWT - Json Web Token. טוקן זה אותה מכרוזת מיוחדת שמחזירים לנו. אז מה יש בתוך המכרוזת הזאת?
מכרוזת ארוכה, מקודדת, כמעט אי אפשר לקרוא אותה, ומה שיש בתוכה זה כמה דברים.