How do I get Facebook's new OAuth 2.0 access_token with JavaScript in Google Chrome Extention?

问题

I want to create simple Google Chrome extention which would display News from Facebook.

News feed can be retrieved by calling this:
https://graph.facebook.com/me/home?access_token=...

But I need access_token.

Could someone give a hint how to define a JavaScript function which would return access_token when given YOUR_APP_ID. This function also should work inside Chrome Extention.

Other examples on the internet did not work, because:

I don't have a server.
FB.getLoginStatus does not seem to work.

EDIT1:

I've tried this:

    function getAccessToken2(YOUR_APP_ID) {
        alert("before FB.init");
        FB.init({
            appId  : YOUR_APP_ID ,
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });
        alert("before FB.login");
        FB.login( function (response) {
        alert("response");
            if ( response.authResponse ) {
                alert("response.authResponse");
                var access_token = response.authResponse.access_token;
                alert(access_token);
            }
        } );
    }

And I've got:

alert("before FB.init");
alert("before FB.login");

Popup opened. It's URL is this. The content is:

API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: Invalid redirect_uri: Given URL is not allowed by the Application configuration.

But I've did NOT got:

alert("response");
alert(access_token);
no other JavaScript errors seen in debug mode.

Edit2 The issue here is that I need to authenticate at Facebook like a desktop application. IMHO.

回答1:

Facebook does allow desktop flow authentication, see this documentation

You need to specify a special return_uri if using a chrome extension. https://www.facebook.com/connect/login_success.html)

You also need to add tabsand the URL to your manifest permissions - i.e.:

"permissions": [
    "tabs",
    "https://facebook.com/connect/*"
]

When a user clicks the login/auth button, you need to perform two steps:

Step 1

Redirect the user to the OAUTH page:

chrome.tabs.create(
    {
    'url': "https://www.facebook.com/dialog/oauth?client_id=client_id>&redirect_uri=https://www.facebook.com/connect/login_success.html"
    }, null);

Step 2

Add a listener to Tab updates that searches all tabs for the success URL:

chrome.tabs.onUpdated.addListener(function() {
    var lis = this; 
    chrome.tabs.getAllInWindow(null, function(tabs) {
                        for (var i = 0; i < tabs.length; i++) {
                            if (tabs[i].url.indexOf("https://www.facebook.com/connect/login_success.html") == 0) {
                                var token = tabs[i].url.match(/[\\?&#]auth_token=([^&#])*/i)
                                chrome.tabs.onUpdated.removeListener(lis);
                                return;
                            }
                        }
                    });
});

Note that I've got a related question on using the provided javascript api for desktop flow, as I've always received the same API error (191)

回答2:

FB.login( function (response) {
    if ( response.authResponse ) {
        var access_token = response.authResponse.access_token;
        alert(access_token);
    }
} );

来源：https://stackoverflow.com/questions/8675362/how-do-i-get-facebooks-new-oauth-2-0-access-token-with-javascript-in-google-chr

标签

javascript

facebook

google-chrome-extension

oauth-2.0

access-token