Facebook Graph API
Thiwat Rongsirigul Thai Pangsakulaynont
Khanet Krongkitichu
This presentation is part of group presenta...
Outline
Graph API
OAuth 2
Demos
Documentation
http://developers.facebook.com/
{
"id": "617920932",
"first_name": "Beammagic",
"gender": "male",
"last_name": "Goldenfish",
"link": "https://www.facebook...
Example Usage
<div id="message">
<span id="name">(page name)</span> has
<span id="likes">(number)</span> likes.
</div>
var...
Example Usage
<div id="message">
<span id="name">(page name)</span> has
<span id="likes">(number)</span> likes.
</div>
var...
Example Usage
<div id="message">
<span id="name">(page name)</span> has
<span id="likes">(number)</span> likes.
</div>
var...
Graph API Explorer
https://developers.facebook.com/tools/explorer/
Go!!
Graph API Reference
https://developers.facebook.com
/docs/graph-api/reference/
Go!!
{
"error": {
"message": "An active access token must be used to
query information about the current user.",
"type": "OAuth...
Facebook does not know
who you are…
OAuth 2
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
Everyone has an
access_token for
each app.
{
"error": {
"message": "An active access token must be used to
query information about the current user.",
"type": "OAuth...
{
"id": "1658509977",
"first_name": "Thai",
"gender": "male",
"last_name": "Pangsakulyanont",
"link": "https://www.faceboo...
I can haz my
access_token?
OAuth 2 Token Flow
(Client-Side Flow with JavaScript)
1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleas...
1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleas...
1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleas...
1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleas...
1. Check access_token!
var accessToken = localStorage.accessToken
function checkUser(callback) {
if (!accessToken) { pleas...
2. Create login button!
facebook
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
2. Create login button!
function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.h
var...
3. User authorizes application
for basic access
4. User grants extended permission
var url = 'https://www.facebook.com/dialog/oauth' +
'?client_id=269104936600903' +
'&re...
5. Facebook sends back access token!
6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)...
6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)...
6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)...
6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)...
6. Save the access token!
<h1>Thanks for logging in!</h1>
<script>
var match = location.hash.match(/access_token=([^&]+)/)...
checkUser(function(profile) {
$('.your-name').text(profile.name)
})
<div id="logged-in">
<p>Welcome, <span class="your-nam...
$('#button').click(function() {
$.post('https://graph.facebook.com/me/feed' +
'?access_token=' + accessToken,
{ message: m...
Demonstration!
https://c9.io/dtinth/datacomdemo
Slide: http://bit.ly/fb-ws
Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2
Upcoming SlideShare
Loading in...5
×

Introduction to Facebook Graph API and OAuth 2

2,621

Published on

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.

Published in: Software, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,621
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
56
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Introduction to Facebook Graph API and OAuth 2

  1. 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. 2. Outline Graph API OAuth 2 Demos
  3. 3. Documentation http://developers.facebook.com/
  4. 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. 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. 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. 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. 8. Graph API Explorer https://developers.facebook.com/tools/explorer/ Go!!
  9. 9. Graph API Reference https://developers.facebook.com /docs/graph-api/reference/ Go!!
  10. 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. 11. Facebook does not know who you are…
  12. 12. OAuth 2 https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
  13. 13. Everyone has an access_token for each app.
  14. 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. 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. 16. I can haz my access_token?
  17. 17. OAuth 2 Token Flow (Client-Side Flow with JavaScript)
  18. 18. 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 })
  19. 19. 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) })
  20. 20. 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) })
  21. 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) { $('.your-name').text(profile.name) })
  22. 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) .done(function(profile) { callback(profile) }) .fail(function(error) { pleaseLogin() }) } checkUser(function(profile) { $('.your-name').text(profile.name) })
  23. 23. 2. Create login button! facebook
  24. 24. 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) }
  25. 25. 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) }
  26. 26. 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) }
  27. 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. 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) }
  29. 29. 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. 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. 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. 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. 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. 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. 35. 3. User authorizes application for basic access
  36. 36. 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'
  37. 37. 5. Facebook sends back access token!
  38. 38. 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>
  39. 39. 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>
  40. 40. 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>
  41. 41. 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>
  42. 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. 43. checkUser(function(profile) { $('.your-name').text(profile.name) }) <div id="logged-in"> <p>Welcome, <span class="your-name"></span></p> </div> Welcome, Thai Pangsakulyanont
  44. 44. $('#button').click(function() { $.post('https://graph.facebook.com/me/feed' + '?access_token=' + accessToken, { message: message }) .done(function() { /* ... */ }) .fail(function() { showError('Cannot post.') }) })
  45. 45. Demonstration! https://c9.io/dtinth/datacomdemo Slide: http://bit.ly/fb-ws
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×