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

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 Profile (Default).email…
more reference for scope

29. 2014. By Deng Wei-Dai. For Social Web Design Workshop.
• Scope: 存取資料範圍
9
Public Profile (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 Profile (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 Profile (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 Profile (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