it-swarm.com.de

Nicht erfasstes ReferenceError: FB wird bei Verwendung von FB.getLoginStatus nicht definiert

Ich versuche zu prüfen, ob sich ein Benutzer über Facebook angemeldet hat und diese Fehlermeldung in der JS-Konsole angezeigt wird. Mein Code sieht so aus:

<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>

Was könnte das Problem sein und gibt es Anregungen, wie das Problem behoben werden kann?

30
Xeen

Sie rufen FB.getLoginStatus auf, bevor das SDK geladen und/oder initialisiert wird. Dafür wartet das Ereignis fbAsyncInit. Fügen Sie also den Methodenaufruf dort ein.

42
CBroe

In Chrome erhalten Sie die Fehlermeldung: Nicht abgerufener ReferenceError: FB ist nicht definiert .

Ich möchte gerne ein benutzerdefiniertes Ereignis in der Initialisierungsfunktion von Facebook auslösen, fbAsyncInit () . Dann bin ich nicht darauf beschränkt, all meine FB-bezogenen Skripts in der Funktion fbAsyncInit auszuführen. Ich kann es überall hinstellen, indem ich einfach nur darauf höre, dass dieses benutzerdefinierte Ereignis ausgelöst wird.

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 + ".");
                });
            }
        });

    }
);
51
jairbow

Ich habe den folgenden einfachen Ansatz verwendet und es funktioniert korrekt:

Im Abschnitt head lade ich das SDK:

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

Dann habe ich in der body Ihrer Seite, auf der sich Ihr eigentlicher Inhalt befindet, Folgendes verwendet:

<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>
10
basZero

Verwenden Sie einfach ein Skript mit Facebook SDK direkt im Tag

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

Wir waren mit demselben Problem konfrontiert, und da FB sdk nicht geladen wurde (oder mit Verzögerungen geladen wurde), verursachte dies in einigen Fällen Probleme (oder das Durchbrechen von Javascript), die davon abhängig waren.

Um dieses Problem zu beheben, haben wir alle Anrufe bezüglich facebook ..__ delegiert. Wir haben eine Funktion wie die folgende erstellt:

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

Wo fbInitialized ein benutzerdefiniertes Ereignis ist, erfahren Sie mehr über benutzerdefinierte Ereignisse hier. Und window.isFBInitialized ist eine Variable, die beim Laden von SDK festgelegt wird.

callback ist die Methode, die FB-bezogene Ereignisse einschließt.

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

callOnFBSDKLoad(FBLogin)

PS: Bitte ignorieren Sie Syntax- und Namenskonventionen. Ich teile grundsätzlich die Idee, solche Probleme zu lösen.

1
Mohit Kanwar

Eine einfachere und solide Lösung. Rufen Sie eine Funktion auf, wenn das SDK geladen wird. Ich werde es triggerLoginCheck() nennen.

<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>

Später, irgendwo, platzieren Sie das hier: 

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

Es funktioniert gut für mich. Notwendig ist das Objekt "Log.info.bind".

var Log = {info: {bind: function () {alert ('Hi'); testAPI (); }}}
0