introduction to facebook graph api and oauth 2
DESCRIPTION
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.TRANSCRIPT
![Page 1: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/1.jpg)
Facebook Graph API
Thiwat Rongsirigul Thai PangsakulaynontKhanet 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.
![Page 2: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/2.jpg)
Outline
Graph APIOAuth 2Demos
![Page 3: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/3.jpg)
Documentation
http://developers.facebook.com/
![Page 4: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/4.jpg)
{ "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/beammagicJSON API
![Page 5: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/5.jpg)
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')
![Page 6: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/6.jpg)
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) { })
![Page 7: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/8.jpg)
Graph API Explorer
https://developers.facebook.com/tools/explorer/
Go!!
![Page 9: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/9.jpg)
Graph API Reference
https://developers.facebook.com /docs/graph-api/reference/
Go!!
![Page 10: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/10.jpg)
{ "error": { "message": "An active access token must be used to query information about the current user.", "type": "OAuthException", "code": 2500 }}
https://graph.facebook.com/meJSON API
![Page 11: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/11.jpg)
Facebook does not knowwho you are…
![Page 12: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/12.jpg)
OAuth 2https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
![Page 13: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/13.jpg)
Everyone has anaccess_token for
each app.
![Page 14: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/14.jpg)
{ "error": { "message": "An active access token must be used to query information about the current user.", "type": "OAuthException", "code": 2500 }}
https://graph.facebook.com/meOAuth 2
![Page 15: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/15.jpg)
{ "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", "verified": true,
https://graph.facebook.com/me?access_token=o7pzkFsOAuth 2
![Page 16: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/16.jpg)
I can haz myaccess_token?
![Page 17: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/17.jpg)
OAuth 2 Token Flow(Client-Side Flow with JavaScript)
![Page 18: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/18.jpg)
![Page 19: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/19.jpg)
![Page 20: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/20.jpg)
![Page 21: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/21.jpg)
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})
![Page 22: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/22.jpg)
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)})
![Page 23: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/23.jpg)
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)})
![Page 24: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/24.jpg)
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)})
![Page 25: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/25.jpg)
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)})
![Page 26: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/26.jpg)
2. Create login button!
![Page 27: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/27.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 28: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/28.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 29: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/29.jpg)
![Page 30: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/30.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 31: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/31.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 32: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/32.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 33: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/33.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 34: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/34.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 35: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/35.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 36: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/36.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 37: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/37.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 38: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/38.jpg)
2. Create login button!function pleaseLogin() {
var redirect = 'https://c9.io/dtinth/datacomdemo/workspace/callback.html' 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)
}
![Page 39: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/39.jpg)
3. User authorizes applicationfor basic access
![Page 40: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/40.jpg)
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'
![Page 41: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/41.jpg)
5. Facebook sends back access token!
![Page 42: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/42.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 wrong!")}</script>
![Page 43: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/43.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 wrong!")}</script>
![Page 44: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/44.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 wrong!")}</script>
![Page 45: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/45.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 wrong!")}</script>
![Page 46: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/46.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 wrong!")}</script>
![Page 47: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/47.jpg)
checkUser(function(profile) { $('.your-name').text(profile.name)})
<div id="logged-in"> <p>Welcome, <span class="your-name"></span></p></div>
Welcome, Thai Pangsakulyanont
![Page 48: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/48.jpg)
$('#button').click(function() { $.post('https://graph.facebook.com/me/feed' + '?access_token=' + accessToken, { message: message }) .done(function() { /* ... */ }) .fail(function() { showError('Cannot post.') })})
![Page 49: Introduction to Facebook Graph API and OAuth 2](https://reader031.vdocuments.us/reader031/viewer/2022013118/5549d085b4c905856d8b4d31/html5/thumbnails/49.jpg)
Demonstration!https://c9.io/dtinth/datacomdemo
Slide: http://bit.ly/fb-ws