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

当用户登录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>

window.fbAsyninit=函数（）{
FB.init({
appId:“我的应用程序id（我有我的应用程序id）”，
状态：true，//检查登录状态
cookie:true，//启用cookie以允许服务器访问会话
xfbml:true//解析xfbml
});
};
（功能（）{
var e=document.createElement（'script'）；
e、 异步=真；
document.getElementById（'fb-root'）.appendChild（e）；
}());
FB.getLoginStatus（函数（响应）{
if（response.authResponse）{
警报（“已登录”）；}
否则{
//没有可用的用户会话，您不认识的人
}
});

您的代码中有很多问题，让我们先解决它，然后解释：

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

window.fbAsyninit=函数（）{
FB.init({
appId:'您的应用程序id'，
状态：正确，
曲奇：是的，
xfbml：是的，
频道URL:'http://WWW.MYDOMAIN.COM/channel.html',
真的吗
});
FB.getLoginStatus（函数（响应）{
if（response.authResponse）{
警报（“已登录”）；}
否则{
//没有可用的用户会话，您不认识的人
}
});
};
（功能（）{
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）；
}());

现在要考虑的要点是：

阅读

使用

oauth

标志启用

您需要使用异步加载或标准方法，但不能同时使用这两种方法（我在这里异步加载）

将所有Facebook呼叫放入

fbAsyninit

添加频道文件

阅读这些文章

---

因为这是在后台页面中完成的，所以您必须确保身份验证是在另一个页面中完成的，因为后台页面没有标题，没有UI。那么，用户如何单击授权

我不知道FacebookAPI，但因为它是OAuth2，所以我要做的是创建一个单独的html页面，名为“Facebook_auth.html”，然后将身份验证代码放在那里。授权后，按照ifaour的说明进行操作。他似乎知道自己在做什么。您的背景页面将只打开新选项卡（chrome.tabs.create）以进行身份验证

看看本教程，并将其应用于Facebook：

---

您好，我实施了您的建议，而不是频道url，因为这是一个附加组件。但是当我登录到facebook时，我仍然没有看到这个警报窗口。我在我的inspect元素窗口中也没有看到“fb root”。如果我在fb外部调用它，就会出现警报窗口。getloginStatus（）你能试试吗？当我在登录Facebook时加载此页面时，我会收到登录警报。否。我将此代码作为background.html运行，如果使用document.location.protocol，我也会收到一个错误。因此，我将其更改为http:。你在chrome上运行吗？@Praveen:错误？！不，我没有收到任何错误，是的，我正在Chrome上测试。我想问题不在于代码本身。你找到最好的方法了吗？：）