Facebook & OAuth
1 like763 views
這份文件是鄧維岱於2014年舉辦的社會網路設計研討會上的演講稿，介紹了OAuth的基本概念及其在Facebook等社交平台上的應用。文件中詳述了OAuth的工作流程、角色分配及其安全性問題。最後，還涵蓋了使用Node.js和Facebook SDK進行實作的相關內容及資源介紹。
Facebook & OAuth
- 1. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 淺談Facebook & OAuth與Live實作 鄧維岱 Danny Deng 2014.05.14 @ 成?大電機系92225 1 Social Web Design Workshop #1
- 2. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ABOUT ME ? 鄧維岱 Danny 2
- 3. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ABOUT ME ? 鄧維岱 Danny ? NCKU EE104 2
- 4. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ABOUT ME ? 鄧維岱 Danny ? NCKU EE104 ? MOVEMENT @ SWD 2013 ? www.movement-itw.com 2
- 5. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ABOUT ME ? 鄧維岱 Danny ? NCKU EE104 ? MOVEMENT @ SWD 2013 ? www.movement-itw.com 2
- 6. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ABOUT ME ? 鄧維岱 Danny ? NCKU EE104 ? MOVEMENT @ SWD 2013 ? www.movement-itw.com 2
- 7. 2014. By Deng Wei-Dai. For Social Web Design Workshop. What is OAuth? 3
- 8. 2014. By Deng Wei-Dai. For Social Web Design Workshop. What is OAuth? 3 Open Standard for Authorization
- 9. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 授權程式從_____存取資料 4
- 10. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 授權程式從_____存取資料 4 Website.APP
- 11. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 授權程式從_____存取資料 4 Website.APP FB.GitHub. LinkedIn
- 12. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 授權程式從_____存取資料 4 Website.APP FB.GitHub. LinkedIn Name.Birth. Email.Photo
- 13. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Why OAuth? 5
- 14. 2014. By Deng Wei-Dai. For Social Web Design Workshop. We do not need to sign up new accounts Why OAuth? 5
- 15. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 6 So,
- 16. 2014. By Deng Wei-Dai. For Social Web Design Workshop. How OAuth works? 6 So,
- 17. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE 7
- 18. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE 7 授權程式從_____存取資料
- 19. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE ? Resource Owner: 使?用者 7 授權程式從_____存取資料
- 20. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE ? Resource Owner: 使?用者 ? Resource Server: 存放使?用者資料的伺服器 7 授權程式從_____存取資料
- 21. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE ? Resource Owner: 使?用者 ? Resource Server: 存放使?用者資料的伺服器 ? Authorization Server: 授權Access Token的伺服器 7 授權程式從_____存取資料
- 22. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE ? Resource Owner: 使?用者 ? Resource Server: 存放使?用者資料的伺服器 ? Authorization Server: 授權Access Token的伺服器 ? Client: Third-Party程式、APP 7 授權程式從_____存取資料
- 23. 2014. By Deng Wei-Dai. For Social Web Design Workshop. CLIENT 8
- 24. 2014. By Deng Wei-Dai. For Social Web Design Workshop. CLIENT 8 Client ID
- 25. 2014. By Deng Wei-Dai. For Social Web Design Workshop. CLIENT 8 Client ID Client Secret
- 26. 2014. By Deng Wei-Dai. For Social Web Design Workshop. CLIENT 8 Client ID Client Secret Redirect URI
- 27. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ? Scope: 存取資料範圍 9 more reference for scope
- 28. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ? Scope: 存取資料範圍 9 Public Pro?le (Default).email… more reference for scope
- 29. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ? Scope: 存取資料範圍 9 Public Pro?le (Default).email… more reference for scope
- 30. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ? Scope: 存取資料範圍 ? State: (RECOMMEND) Random, prevent CSRF 9 Public Pro?le (Default).email… more reference for scope
- 31. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ? Scope: 存取資料範圍 ? State: (RECOMMEND) Random, prevent CSRF ? Code: Get Access Token 9 Public Pro?le (Default).email… more reference for scope
- 32. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ? Scope: 存取資料範圍 ? State: (RECOMMEND) Random, prevent CSRF ? Code: Get Access Token ? Access Token: Main KEY 9 Public Pro?le (Default).email… more reference for scope
- 33. 2014. By Deng Wei-Dai. For Social Web Design Workshop. OAuth Flow 10
- 34. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE ? Resource Owner: 使?用者 ? Resource Server: 存放使?用者資料的伺服器 ? Authorization Server: 授權Access Token的伺服器 ? Client: Third-Party程式、APP 11 授權程式從_____存取資料
- 35. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 12
- 36. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 12
- 37. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 12 Client ID, Redirect URI,Scope, State…
- 38. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 12 Client ID, Redirect URI,Scope, State… Agree?
- 39. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 12 Client ID, Redirect URI,Scope, State… Agree? Grant code Error msg With same state
- 40. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 13
- 41. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 13 Send to Redirect URI Grant code Error msg with same state
- 42. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 13 Send to Redirect URI Grant code Error msg with same state CHECK state
- 43. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 13 Send to Redirect URI Grant code Error msg with same state Client info, Grant code CHECK state
- 44. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 13 Send to Redirect URI Grant code Error msg with same state Client info, Grant code CHECK state CHECK 1.Client info 2.Redirect URI
- 45. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 13 Send to Redirect URI Grant code Error msg with same state Client info, Grant code CHECK state Access Token CHECK 1.Client info 2.Redirect URI
- 46. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 14 Access Token
- 47. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 14 Access Token Call Graph API (FB)
- 48. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 14 Access Token Call Graph API (FB) GET User’s info
- 49. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 14 Access Token Call Graph API (FB) Login Success GET User’s info
- 50. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 3 PROTOCOL ENDPOINT(a little bit detail) 15
- 51. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 3 PROTOCOL ENDPOINT(a little bit detail) 15 Authorization Server Client
- 52. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 3 PROTOCOL ENDPOINT(a little bit detail) 15 Authorization Server Client Authorization Endpoint Token Endpoint
- 53. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 3 PROTOCOL ENDPOINT(a little bit detail) 15 Authorization Server Redirection Endpoint Client Authorization Endpoint Token Endpoint
- 54. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 3 PROTOCOL ENDPOINT 16 Authorization Server Redirection Endpoint Client Authorization Endpoint Token Endpoint
- 55. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 17 Client ID, Redirect URI,Scope, State… Agree? Grant code Error msg With same state
- 56. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 17 Client ID, Redirect URI,Scope, State… Agree? Grant code Error msg With same state
- 57. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 17 Client ID, Redirect URI,Scope, State… Agree? Grant code Error msg With same state
- 58. 2014. By Deng Wei-Dai. For Social Web Design Workshop. https://www.facebook.com/dialog/oauth? client_id=580500188730688? &redirect_uri=http://merry.ee.ncku.edu.tw/redirect? &state=d41d8cd98f00b204e9800998ecf8427e? &response_type=code? &scope=email 18 向Authorization Endpoint提出請求 data which redirect back is code
- 59. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 19
- 60. 2014. By Deng Wei-Dai. For Social Web Design Workshop. DENY OR ERROR http://your_redirect_uri?? error=error? &error_code=error_code? &error_description=description? &error_reason=error_reason? &state=state 19 more reference for error
- 61. 2014. By Deng Wei-Dai. For Social Web Design Workshop. DENY OR ERROR http://your_redirect_uri?? error=error? &error_code=error_code? &error_description=description? &error_reason=error_reason? &state=state 19 more reference for error http://your_redirect_uri?? code=code? &state=state AGREE
- 62. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 20 Client ID, Redirect URI,Scope, State… Agree? Grant code Error msg With same state
- 63. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 20 Client ID, Redirect URI,Scope, State… Agree? Grant code Error msg With same state
- 64. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 3 PROTOCOL ENDPOINT 21 Authorization Server Redirection Endpoint Client Authorization Endpoint Token Endpoint
- 65. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 22 Send to Redirect URI Grant code Error msg with same state Client info, Grant code CHECK state Access Token CHECK 1.Client info 2.Redirect URI
- 66. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 22 Send to Redirect URI Grant code Error msg with same state Client info, Grant code CHECK state Access Token CHECK 1.Client info 2.Redirect URI
- 67. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 3 PROTOCOL ENDPOINT 23 Authorization Server Redirection Endpoint Client Authorization Endpoint Token Endpoint
- 68. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 24 Send to Redirect URI Grant code Error msg with same state Client info, Grant code CHECK state Access Token CHECK 1.Client info 2.Redirect URI
- 69. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 24 Send to Redirect URI Grant code Error msg with same state Client info, Grant code CHECK state Access Token CHECK 1.Client info 2.Redirect URI
- 70. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 24 Send to Redirect URI Grant code Error msg with same state Client info, Grant code CHECK state Access Token CHECK 1.Client info 2.Redirect URI
- 71. 2014. By Deng Wei-Dai. For Social Web Design Workshop. https://graph.facebook.com/oauth/access_token? client_id=client_id ? &client_secret=client_secret? &redirect_uri=redirect_uri? &code=code 25 向Token Endpoint提出請求 Afterwards, get access_token
- 72. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 26 Access Token Call Graph API (FB) Login Success GET User’s info
- 73. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 26 Access Token Call Graph API (FB) Login Success GET User’s info
- 74. 2014. By Deng Wei-Dai. For Social Web Design Workshop. https://graph.facebook.com/me? access_token=access_token 27 Graph API request access_token We will get info depending on scope
- 75. 2014. By Deng Wei-Dai. For Social Web Design Workshop. So far, Question? 28
- 76. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Live Coding 29 Facebook SDK for JavaScript?
- 77. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 30 Download Materials
- 78. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Let’s start ! 31
- 79. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Create Facebook App 32
- 80. 2014. By Deng Wei-Dai. For Social Web Design Workshop. PHP 33
- 81. 2014. By Deng Wei-Dai. For Social Web Design Workshop. STRUCTURE PHP Folder ? index.html ? jquery-2.0.2.min.js ? facebook.php ? facebook.png 34
- 82. 2014. By Deng Wei-Dai. For Social Web Design Workshop. CURL DETAIL ? curl_setopt(ch, option, value); ? CURLOPT_URL: 設定擷取網址 ? CURLOPT_RETURNTRANSFER: 回傳是否字串 ? curl_exec($ch): 執?行 ? curl_close($ch): 關閉 35
- 83. 2014. By Deng Wei-Dai. For Social Web Design Workshop. NodeJS 36 If we have time…
- 84. 2014. By Deng Wei-Dai. For Social Web Design Workshop. NodeJS 36 With Express and Passport If we have time…
- 85. 2014. By Deng Wei-Dai. For Social Web Design Workshop. STEP npm install express-generator (Installed by Prof.) 1. ssh username@merry.ee.ncku.edu.tw 2. express XXX (XXX is a folder) 3. cd XXX & npm install 4. npm install passport 5. npm install passport-facebook 37
- 86. 2014. By Deng Wei-Dai. For Social Web Design Workshop. STRUCTURE NodeJS Folder ? app.js ? routes/index.js ? html/facebook.html 38
- 87. 2014. By Deng Wei-Dai. For Social Web Design Workshop. MORE REFERENCE ? Passport Authentication for Node.js Applications ? Easy Node Authentication: Facebook ? Notice: Express3.0. We have installed express 4.0 39
- 88. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Is OAuth safe? 40
- 89. 2014. By Deng Wei-Dai. For Social Web Design Workshop. I do not think so… Is OAuth safe? 40
- 90. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 41 Any Question?
- 91. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 42 Thanks for your listening! a55660988@gmail.com
- 92. 2014. By Deng Wei-Dai. For Social Web Design Workshop. MORE REFERENCE ? (Ruby)簡單易懂的 OAuth 2.0 - 如何?用 OAuth 2 鎖住 你的 API ? OAuth 和 OpenID 到底是什麼呢？ ? Spec: The OAuth 2.0 Authorization Framework 43