用户在我的Web应用程序上使用Facebook登录后，我如何显示FB Nick或Profile Image

Question

如何编辑下面的代码以显示Facebook昵称或配置文件映像后Facebook连接到我的Web应用程序？

？

当前工作正常，但是登录后，登录按钮消失了，没有显示Facebook用户信息。

<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  // Initialize the Facebook JavaScript SDK
  FB.init({
    appId: 'APP_ID',
    xfbml: true,
    status: true,
    cookie: true,
  });
  // Check if the current user is logged in and has authorized the app
  FB.getLoginStatus(checkLoginStatus);
  // Login in the current user via Facebook and ask for email permission
  function authUser() {
    FB.login(checkLoginStatus, {scope:'email'});
  }
  // Check the result of the user status and display login button if necessary
  function checkLoginStatus(response) {
    if(response && response.status == 'connected') {
      alert('User is authorized');
      // Hide the login button
      document.getElementById('loginButton').style.display = 'none';
      // Now Personalize the User Experience
      console.log('Access Token: ' + response.authResponse.accessToken);
    } else {
      alert('User is not authorized');
      // Display the login button
      document.getElementById('loginButton').style.display = 'block';
    }
  }
</script>
<input id="loginButton" type="button" value="Login!" onclick="authUser();" />

Answer 1

<script type="text/javascript">
  // Initialize the Facebook JavaScript SDK
  FB.init({
    appId: '<APPID>',
    xfbml: true,
    status: true,
    cookie: true,
  });
  // Check if the current user is logged in and has authorized the app
  FB.getLoginStatus(checkLoginStatus);
  // Login in the current user via Facebook and ask for email permission
  function authUser() {
    FB.login(checkLoginStatus, {scope:'email'});
  }
function logout() {
FB.logout(function(response) {
  // user is now logged out
});
}
  // Check the result of the user status and display login button if necessary
  function checkLoginStatus(response) {
    if(response && response.status == 'connected') {
      alert('User is authorized');
      var userInfo = document.getElementById('user-info');
        FB.api('/me', function(response) {
        userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
        });i
      // Hide the login button
      document.getElementById('loginButton').style.display = 'none';
      // Now Personalize the User Experience
      console.log('Access Token: ' + response.authResponse.accessToken);
    } else {
      alert('User is not authorized');
      // Display the login button
      document.getElementById('loginButton').style.display = 'block';
    }
  }
</script>
<input id="loginButton" type="button" value="Login!" onclick="authUser();" />
<input id="logoutButton" type="button" value="Logout!" onclick="logout();" />
<div id="user-info"></div>

Answer 2

我想你快到了！而不是提醒"用户已授权"，您可以拥有以下内容：

var userInfo = document.getElementById('user-info');

FB.api('/me', function(response) { userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' +
response.name;

});

然后只需在您的登录按钮下创建一个div：

<div id="user-info"></div>