通过 Chrome 扩展使用 javascript 进行 facebook 身份验证答案

【问题标题】：facebook authentication using javascript via Chrome extension通过 Chrome 扩展使用 javascript 进行 facebook 身份验证
【发布时间】：2011-08-25 21:34:32
【问题描述】：

当用户登录 facebook 时，我正在尝试使用我的 chrome 扩展程序显示一个简单的警报窗口。我有 javascript sdk 初始化代码以及在我的 background.html 页面中获取登录状态的代码。我的 manifest.json 文件正确调用了后台页面。

我无法在 background.html 页面上放置断点。我想知道这是否是我应该如何声明 javascript facebook sdk 并检查用户是否已登录。

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js"></script>

<script>

window.fbAsyncInit = function() {
    FB.init({
      appId  : 'my App id (i have my app id)',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
  };

  (function() {
    var e = document.createElement('script');
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());

 FB.getLoginStatus(function(response) {
    if (response.authResponse) {
          alert("logged in");} 
    else {
        // no user session available, someone you dont know                                                                                                            
    }
});

 </script>

【问题讨论】：

您找到了最好的方法吗？ :)

标签： javascript facebook-graph-api facebook google-chrome-extension

【解决方案1】：

你的代码有很多问题，让我们先修复它，然后解释：

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
        appId: 'your app id',
        status: true,
        cookie: true,
        xfbml: true,
        channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html',
        oauth  : true
    });

    FB.getLoginStatus(function(response) {
        if (response.authResponse) {
              alert("logged in");} 
        else {
            // no user session available, someone you dont know                                                                                                            
        }
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

现在要考虑的要点：

阅读Javascript SDK documentation
使用oauth 标志启用OAuth 2.0
您需要使用异步加载或标准方法，但不能同时使用两者（我这里是异步加载）
将您所有的 Facebook 电话放在fbAsyncInit
添加频道文件
阅读这些文章one, two

【讨论】：

嗨 ifaour，我实施了您的建议，而不是频道网址，因为这是一个附加组件。但是当我登录到 facebook 时，我仍然没有看到这个警报窗口。我的检查元素窗口中也没有看到“fb-root”。
如果我在 Fb.getloginStatus() 之外调用它，则会出现警报窗口
你能试试this吗？当我在登录 Facebook 时加载此页面时，我会收到 logged in 警报。
没有。我将此代码作为 background.html 运行，如果我使用 document.location.protocol，我也会收到错误消息。所以，我把它改成了http:。你在 chrome 上运行它吗？
@Praveen：错误？！不，我没有收到任何错误，是的，我正在 Chrome 上对其进行测试。我想问题不在于代码本身。

【解决方案2】：

由于这是在后台页面中完成的，因此您必须确保在另一个页面中完成身份验证，因为后台页面是无头的，没有 UI。那么用户如何点击授权呢？

我不知道 Facebook API，但由于它是 OAuth2，我要做的是创建一个名为“facebook_auth.html”的单独 html 页面，然后将身份验证代码放在那里。获得授权后，按照 ifaour 的说明进行操作。他似乎知道自己在做什么。您的后台页面只会打开该新选项卡 (chrome.tabs.create) 以进行身份验证。

查看本教程，并将其应用于 Facebook： http://code.google.com/chrome/extensions/tut_oauth.html

【讨论】：