Embed Size (px)
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.
Citation preview
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.
Outline
Graph APIOAuth 2Demos
Documentation
http://developers.facebook.com/
{ "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
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')
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) { })
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
Graph API Explorer
https://developers.facebook.com/tools/explorer/
Go!!
Graph API Reference
https://developers.facebook.com /docs/graph-api/reference/
Go!!
{ "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
Facebook does not knowwho you are…
OAuth 2https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
Everyone has anaccess_token for
each app.
{ "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
{ "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
I can haz myaccess_token?
OAuth 2 Token Flow(Client-Side Flow with JavaScript)
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})
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)})
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)})
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)})
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)})
2. Create login button!
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)
}
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)
}
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)
}
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)
}
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)
}
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)
}
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)
}
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)
}
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)
}
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)
}
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)
}
3. User authorizes applicationfor basic access
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'
5. Facebook sends back access token!
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>
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>
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>
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>
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>
checkUser(function(profile) { $('.your-name').text(profile.name)})
<div id="logged-in"> <p>Welcome, <span class="your-name"></span></p></div>
Welcome, Thai Pangsakulyanont
$('#button').click(function() { $.post('https://graph.facebook.com/me/feed' + '?access_token=' + accessToken, { message: message }) .done(function() { /* ... */ }) .fail(function() { showError('Cannot post.') })})
Demonstration!https://c9.io/dtinth/datacomdemo
Slide: http://bit.ly/fb-ws
