Download as PDF, PPTX
![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>](https://image.slidesharecdn.com/facebookgraph1-140429233709-phpapp02/75/Introduction-to-Facebook-Graph-API-and-OAuth-2-42-2048.jpg)
![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>](https://image.slidesharecdn.com/facebookgraph1-140429233709-phpapp02/75/Introduction-to-Facebook-Graph-API-and-OAuth-2-43-2048.jpg)
![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>](https://image.slidesharecdn.com/facebookgraph1-140429233709-phpapp02/75/Introduction-to-Facebook-Graph-API-and-OAuth-2-44-2048.jpg)
![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>](https://image.slidesharecdn.com/facebookgraph1-140429233709-phpapp02/75/Introduction-to-Facebook-Graph-API-and-OAuth-2-45-2048.jpg)
![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>](https://image.slidesharecdn.com/facebookgraph1-140429233709-phpapp02/75/Introduction-to-Facebook-Graph-API-and-OAuth-2-46-2048.jpg)
Uploaded byThai Pangsakulyanont
Introduction to Facebook Graph API and OAuth 2
This document is a presentation on the Facebook Graph API as part of an assignment from a data communications and network programming course at Kasetsart University. It covers topics like OAuth 2.0, examples of API usage, and provides code snippets for checking access tokens and user login functionality. The document also includes links to the Facebook API documentation and graph API explorer tools.
More Related Content
Similar to Introduction to Facebook Graph API and OAuth 2
Introduction to Facebook Graph API and OAuth 2
- 1. Facebook Graph API ThiwatRongsirigul 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.
- 3.
- 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"> <spanid="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"> <spanid="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"> <spanid="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.
- 9.
- 10. { "error": { "message": "Anactive 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 notknow who you are…
- 12.
- 13. Everyone has an access_tokenfor each app.
- 14. { "error": { "message": "Anactive 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 hazmy access_token?
- 17. OAuth 2 TokenFlow (Client-Side Flow with JavaScript)
- 21. 1. Check access_token! varaccessToken = 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! varaccessToken = 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! varaccessToken = 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! varaccessToken = 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! varaccessToken = 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 loginbutton! facebook
- 27. 2. Create loginbutton! 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 loginbutton! 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 loginbutton! 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 loginbutton! 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 loginbutton! 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 loginbutton! 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 loginbutton! 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 loginbutton! 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 loginbutton! 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 loginbutton! 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 loginbutton! 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 authorizesapplication for basic access
- 40. 4. User grantsextended permission var url = 'https://www.facebook.com/dialog/oauth' + '?client_id=269104936600903' + '&response_type=token&redirect_uri=' + redirect + '&scope=publish_stream'
- 41. 5. Facebook sendsback access token!
- 42. 6. Save theaccess 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 theaccess 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 theaccess 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 theaccess 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 theaccess 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.