如何在 Google Chrome 扩展中使用 JavaScript 获取 Facebook 的新 OAuth 2.0 access_token？

Question

我想创建一个简单的谷歌浏览器扩展来显示来自 Facebook 的新闻。

可以通过调用以下方式检索新闻提要：
https://graph.facebook.com/me/home?access_token=...

但我需要 access_token。

有人可以提示如何定义一个 JavaScript 函数，该函数在给定 YOUR_APP_ID 时将返回 access_token。这个功能也应该在 Chrome 扩展中工作。

互联网上的其他示例不起作用，因为：

• 我没有服务器。
  
• FB.getLoginStatus 似乎不起作用。

EDIT1：

我试过了：

    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);
            }
        } );
    }

我有：

• alert("在 FB.init 之前");
• alert("FB.login 之前");

• 弹出窗口打开。它的网址是this。内容是：

  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.
  

但我做了不得到：

• 警报（“响应”）；
• 警报(access_token);
• 在调试模式下未发现其他 JavaScript 错误。

编辑2 这里的问题是我需要像桌面应用程序一样在 Facebook 进行身份验证。恕我直言。

Answer 1

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

Answer 2

Facebook 确实允许桌面流身份验证，请参阅 this documentation

如果使用 chrome 扩展，您需要指定一个特殊的 return_uri。 https://www.facebook.com/connect/login_success.html)

您还需要将 tabs 和 URL 添加到您的清单权限 - 即：

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

当用户点击登录/验证按钮时，您需要执行两个步骤：

步骤 1

将用户重定向到 OAUTH 页面：

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);

第二步

向选项卡更新添加一个侦听器，用于搜索所有选项卡以查找成功 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;
                            }
                        }
                    });
});

请注意，我有一个related question 使用 provided javascript api 进行桌面流，因为我总是收到相同的 API 错误 (191)