Using Facebook graph in Chrome Extensions - facebook

Question

I'm trying to use Facebook graph in Chrome extensions, but I'm having trouble in using access token to have permissions. My extension folder has a background.html file with the this code:
function displayUser(user) {
var userName = document.getElementById('userName');
var greetingText = document.createTextNode('Greetings, ' + user.name + '.');
userName.appendChild(greetingText);
}
var appID = "XXXXX";
if (window.location.hash.length == 0) {
var path = 'https://www.facebook.com/dialog/oauth?';
var queryParams = ['client_id=' + appID,'redirect_uri=https://www.facebook.com/connect/login_success.html', 'response_type=token'];
var query = queryParams.join('&');
var url = path + query;
window.open(url);
} else {
var accessToken = window.location.hash.substring(1);
var path = "https://graph.facebook.com/me?";
var queryParams = [accessToken, 'callback=displayUser'];
var query = queryParams.join('&');
var url = path + query;
// use jsonp to call the graph
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
When I run the extension, it opens a new tab with the app authorization. When I accept it, it just says "Success" and the url of this tab is like this:
https://www.facebook.com/connect/login_success.html#access_token=AAABtoJwdQQgBAP8KK6QYmlQ1CJOSjQxWjXoa7qgUthF507BGPgLeWEplB87fZBpDZBZBd7CKoIWb4Fa3S2laBuZAUf795p1N3QZDZD&expires_in=5549
So now how can I use this access token in background.html and close that authorization tab?

Answer 1

You should watch (in the extension code) for the tab changes with success url like this
chrome.tabs.onUpdated.addListener(onTabUpdated);
Then the handler function:
function onTabUpdated(tabId, changeInfo, tab) {
if (changeInfo.url && changeInfo.url.indexOf(SUCCESS_URL) == 0) {
// extract access token from url
Extract function:
function accessTokenFromSuccessURL(url) {
var hashSplit = url.split('#');
if (hashSplit.length > 1) {
var paramsArray = hashSplit[1].split('&');
for (var i = 0; i < paramsArray.length; i++) {
var paramTuple = paramsArray[i].split('=');
if (paramTuple.length > 1 && paramTuple[0] == 'access_token')
return paramTuple[1];
}
}
return null;
}

Answer 2

Judging by redirect_uri=https://www.facebook.com/connect/login_success.html, I'm assuming you're building a desktop or a client side app.
Try adding var RedirectURI = window.location;
And change the redirect URI in the queryParams array to redirect_uri= RedirectURI
If required, you can add http://localhost to the Site URL entry in https://developers.facebook.com/apps
Once the token is obtain, it is redirected to your previous page with the authorization token added as a hash which is automatically handled by the else { } block in your code.