Facebook连接:javascript部分如何工作?

时间:2013-03-17 15:08:09

标签: facebook-javascript-sdk

实际上,我在Symfony2.2中制作了一个简单的页面。我在树枝模板中有以下代码:

<!-- facebook link -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=297720976910223";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>
<!-- end facebook link--> 

他们成功地执行了以下操作:

  • 在我的页面上显示facebook登录按钮。
  • 当我点击按钮时,我可以进入我的Facebook帐户。
  • 我的页面上显示了我的Facebook名称。

现在我想做的是:在Facebook弹出窗口上输入一个有效的Facebook帐户后,一旦我回到我的页面上,我就可以发出警告。例如:

function after_click() {
        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
                alert("Facebook user is connected");
            }
        });

..问题是我并不确切如何运作。我在我的代码中尝试了几个选项并在网上搜索,但是徒劳无功。

任何人都可以向我解释上述原则并指导我完成? (PS:我的最终目标是通过将用户重定向到另一个页面的代码替换“警报”代码。)

谢谢你。

@Thomas,谢谢你的回答..但是我真的不明白为什么以下只有在点击btnTest时才给我警报(alert =“你点击我进行测试......”);其他警报永远不会显示:

<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : '297720976910223', // App ID from the App Dashboard
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
      xfbml      : true  // parse XFBML tags on this page?
    });

    // Additional initialization code such as adding Event Listeners goes here    
    FB.Event.subscribe('auth.login', function(response) {
        alert("test connection");
    });

    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
          // connected
          alert("connected");
        } else if (response.status === 'not_authorized') {
          // not_authorized
          alert("not authorized");
        } else {
          // not_logged_in
          alert("not logged in");
        }
       }, true);

  };

  function testme()
  {
     alert("You clicked on me for a test..");
     FB.getLoginStatus(function(response) {
          alert("xxx_");
        if (response.status === 'connected') {
          // connected
          alert("connected");
        } else if (response.status === 'not_authorized') {
          // not_authorized
          alert("not authorized");
        } else {
          // not_logged_in
          alert("not logged in");
        }
       });

  }

  // Load the SDK's source Asynchronously
  // Note that the debug version is being actively developed and might 
  // contain some type checks that are overly strict. 
  // Please report such bugs using the bugs tool.
  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));
</script>


<fb:login-button onlogin="testme()" autologoutlink='true' perms='email,user_birthday,status_update,publish_stream'></fb:login-button>

<!-- Just for testing purposes-->
<button type="button" name="btnTest" onclick="testme()">Test</button>
<div class="fb-login-button" data-show-faces="true" onlogin="testme()" data-width="200" data-max-rows="1"></div>

</body>    
</html>

PS:在facebook开发网站上写道:

先决条件:

您需要一个允许您在线托管HTML文件的地方。如果您还没有,可以使用Heroku快速安装。

我在我的电脑上测试该文件;这有什么不同......?

1 个答案:

答案 0 :(得分:0)

函数FB.getLoginStatus仅告诉您,用户是否通过您的应用程序进行了身份验证,而不是刚刚登录。

您可以在登录状态更改为connected时注册监听器:

FB.Event.subscribe('auth.login', function(response) {
  // handle the login
});

有关FB JavaScript SDK Events的更多信息。