Javascript - ログインして正常にログインした後にユーザのプロフィール画像を表示

Question

私はFacebookのクイズアプリを作っています。これにより、ユーザーはFacebookでログインできます。私は "情報を見る"をクリックすることなくユーザーのプロフィール画像を自動的に表示しようとしていますが、実際にはコードをクラッシュさせてしまい、ログインボタンが機能しなくなりました。現在、動作しています。ユーザがログインしてプロフィール画像を表示すると、ユーザは「情報を見る」ボタンをクリックしなければならず、ユーザのプロフィール画像が表示される。 「情報を見る」ボタンが表示されないようにするには、のプロフィール画像を自動的に表示します。

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を：FB.login成功ハンドラで

// 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();。

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>