Question

我正在制作Facebook测验应用。这让用户可以使用Facebook登录。我试图自动显示用户的个人资料图片，而无需点击＆＃34;获取信息＆＃34;但实际上它一直在崩溃代码，登录按钮停止工作。目前，它的工作原理。用户登录然后显示个人资料图片，用户必须点击“获取信息”。按钮，它将显示用户的个人资料图片。 我不想要＆＃34;获取信息＆＃34;按钮，我希望自动显示个人资料图片。

HTML：

<div id="status"></div>
   <div id="lgnbtn">
      <button onclick="login()" id="login">Login with Facebook</button>
   </div>
<button onclick="getInfo()" id="getInfo">Get Info</button>

使用Javascript：

// initialize and setup facebook js sdk
        window.fbAsyncInit = function() {
            FB.init({
              appId      : '1036296558220017',
              xfbml      : true,
              version    : 'v2.5'
            });

            FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                    document.getElementById('status').innerHTML = 'We are connected.';
                    document.getElementById('login').style.visibility = 'hidden';
                } else if (response.status === 'not_authorized') {
                    document.getElementById('status').innerHTML = 'We are not logged in.'
                } else {
                    document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
                }
            });
        };
        (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'));

        // login with facebook with extra permissions
        function login() {
            FB.login(function(response) {
                if (response.status === 'connected') {
                    document.getElementById('status').innerHTML = 'We are connected.';
                    document.getElementById('login').style.visibility = 'hidden';
                } else if (response.status === 'not_authorized') {
                    document.getElementById('status').innerHTML = 'We are not logged in.'
                } else {
                    document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
                }
            }, {scope: 'email'});
        }

    // getting basic user info
        function getInfo() {
                FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id,picture.width(150).height(150)'}, function(response) {
                document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>";
            });

        }

Answer 1

在getInfo();成功处理程序中调用FB.login。

window.fbAsyncInit = function() {
  FB.init({
    appId: '1034762986580727',
    xfbml: true,
    version: 'v2.5'
  });

  FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
      document.getElementById('status').innerHTML = 'We are connected.';
      document.getElementById('login').style.visibility = 'hidden';
    } else if (response.status === 'not_authorized') {
      document.getElementById('status').innerHTML = 'We are not logged in.'
    } else {
      document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
    }
  });
};
(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'));

// login with facebook with extra permissions
function login() {
  FB.login(function(response) {
    if (response.status === 'connected') {
      document.getElementById('status').innerHTML = 'We are connected.';
      document.getElementById('login').style.visibility = 'hidden';
      getInfo(); // Invoke it here
    } else if (response.status === 'not_authorized') {
      document.getElementById('status').innerHTML = 'We are not logged in.'
    } else {
      document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
    }
  }, {
    scope: 'email'
  });
}

// getting basic user info
function getInfo() {
  FB.api('/me', 'GET', {
    fields: 'first_name,last_name,name,id,picture.width(150).height(150)'
  }, function(response) {
    console.log(response);//Check the response in console
    document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>";
  });
}

<div id="status"></div>
<div id="lgnbtn">
  <button onclick="login()" id="login">Login with Facebook</button>
</div>

Javascript - 使用Facebook登录，成功登录后显示用户的个人资料图片

1 个答案: