Introduction to Facebook Graph API and OAuth 2
•
2 likes•5,762 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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Introduction to Facebook Graph API and OAuth 2
Similar to Introduction to Facebook Graph API and OAuth 2 (20)
Recently uploaded
Recently uploaded (20)
Introduction to Facebook Graph API and OAuth 2
- 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.
- 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
- 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…
- 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.') }) })