Question

如何在Facebook连接到我的网络应用程序后编辑下面的代码以显示Facebook昵称或个人资料图片？

它目前工作正常但登录后，“登录”按钮消失，并且不显示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>

用户在我的网络应用程序上登录Facebook后，如何显示FB昵称或个人资料图像

2 个答案: