Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Facebook Graph API and OAuth 2

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

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

    Be the first to comment

    Login to see the comments

  • DanielJuli1

    Jul. 2, 2014
  • kishankapadia

    Jul. 18, 2015

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.

Views

Total views

5,688

On Slideshare

0

From embeds

0

Number of embeds

11

Actions

Downloads

96

Shares

0

Comments

0

Likes

2

×