Facebook & OAuth

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


ABOUT ME

• 鄧維岱 Danny

2

http://www.movement-itw.com


ABOUT ME

• 鄧維岱 Danny

• NCKU EE104

2



ABOUT ME

• 鄧維岱 Danny

• NCKU EE104

• MOVEMENT @ SWD 2013

• www.movement-itw.com

2



What is OAuth?

3


What is OAuth?

3

Open Standard for Authorization


授權程式從_____存取資料

4



4

Website.APP



4

Website.APP

FB.GitHub.LinkedIn



4

Website.APP

FB.GitHub.LinkedIn

Name.Birth. Email.Photo


Why OAuth?

5


We do not need to sign up new accounts

Why OAuth?

5

2014. By Deng Wei-Dai. For Social Web Design Workshop. 6

So,


How OAuth works?

6

So,


ROLE

7


ROLE

• Resource Owner: 使⽤用者

7



ROLE


• Resource Server: 存放使⽤用者資料的伺服器

7



ROLE



• Authorization Server: 授權Access Token的伺服器

7



ROLE




• Client: Third-Party程式、APP

7



CLIENT

8


CLIENT

8

Client ID


CLIENT

8

Client ID Client Secret


CLIENT

8

Client ID Client Secret

Redirect URI


• Scope: 存取資料範圍

9

more reference for scope

http://en.wikipedia.org/wiki/Cross-site_request_forgery

https://developers.facebook.com/docs/facebook-login/permissions/v2.0#reference



9

Public Profile (Default).email…






• State: (RECOMMEND) Random, prevent CSRF

9








• Code: Get Access Token

9








• Code: Get Access Token

• Access Token: Main KEY

9






OAuth Flow

10


ROLE




• Client: Third-Party程式、APP

11



Client ID, Redirect URI,Scope, State…



Agree?



Agree?

Grant codeError msg

With same state


Send to Redirect URI

Grant codeError msg with same state




CHECK state




Client info, Grant code

CHECK state





CHECK state

CHECK 1.Client info 2.Redirect URI





CHECK state

Access Token



Access Token


Access Token

Call Graph API (FB)


Access Token

Call Graph API (FB)

GET User’s info


Access Token

Call Graph API (FB)

Login Success

GET User’s info


3 PROTOCOL ENDPOINT(a little bit detail)

15



15

Authorization Server Client



15

Authorization Server Client

Authorization Endpoint

Token Endpoint



15

Authorization Server

Redirection Endpoint

Client


Token Endpoint


3 PROTOCOL ENDPOINT

16



Client


Token Endpoint



Agree?

Grant codeError msg

With same state


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


DENY OR ERRORhttp://your_redirect_uri?error=error&error_code=error_code &error_description=description&error_reason=error_reason &state=state

19

more reference for error

https://developers.facebook.com/docs/graph-api/using-graph-api/v2.0#errors


DENY OR ERRORhttp://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

https://developers.facebook.com/docs/graph-api/using-graph-api/v2.0#errors



Agree?

Grant codeError msg

With same state


3 PROTOCOL ENDPOINT

21



Client


Token Endpoint





CHECK state

Access Token



3 PROTOCOL ENDPOINT

23



Client


Token Endpoint





CHECK state

Access Token



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


Access Token

Call Graph API (FB)

Login Success

GET User’s info


https://graph.facebook.com/me?

access_token=access_token

27

Graph API request access_token

We will get info depending on scope


So far, Question?

28


Live Coding

29

Facebook SDK for JavaScript?


Download Materials

http://merry.ee.ncku.edu.tw/~smart0eddie/workshop/materials.zip


Let’s start !

31


Create Facebook App

32


PHP

33


STRUCTURE

PHP Folder

• index.html

• jquery-2.0.2.min.js

• facebook.php

• facebook.png

34


CURL DETAIL

• curl_setopt(ch, option, value);

• CURLOPT_URL: 設定擷取網址

• CURLOPT_RETURNTRANSFER: 回傳是否字串

• curl_exec($ch): 執⾏行

• curl_close($ch): 關閉

35


NodeJS

36

If we have time…


NodeJS

36

With Express and Passport

If we have time…

http://expressjs.com/

http://passportjs.org/


STEP

npm install express-generator (Installed by Prof.)

1. ssh [email protected]

2. express XXX (XXX is a folder)

3. cd XXX & npm install

4. npm install passport

5. npm install passport-facebook

37


STRUCTURE

NodeJS Folder

• app.js

• routes/index.js

• html/facebook.html

38


MORE REFERENCE

• Passport Authentication for Node.js Applications

• Easy Node Authentication: Facebook

• Notice: Express3.0. We have installed express 4.0

39

http://www.apple.com

http://scotch.io/tutorials/javascript/easy-node-authentication-facebook


Is OAuth safe?

40


I do not think so…

Is OAuth safe?

40


Any Question?


Thanks for your listening!

[email protected]


MORE REFERENCE

• (Ruby)簡單易懂的 OAuth 2.0 - 如何⽤用 OAuth 2 鎖住你的 API

• OAuth 和 OpenID 到底是什麼呢？

• Spec: The OAuth 2.0 Authorization Framework

43

http://rubytaiwan.tumblr.com/post/68452644773/ruby-tuesday-26-27

http://sinkwung.blogspot.tw/2012/04/oauth-openid.html

http://tools.ietf.org/html/rfc6749

Facebook & OAuth

Internet

Transcript of Facebook & OAuth