Google Chrome扩展程序+使用Facebook + Parse登录

Question

我正在尝试构建一个谷歌浏览器扩展程序,一个用例要求用户可以使用Facebook登录并通过帖子分享到他们的Facebook墙.

正确的应用程序流程如下:

1. 用户点击谷歌浏览器扩展程序 - 召唤扩展页面
2. 用户点击扩展页面(或新标签页)中的"使用Facebook登录",然后用户可以通过Facebook查看"批准应用"
3. 用户批准该应用程序
4. 用户被引导到一个新页面,感谢他们安装和处理所有需要的用户信息或用户被发送回谷歌Chrome扩展(更好的方式)
5. 如果用户未被发送回谷歌浏览器扩展程序,则应告知他们这样做,但此时如何将数据转换为谷歌浏览器扩展程序？
6. 用户打开Goog​​le Chrome扩展程序,现在应该看到"嗨约翰"或类似内容,而不是"使用Facebook登录"
7. 用户无法发布到Facebook

我主要的hick-up正在登录Facebook,并将数据恢复到扩展程序.

我创建了一个Facebook应用程序,完成了大部分特定于应用程序的编码,我试图保持应用程序只是javascript(但我可以添加PHP,如果没有其他方式),尝试使用标准的Facebook JavaScript,并尝试使用Facebook的桌面客户端.

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

作为最后一点,我正在尝试与Parse一起参与这个项目,所以如果你有任何额外的问题那么它也会很棒!

---

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

Answer 1

我最近遇到过这种问题;).这有点复杂,但我会尝试以最简单的方式解释它.

放在您的扩展程序(可能是选项页面)链接"登录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.

希望我帮忙;)