Facebook & OAuth

604 views

Published on

Social Web Design Workshop #1
@NCKUEE92225, 2014/05/14
Facebook OAuth Introduction.
Coding with PHP and NodeJS.

Published in: Internet, Technology, Business
  • Be the first to comment

Facebook & OAuth

  1. 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. 2. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ABOUT ME • 鄧維岱 Danny 2
  3. 3. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ABOUT ME • 鄧維岱 Danny • NCKU EE104 2
  4. 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. 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. 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. 7. 2014. By Deng Wei-Dai. For Social Web Design Workshop. What is OAuth? 3
  8. 8. 2014. By Deng Wei-Dai. For Social Web Design Workshop. What is OAuth? 3 Open Standard for Authorization
  9. 9. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 授權程式從_____存取資料 4
  10. 10. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 授權程式從_____存取資料 4 Website.APP
  11. 11. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 授權程式從_____存取資料 4 Website.APP FB.GitHub. LinkedIn
  12. 12. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 授權程式從_____存取資料 4 Website.APP FB.GitHub. LinkedIn Name.Birth. Email.Photo
  13. 13. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Why OAuth? 5
  14. 14. 2014. By Deng Wei-Dai. For Social Web Design Workshop. We do not need to sign up new accounts Why OAuth? 5
  15. 15. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 6 So,
  16. 16. 2014. By Deng Wei-Dai. For Social Web Design Workshop. How OAuth works? 6 So,
  17. 17. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE 7
  18. 18. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE 7 授權程式從_____存取資料
  19. 19. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE • Resource Owner: 使⽤用者 7 授權程式從_____存取資料
  20. 20. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE • Resource Owner: 使⽤用者 • Resource Server: 存放使⽤用者資料的伺服器 7 授權程式從_____存取資料
  21. 21. 2014. By Deng Wei-Dai. For Social Web Design Workshop. ROLE • Resource Owner: 使⽤用者 • Resource Server: 存放使⽤用者資料的伺服器 • Authorization Server: 授權Access Token的伺服器 7 授權程式從_____存取資料
  22. 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. 23. 2014. By Deng Wei-Dai. For Social Web Design Workshop. CLIENT 8
  24. 24. 2014. By Deng Wei-Dai. For Social Web Design Workshop. CLIENT 8 Client ID
  25. 25. 2014. By Deng Wei-Dai. For Social Web Design Workshop. CLIENT 8 Client ID Client Secret
  26. 26. 2014. By Deng Wei-Dai. For Social Web Design Workshop. CLIENT 8 Client ID Client Secret Redirect URI
  27. 27. 2014. By Deng Wei-Dai. For Social Web Design Workshop. • Scope: 存取資料範圍 9 more reference for scope
  28. 28. 2014. By Deng Wei-Dai. For Social Web Design Workshop. • Scope: 存取資料範圍 9 Public Profile (Default).email… more reference for scope
  29. 29. 2014. By Deng Wei-Dai. For Social Web Design Workshop. • Scope: 存取資料範圍 9 Public Profile (Default).email… more reference for scope
  30. 30. 2014. By Deng Wei-Dai. For Social Web Design Workshop. • Scope: 存取資料範圍 • State: (RECOMMEND) Random, prevent CSRF 9 Public Profile (Default).email… more reference for scope
  31. 31. 2014. By Deng Wei-Dai. For Social Web Design Workshop. • Scope: 存取資料範圍 • State: (RECOMMEND) Random, prevent CSRF • Code: Get Access Token 9 Public Profile (Default).email… more reference for scope
  32. 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 Profile (Default).email… more reference for scope
  33. 33. 2014. By Deng Wei-Dai. For Social Web Design Workshop. OAuth Flow 10
  34. 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. 35. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 12
  36. 36. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 12
  37. 37. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 12 Client ID, Redirect URI,Scope, State…
  38. 38. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 12 Client ID, Redirect URI,Scope, State… Agree?
  39. 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. 40. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 13
  41. 41. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 13 Send to Redirect URI Grant code Error msg with same state
  42. 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. 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. 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. 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. 46. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 14 Access Token
  47. 47. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 14 Access Token Call Graph API (FB)
  48. 48. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 14 Access Token Call Graph API (FB) GET User’s info
  49. 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. 50. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 3 PROTOCOL ENDPOINT(a little bit detail) 15
  51. 51. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 3 PROTOCOL ENDPOINT(a little bit detail) 15 Authorization Server Client
  52. 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. 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. 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. 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. 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. 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. 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. 59. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 19
  60. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 75. 2014. By Deng Wei-Dai. For Social Web Design Workshop. So far, Question? 28
  76. 76. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Live Coding 29 Facebook SDK for JavaScript?
  77. 77. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 30 Download Materials
  78. 78. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Let’s start ! 31
  79. 79. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Create Facebook App 32
  80. 80. 2014. By Deng Wei-Dai. For Social Web Design Workshop. PHP 33
  81. 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. 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. 83. 2014. By Deng Wei-Dai. For Social Web Design Workshop. NodeJS 36 If we have time…
  84. 84. 2014. By Deng Wei-Dai. For Social Web Design Workshop. NodeJS 36 With Express and Passport If we have time…
  85. 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. 86. 2014. By Deng Wei-Dai. For Social Web Design Workshop. STRUCTURE NodeJS Folder • app.js • routes/index.js • html/facebook.html 38
  87. 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. 88. 2014. By Deng Wei-Dai. For Social Web Design Workshop. Is OAuth safe? 40
  89. 89. 2014. By Deng Wei-Dai. For Social Web Design Workshop. I do not think so… Is OAuth safe? 40
  90. 90. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 41 Any Question?
  91. 91. 2014. By Deng Wei-Dai. For Social Web Design Workshop. 42 Thanks for your listening! a55660988@gmail.com
  92. 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

×