איך לרקוד את ה- OAuth: שיעור שלב אחר שלב

חמש שש שבע שמונה!

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

פשוט נסה את זה עד שמשהו יעבוד.

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

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

והדבר הזה היה OAuth 2.0.

מה זה OAuth?

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

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

השתמשת בזה כבר כמה מיליוני פעמים. למעשה, השתמשת בו בכל פעם שאתה לוחץ על "היכנס באמצעות Facebook / Google / GitHub / ...". לאחר מכן הוצג בפניך מסך הסכמה המציין איזה מידע מפרופיל הפייסבוק שלך (למשל) אתה מאפשר ל- this-hot-new-app.com לקרוא (ולעתים לכתוב). מכיוון ש- hot-new-app.com סומך על הזהות שמספקת פייסבוק, הם יכולים להשתמש בנתונים שהתקבלו כדי ליצור פרופיל עבורך במסד הנתונים שלהם.

כאן בדרך כלל מסתיימת התקשורת בין that-hot-new-app.com לפייסבוק. מסיבה זו תמונת הפרופיל שלך לא תשתנה ברחבי האינטרנט כאשר תשנה אותה בפייסבוק. אתה פשוט לעולם לא חוזר לפייסבוק ומבקש נתונים מעודכנים.

כאשר מקצבי מרימבה מתחילים להתנגן ...

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

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

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

זה אולי נשמע מפחיד, אבל באמת אין מה לדאוג. זכור, אתה מאשר ל--hot-new-app.com לגשת למידע אודותיך המופיע על גבי המסך, אולי מעת לעת. היה מודע להרשאות שאתה נותן וודא שאתה יודע כיצד לכבות אותן אם אינך סומך עליהן עוד.

לדוגמה, אם אתה משתמש בחשבון Google שלך ​​כדי לגשת ל- that-hot-new-app.com אך אינך רוצה עוד לאפשר זאת, פשוט עבור אל הגדרות חשבון Google שלך ​​והשבית את הגישה שלהם.

כל ספקי הזהות הגדולים מציעים שליטה על כך.

אוקיי, אבל איך רוקדים את OAuth?

לפני שתנחת ב- that-hot-new-app.com ותלחץ על "הירשם עם ספק המועדף שלך", מישהו - ככל הנראה מפתח - צריך ליצור יישום באתר הספק.

זה מאפשר לך לרשום את- hot-new-app.com כך שהספק יידע אחר כך מי מבקש מידע פרטי.

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

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

ברגע שהאפליקציה נרשמת, הספק that-hot-new-app.com מספק לקוח מזהה ולקוח סודות המשמשים לתקשורת ביניהם. הם עובדים כמו שם משתמש וסיסמה עבור היישום.

תקבל את ה- clientID ו- clientSecret ישירות לאחר שתלחץ על שמור יישום

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

אנחנו לא רוצים את זה.

ידיים על המותניים או הכתפיים

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

"פלחים" אלה ידועים כאזורים ומגדירים זכויות גישה המחולקות בדרך כלל לקטגוריות קריאה / כתיבה. לדוגמה, that-hot-new-app.com יכול לבקש את האזורים "פרופיל: קרא" ו- "אנשי קשר: קרא". המשמעות היא שהם יכולים לקרוא את כל מה שהספק מקצה לפלח "פרופיל" ו"אנשי קשר ". לא ניתן לגשת לדברים אחרים, למשל ב 'על הפוסטים שלך או על תוכן שאתה אוהב.

נגיד ש- hot-new-app.com הוא אתר מובנה ב- Typeform, שירות ליצירת טפסים יפים וחכמים יותר, וגם בחברה בה אני עובד. אתה בהחלט רוצה להתמודד עם החמים מייד ובמהירות. לחץ על כניסה באמצעות סוג צורה באתר החברה כדי להתחיל מיד. מה הלאה?

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

תווים צבעוניים מכניסים את ליבי לשמחה

אשר: הצעד הראשון בריקוד OAuth

אז אתה לוקח יוזמה ולחץ על "התחבר לטופס הצורה". כאן זה-hot-new-app.com (THNA מעכשיו מכיוון שנמאס לי ממילים מקופלות) שולח את זה לנקודת הקצה Authorize של Typeform (/ oauth / authorize) וקובע:

  • הלקוח שלך (זכור, זה שם המשתמש של THNA)
  • האזורים הרצויים שלהם (או זכויות הגישה)
  • ואת ה- URI להפניה שלהם שוב (Typeform כבר יודע זאת כאשר הגדרנו זאת, אך אנו שולחים אותו שוב כשכבת אבטחה נוספת)

כתובת האתר הזו נראית כך:

https://api.typeform.com/oauth/authorize?client_id=yourClientId&scope=accounts:read+forms:read+results:read

Typeform משתמש במידע זה כדי ליצור מסך הסכמה בו תוכל לבדוק איזה סוג דברים אתה מאפשר ל- THNA לראות ולעשות.

לאחר קריאה מדוקדקת של הסכמתך ולחיצה בשמחה על "אפשר", Typeform ישלח לך הודעה זמנית ל- URI להפניה:

https://that-hot-new-app.com/auth/redirect?code=xxxXXXxxxXXXxxx

אסימון: לוקח 2 עד tangOAuth

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

השלב השני של ריקוד ה- OAuth מורכב בכך ש- THNA מקבל קוד זה ומחליף אותו באסימון OAuth.

אז THNA לוקח את הקוד הזה ושולח אותו בחזרה ל- Typeform יחד עם ה- URI להפניה (כן, שוב!) וסוד הלקוח (זו סיסמת האפליקציה!).

כפרס לריקוד שרקדו היטב, THNA מקבלת אסימון OAuth נוצץ בו היא יכולה להשתמש כדי לקיים אינטראקציה עם Typeform בשם המשתמש, כלומר אתה!

הישאר איתי, שקול את עצמך איתי

מעתה, על THNA להוסיף כותרת הרשאה עם אסימון גישה זה מטעמכם לכל בקשה ל- Typeform. זה מאפשר ל- Typeform (או לכל ספק אחר) לזהות:

  • מי מבקש את הנתונים (במקרה זה THNA)
  • מי הנתונים של (אתה!)
  • כמו כן, וודא שיש לך הרשאה נכונה לגשת לנתונים אלה (רק בהסכמתך).

מוכן לרחבת הריקודים

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

בברכה, תמונת שער מאת גז קסבייר מנספילד ב- Unsplash.