Niepowodzenie ReferenceError: FB nie jest zdefiniowany podczas korzystania z FB.getLoginStatus

Question

Próbuję sprawdzić, czy użytkownik zalogował się przy użyciu Facebook i uzyskać ten błąd w konsoli JS. Mój kod wygląda tak:

<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId: '######', // App ID 
      status: true, // check login status 
      cookie: true, // enable cookies to allow the server to access the session 
      xfbml: true // parse XFBML 
     }); 
    }; 

    // Load the SDK Asynchronously 
    (function (d) { 
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     d.getElementsByTagName('head')[0].appendChild(js); 
    }(document)); 

    FB.getLoginStatus(function (response) { 
     if (response.status === 'connected') { 
      // the user is logged in and has authenticated your 
      // app, and response.authResponse supplies 
      // the user's ID, a valid access token, a signed 
      // request, and the time the access token 
      // and signed request each expire 
      var uid = response.authResponse.userID; 
      var accessToken = response.authResponse.accessToken; 
     } else if (response.status === 'not_authorized') { 
      // the user is logged in to Facebook, 
      // but has not authenticated your app 
     } else { 
      // the user isn't logged in to Facebook. 
     } 
    }); 
</script> 

Co może być problemem i czy są jakieś sugestie, jak to naprawić?

Answer 1

Wywołujesz FB.getLoginStatus, zanim SDK zostanie załadowany i/lub zainicjowany. Aby czekać na to, do tego służy zdarzenie fbAsyncInit. Więc umieść tam wywołanie metody.

Answer 2

W przeglądarce Chrome wystąpił błąd: Niepowodzenie ReferenceError: FB nie jest zdefiniowane.

Chcę wywołać niestandardowe zdarzenie w funkcji inicjowania Facebooka, fbAsyncInit(). Wtedy nie jestem ograniczony do wykonywania wszystkich skryptów związanych z FB wewnątrz funkcji fbAsyncInit. Mogę go umieścić w dowolnym miejscu, po prostu słuchając tego niestandardowego wydarzenia, które należy wystrzelić.

window.fbAsyncInit = function() { 
    FB.init({ 
     appId  : '123456789', 
     status  : true, 
     cookie  : true, 
     xfbml  : true 
    }); 

    $(document).trigger('fbload'); // <---- THIS RIGHT HERE TRIGGERS A CUSTOM EVENT CALLED 'fbload' 
}; 

//MEANWHILE IN $(document).ready() 
$(document).on(
    'fbload', // <---- HERE'S OUR CUSTOM EVENT BEING LISTENED FOR 
    function(){ 
     //some code that requires the FB object 
     //such as... 
     FB.getLoginStatus(function(res){ 
      if(res.status == "connected"){ 
       FB.api('/me', function(fbUser) { 
        console.log("Open the pod bay doors, " + fbUser.name + "."); 
       }); 
      } 
     }); 

    } 
); 

Answer 3

użyłem następujące proste podejście i działa prawidłowo:

W sekcji head załadować SDK:

<script type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script> 

następnie w body swojej stronie, gdzie rzeczywista zawartość jest Użyłem tego:

<script> 

    function statusChangeCallback(response) { 
    console.log('statusChangeCallback'); 
    console.log(response); 
    if (response.status === 'connected') { 
     testAPI(); 

    } else if (response.status === 'not_authorized') { 
     FB.login(function(response) { 
     statusChangeCallback2(response); 
     }, {scope: 'public_profile,email'}); 

    } else { 
     alert("not connected, not logged into facebook, we don't know"); 
    } 
    } 

    function statusChangeCallback2(response) { 
    console.log('statusChangeCallback2'); 
    console.log(response); 
    if (response.status === 'connected') { 
     testAPI(); 

    } else if (response.status === 'not_authorized') { 
     console.log('still not authorized!'); 

    } else { 
     alert("not connected, not logged into facebook, we don't know"); 
    } 
    } 

    function checkLoginState() { 
    FB.getLoginStatus(function(response) { 
     statusChangeCallback(response); 
    }); 
    } 

    function testAPI() { 
    console.log('Welcome! Fetching your information.... '); 
    FB.api('/me', function(response) { 
     console.log('Successful login for: ' + response.name); 
     document.getElementById('status').innerHTML = 
     'Thanks for logging in, ' + response.name + '!'; 
    }); 
    } 

    $(document).ready(function() { 
    FB.init({ 
     appId  : '1119999988888898981989819891', 
     xfbml  : true, 
     version : 'v2.2' 
    }); 
    checkLoginState(); 
    }); 
</script> 

Answer 4

Mieliśmy do czynienia z W tym samym problemie, a ponieważ sdk FB nie był ładowany (lub ładowanie z opóźnieniami) powodowało to problemy (lub łamanie javascript) w niektórych przypadkach, które były od tego zależne.

Aby rozwiązać ten problem, delegowaliśmy wszystkie połączenia związane z Facebookiem. Stworzyliśmy funkcji takich jak:

function callOnFBSDKLoad(callback){ 
    if (window.isFBInitialized) { 
     callback(); 
    } 
    else { 
     jQuery(document).bind('fbInitialized', callback); 
    } 
} 

Gdzie fbInitialized to wydarzenie zwyczaj Więcej informacji o niestandardowych zdarzeń here. I window.isFBInitialized jest zmienną zestaw SDK, gdy jest załadowany.

wywołanie zwrotne jest metodą obejmującą zdarzenia związane z FB. np.

var FBLogin = function(){ 
    FB.login(...); 
} 

callOnFBSDKLoad(FBLogin) 

PS: proszę ignorować składni i konwencji nazewnictwa, ja w zasadzie dzielenia się pomysł, aby rozwiązać takie problemy.

Answer 5

Prostsze i solidne rozwiązanie. Wywołaj funkcję, gdy ładuje się pakiet SDK. Nazwę to triggerLoginCheck().

<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
     //TO DO: Add your unique Facebook app ID (All numbers). 
     appId  : '***unique_app_id***', 
     cookie  : true, 
     xfbml  : true, 
     version : 'v2.8' 
    }); 
    //Call the function here 
    triggerLoginCheck(); 

    FB.AppEvents.logPageView(); 
    }; 

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

Później, w dowolnym miejscu, umieścić to:

function triggerLoginCheck() {  
     FB.getLoginStatus(function(response) { 
     statusChangeCallback(response); 
     console.log(response); 
     }); 
} 

Answer 6

prostu za pomocą skryptu z facbook SDK bezpośrednio w znaczniku

<script type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID" id="facebook-jssdk"></script>