Google Chrome Extension + Login with Facebook + Parse - facebook

Question

I'm trying to build a google chrome extension, a use case requires that users can login with Facebook and share via a post to their Facebook wall.
The correct application flow would be as such:
User click google chrome extension - summons extension page
User clicks "login with facebook" on the extension page (or in a new tab) the users then see the "approve app" from Facebook
The user approves the app
The user is directed to a new page that thanks them for installing and processes all the needed user information OR the user is sent back to the google chrome extension (better way)
If the user is not sent back to the google chrome extension, they should be told to do so, but at this point how to get the data to the google chrome extension?
The user opens to the Google chrome extension, they should now see "Hi John" or similar instead of "Login with Facebook"
The user can no post to Facebook
My major hick-ups are logging in with Facebook, and getting the data back to the extension.
I've created a Facebook app, done most of the coding specific to the app, I'm trying to keep the app just javascript (but I can add in php if there is no other way), tried using the standard Facebook javascript, and tried using the desktop client for Facebook.
Anyone else gone through this process of connecting Google Chrome Extensions and Facebook login before?
As a final note, I'm trying to with with Parse for this project, so if you have any extra insite on that it would be great too!
A good example of what I'm trying to accomplish is similar to what Any.do
https://chrome.google.com/webstore/search/any.do?utm_source=chrome-ntp-icon

Answer 1

I had this kind of problem lately ;). It's a bit complicated, but I'll try to explain it in the simplest way.
Put somewhere in your extension (maybe options page) link "login with facebook" that redirects to: https://www.facebook.com/dialog/oauth?client_id=<APP_ID>&response_type=token&scope=<PERMISSIONS>&redirect_uri=http://www.facebook.com/connect/login_success.html
When someone clicks on this link, will be asked to give permissions, etc (facebook page). If someone would agree, the page will load: http://www.facebook.com/connect/login_success.html with parameters access_token and expires_in in address.
Now, background page should have script like this:
var successURL = 'www.facebook.com/connect/login_success.html';
function onFacebookLogin(){
if (!localStorage.getItem('accessToken')) {
chrome.tabs.query({}, function(tabs) { // get all tabs from every window
for (var i = 0; i < tabs.length; i++) {
if (tabs[i].url.indexOf(successURL) !== -1) {
// below you get string like this: access_token=...&expires_in=...
var params = tabs[i].url.split('#')[1];
// in my extension I have used mootools method: parseQueryString. The following code is just an example ;)
var accessToken = params.split('&')[0];
accessToken = accessToken.split('=')[1];
localStorage.setItem('accessToken', accessToken);
chrome.tabs.remove(tabs[i].id);
}
}
});
}
}
chrome.tabs.onUpdated.addListener(onFacebookLogin);
And this is how you get access token from facebook. Now you can send requests to https://graph.facebook.com.
Hope I helped ;)

Answer 2

To answer your question (Don't have enough credit to comment).
In your Facebook developer settings, click the advanced tab at the top, make sure "Client OAuth login" & "Embedded browser OAuth login" are both moved to "Yes" and then I had to add "http://www.facebook.com/" to the Valid OAuth redirect URI's

Answer 3

now facebook has changed "Client Oauth Login" button location. You need to add a product and after adding facebook login you will found here