Introduction to Facebook Graph API and OAuth 2
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to Facebook Graph API and OAuth 2

on

  • 1,485 views

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.

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.

Statistics

Views

Total Views
1,485
Views on SlideShare
1,483
Embed Views
2

Actions

Likes
1
Downloads
21
Comments
0

1 Embed 2

http://192.168.33.10 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Facebook Graph API and OAuth 2 Presentation Transcript

  • 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)
  • 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. 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. 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. 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. 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. 2. Create login button! facebook
  • 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. 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. 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. 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) }
  • 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. 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. 3. User authorizes application for basic access
  • 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. 5. Facebook sends back access token!
  • 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. 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. 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. 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. 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. 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. $('#button').click(function() { $.post('https://graph.facebook.com/me/feed' + '?access_token=' + accessToken, { message: message }) .done(function() { /* ... */ }) .fail(function() { showError('Cannot post.') }) })
  • 45. Demonstration! https://c9.io/dtinth/datacomdemo Slide: http://bit.ly/fb-ws