Facebook Javascript SDK登录和注销

时间:2015-11-28 04:05:29

标签: javascript facebook facebook-graph-api facebook-javascript-sdk frontend

我正在学习使用Facebook Javascript SDK和网络身份验证API。我正在尝试做一个简单的登录并注销。

用户登录后,登录按钮将消失,只会看到注销按钮。

我已经写了一个登录和注销功能。但无法弄清楚如何调用它们。请帮忙,谢谢!

这是我的代码:

 <!DOCTYPE html>
 <html>
 <head>
    <title>Login via Facebook</title>
    <meta charset="UTF-8">
</head>
<body>
<script>
  // This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
  console.log('statusChangeCallback');
  console.log(response);
  if (response.status === 'connected') {
    testAPI();
  } else if (response.status === 'not_authorized') {
    document.getElementById('status').innerHTML = 'Please log ' +
      'into this app.';
  } else {
    document.getElementById('status').innerHTML = 'Please log ' +
      'into Facebook.';
  }
}

// This function is called when someone finishes with the Login
// Button.  See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}

window.fbAsyncInit = function() {
  FB.init({
    appId      : 'id_num_here',
    cookie     : true,  // enable cookies to allow the server to access 
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.2' // use version 2.2
  });

  // Now that we've initialized the JavaScript SDK, we call 
  // FB.getLoginStatus().  This function gets the state of the
  // person visiting this page and can return one of three states to
  // the callback you provide.  
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
};

// Load the SDK asynchronously
(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/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Here we run a very simple test of the Graph API after login is
// successful.  See statusChangeCallback() for when this call is made.
function testAPI() {
  console.log('Welcome!  Fetching your information.... ');
  FB.api('/me', function(response) {
    console.log('Successful login for: ' + response.name);
    document.getElementById('status').innerHTML =
      'Thanks for logging in, ' + response.name + '!';
  });
}

function login() {
  FB.login(function(response) {
    if (response.authResponse) {
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
     });

     document.getElementById('fb:login-button').style.display = 'none';
    } else {
     console.log('User cancelled login or did not fully authorize.');
    }
  });
} 

function logout() {
  FB.logout(function(response) {
    // Person is now logged out
  });
}
</script>

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

</body>
</html>

0 个答案:

没有答案