An introduction to Facebook Graph API and OAuth 2. This presentation covers basic example of Facebook Graph API, and including how OAuth 2 client-side flow works.

1. Facebook Graph API
Thiwat Rongsirigul Thai Pangsakulaynont
Khanet Krongkitichu
This presentation is part of group presentation assignment in 01219321 Data Communications and Network Programming,
a Software and Knowledge Engineering undergraduate course, Kasetsart University.

2. Outline
Graph API
OAuth 2
Demos

3. Documentation
http://developers.facebook.com/

4. {
"id": "617920932",
"first_name": "Beammagic",
"gender": "male",
"last_name": "Goldenfish",
"link": "https://www.facebook.com/beammagic",
"locale": "en_US",
"name": "Beammagic Goldenfish",
"username": "beammagic"
}
https://graph.facebook.com/beammagic
JSON API

5. Example Usage
<div id="message">
<span id="name">(page name)</span> has
<span id="likes">(number)</span> likes.
</div>
var promise = $.get('https://graph.facebook.com/thapster')

6. Example Usage
<div id="message">
<span id="name">(page name)</span> has
<span id="likes">(number)</span> likes.
</div>
var promise = $.get('https://graph.facebook.com/thapster')
promise.done(function(info) {
})

7. Example Usage
<div id="message">
<span id="name">(page name)</span> has
<span id="likes">(number)</span> likes.
</div>
var promise = $.get('https://graph.facebook.com/thapster')
promise.done(function(info) {
$('#name').text(info.name)
$('#likes').text(info.likes)
})
Demo

8. Graph API Explorer
https://developers.facebook.com/tools/explorer/
Go!!

9. Graph API Reference
https://developers.facebook.com
/docs/graph-api/reference/
Go!!

10. {
"error": {
"message": "An active access token must be used to
query information about the current user.",
"type": "OAuthException",
"code": 2500
}
}
https://graph.facebook.com/me
JSON API

11. Facebook does not know
who you are…

12. OAuth 2
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/

13. Everyone has an
access_token for
each app.

14. {
"error": {
"message": "An active access token must be used to
query information about the current user.",
"type": "OAuthException",
"code": 2500
}
}
https://graph.facebook.com/me
OAuth 2

15. {
"id": "1658509977",
"first_name": "Thai",
"gender": "male",
"last_name": "Pangsakulyanont",
"link": "https://www.facebook.com/dtinth",
"locale": "en_US",
"name": "Thai Pangsakulyanont",
"timezone": 7,
"updated_time": "2014-04-03T09:38:10+0000",
"username": "dtinth",
https://graph.facebook.com/me?access_token=o7pzkF
OAuth 2

16. I can haz my
access_token?

17. OAuth 2 Token Flow
(Client-Side Flow with JavaScript)

21. 1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleaseLogin(); return }
$.get('https://graph.facebook.com/me?access_token=' + accessToken)
.then(function(profile) { callback(profile) })
.fail(function(error) { pleaseLogin() })
}
checkUser(function(profile) {
// this code will run if user is logged in
})

22. 1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleaseLogin(); return }
$.get('https://graph.facebook.com/me?access_token=' + accessToken)
.then(function(profile) { callback(profile) })
.fail(function(error) { pleaseLogin() })
}
checkUser(function(profile) {
$('.your-name').text(profile.name)
})

23. 1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleaseLogin(); return }
$.get('https://graph.facebook.com/me?access_token=' + accessToken)
.then(function(profile) { callback(profile) })
.fail(function(error) { pleaseLogin() })
}
checkUser(function(profile) {
$('.your-name').text(profile.name)
})

24. 1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleaseLogin(); return }
$.get('https://graph.facebook.com/me?access_token=' + accessToken)
.then(function(profile) { callback(profile) })
.fail(function(error) { pleaseLogin() })
}
checkUser(function(profile) {
$('.your-name').text(profile.name)
})

25. 1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleaseLogin(); return }
$.get('https://graph.facebook.com/me?access_token=' + accessToken)
.done(function(profile) { callback(profile) })
.fail(function(error) { pleaseLogin() })
}
checkUser(function(profile) {
$('.your-name').text(profile.name)
})

26. 2. Create login button!
facebook

27. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

28. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

30. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

31. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

32. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

33. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

34. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

35. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

36. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

37. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

38. 2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903&response_type=token' +
'&redirect_uri=' + redirect +
'&scope=publish_stream'
$('#logged-in').hide()
$('#error-message').show()
$('#error-message-text').text('Please login!')
$('#login-button').attr('href', url)
}

39. 3. User authorizes application
for basic access

40. 4. User grants extended permission
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903' +
'&response_type=token&redirect_uri=' + redirect +
'&scope=publish_stream'

41. 5. Facebook sends back access token!

42. 6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)
if (match) {
var token = match[1]
localStorage.accessToken = token
location.replace('index.html')
} else {
alert("I do not have your access token! Something must be wro
}
</script>

43. 6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)
if (match) {
var token = match[1]
localStorage.accessToken = token
location.replace('index.html')
} else {
alert("I do not have your access token! Something must be wro
}
</script>

44. 6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)
if (match) {
var token = match[1]
localStorage.accessToken = token
location.replace('index.html')
} else {
alert("I do not have your access token! Something must be wro
}
</script>

45. 6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)
if (match) {
var token = match[1]
localStorage.accessToken = token
location.replace('index.html')
} else {
alert("I do not have your access token! Something must be wro
}
</script>

46. 6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)
if (match) {
var token = match[1]
localStorage.accessToken = token
location.replace('index.html')
} else {
alert("I do not have your access token! Something must be wro
}
</script>

47. checkUser(function(profile) {
$('.your-name').text(profile.name)
})
<div id="logged-in">
<p>Welcome, <span class="your-name"></span></p>
</div>
Welcome, Thai Pangsakulyanont

48. $('#button').click(function() {
$.post('https://graph.facebook.com/me/feed' +
'?access_token=' + accessToken,
{ message: message })
.done(function() { /* ... */ })
.fail(function() { showError('Cannot post.') })
})

49. Demonstration!
https://c9.io/dtinth/datacomdemo
Slide: http://bit.ly/fb-ws