Google Chrome扩展+使用Facebook +解析登录 [英] Google Chrome Extension + Login with Facebook + Parse

问题描述

我正在尝试构建一个谷歌Chrome扩展，一个用例需要用户可以使用Facebook登录并通过一个帖子分享到Facebook的墙壁。

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:

1. 用户点击Google Chrome扩展程序 - 传票扩展页面


2. 用户在扩展页面（或新标签页）中点击用Facebook登录，然后用户可以从Facebook查看批准应用。


3. 用户批准应用程序


4. 该用户被引导到一个新页面，感谢他们安装和处理所有所需的用户信息，或者用户被发送回谷歌Chrome扩展（更好的方式）


5. 如果用户没有发回谷歌Chrome扩展，那么应该告诉他们这样做，但是到目前为止，如何将数据转到google chrome扩展？


6. 用户打开Goog​​le Chrome扩展程序，现在应该看到嗨约翰或类似的，而不是使用Facebook登录


7. 用户不能发布到Facebook

1. User click google chrome extension - summons extension page
2. User clicks "login with facebook" on the extension page (or in a new tab) the users then see the "approve app" from Facebook
3. The user approves the app
4. 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)
5. 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?
6. The user opens to the Google chrome extension, they should now see "Hi John" or similar instead of "Login with Facebook"
7. The user can no post to Facebook

我的主要骇客正在使用Facebook登录，并获得数据回到扩展名。

My major hick-ups are logging in with Facebook, and getting the data back to the extension.

我创建了一个Facebook应用程序，完成大部分针对应用程序的编码，我试图保持应用程序只是javascript （但是如果没有其他方法，我可以添加php），尝试使用标准的Facebook javascript，并尝试使用桌面客户​​端进行Facebook。

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.

任何人都通过此次连接Google Chrome扩展程序和Facebook登录的过程？

Anyone else gone through this process of connecting Google Chrome Extensions and Facebook login before?

最后，我正在尝试使用Parse进行此项目，因此如果您有任何额外的确实是太好了！

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!

我想要完成的一个很好的例子与Any.do
https：// chrome。 google.com/webstore/search/any.do?utm_source=chro me-ntp-icon

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

推荐答案

最近我有这样的问题）这有点复杂，但我会尝试以最简单的方式解释。

I had this kind of problem lately ;). It's a bit complicated, but I'll try to explain it in the simplest way.

把你的扩展名（也许选项页面）链接到登录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

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

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

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

这是你如何从Facebook获取访问令牌。现在您可以向 https://graph.facebook.com 发送请求。

And this is how you get access token from facebook. Now you can send requests to https://graph.facebook.com.

希望我帮助;）

这篇关于Google Chrome扩展+使用Facebook +解析登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！