Javascript - Einloggen mit Facebook, Benutzerprofil anzeigen, nachdem erfolgreich eingeloggt

Question

Ich mache eine Facebook Quiz App. Damit kann sich der Benutzer mit Facebook einloggen. Ich versuche, das Profilbild des Benutzers automatisch anzuzeigen, ohne auf "Get Info" klicken zu müssen, aber es stürzte den Code und der Login-Button funktioniert nicht mehr. Derzeit funktioniert es. Der Benutzer loggt sich dann ein, um das Profilbild anzuzeigen, der Benutzer muss auf die Schaltfläche "Get Info" klicken und es wird das Profilbild des Benutzers angezeigt. Ich möchte nicht die Schaltfläche "Get Info", ich möchte das Profilbild automatisch angezeigt werden.

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

Invoke getInfo(); in FB.login Erfolg Handler.

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>