10

我正在尝试构建一个 google chrome 扩展，一个用例要求用户可以使用 Facebook 登录并通过帖子分享到他们的 Facebook 墙上。

正确的应用程序流程是这样的：

  1. 用户点击 google chrome 扩展 - 召唤扩展页面
  2. 用户在扩展页面（或在新选项卡中）单击“使用 facebook 登录”，然后用户会看到来自 Facebook 的“批准应用程序”
  3. 用户批准应用
  4. 用户被定向到一个新页面，感谢他们安装和处理所有需要的用户信息，或者用户被发送回谷歌浏览器扩展（更好的方式）
  5. 如果用户没有被发送回谷歌浏览器扩展，他们应该被告知这样做，但此时如何将数据获取到谷歌浏览器扩展？
  6. 用户打开 Google chrome 扩展程序，他们现在应该看到“Hi John”或类似内容，而不是“使用 Facebook 登录”
  7. 用户不能在 Facebook 上发帖

我的主要问题是使用 Facebook 登录，并将数据返回到扩展程序。

我创建了一个 Facebook 应用程序，完成了大多数特定于应用程序的编码，我试图让应用程序只保留 javascript（但如果没有其他方法，我可以添加 php），尝试使用标准的 Facebook javascript，并尝试使用 Facebook 的桌面客户端。

之前有没有其他人经历过连接 Google Chrome 扩展和 Facebook 登录的过程？

最后一点，我正在尝试使用 Parse 来完成这个项目，所以如果你有任何额外的 insite 那就太好了！

我试图完成的一个很好的例子类似于 Any.do https://chrome.google.com/webstore/search/any.do?utm_source=chrome-ntp-icon

4

3 回答 3

21

我最近遇到了这种问题；）。这有点复杂，但我会尝试以最简单的方式解释它。

在您的扩展程序（可能是选项页面）中放置“使用 facebook 登录”链接，该链接重定向到：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

当有人点击此链接时，将被要求授予权限等（Facebook 页面）。如果有人同意，页面将加载：http://www.facebook.com/connect/login_success.html带有参数access_token和expires_in地址。

现在，背景页面应该有这样的脚本：

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

这就是您从 facebook 获取访问令牌的方式。现在您可以向https://graph.facebook.com发送请求。

希望我有所帮助；）

于 2012-09-21T22:02:28.907 回答
2

回答您的问题（没有足够的信用发表评论）。

在您的 Facebook 开发人员设置中，单击顶部的高级选项卡，确保“客户端 OAuth 登录”和“嵌入式浏览器 OAuth 登录”都移至“是”，然后我必须添加“ http://www.facebook. com/ " 到有效的 OAuth 重定向 URI

于 2015-05-19T17:43:30.617 回答
-1

现在 facebook 已更改“客户端 Oauth 登录”按钮位置。您需要添加产品，添加 facebook 登录后，您会在这里找到

在此处输入图像描述

于 2016-08-12T10:40:04.313 回答