web-dev-qa-db-fra.com

Uncaught ReferenceError: le FB n'est pas défini lors de l'utilisation de FB.getLoginStatus

J'essaie de vérifier si un utilisateur s'est connecté en utilisant Facebook et obtenir cette erreur dans la console JS. Mon code ressemble à ceci:

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

Quel pourrait être le problème et y at-il des suggestions sur la façon de le résoudre?

javascriptfacebookfacebook-login
30
Xeen

Vous appelez FB.getLoginStatus avant que le SDK ne soit chargé et/ou initialisé. Attendre cela, c’est l’événement fbAsyncInit. Alors mettez l'appel de méthode ici.

42
CBroe

Dans Chrome, vous obtiendrez le message d'erreur suivant: Uncaught ReferenceError: le FB n'est pas défini .

J'aime déclencher un événement personnalisé dans la fonction d'initialisation de Facebook, fbAsyncInit () . Ensuite, je ne me limite pas à effectuer tous les scripts liés au FB dans la fonction fbAsyncInit. Je peux le mettre n'importe où, simplement en écoutant le déclenchement de cet événement personnalisé.

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

J'ai utilisé l'approche simple suivante et cela fonctionne correctement:

Dans la section head, je charge le SDK:

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

Puis dans la body de votre page où se trouve votre contenu actuel, j’ai utilisé ceci:

<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

Utiliser simplement le script avec facebook sdk directement dans la balise

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

Nous étions confrontés au même problème, et comme FB sdk ne chargeait pas (ou chargeait avec des retards), cela posait des problèmes (ou cassait le javascript) dans certains cas qui en dépendaient.

Pour résoudre ce problème, nous avons délégué tous les appels liés à facebook . Nous avons créé une fonction telle que:

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

Où fbInitialized est un événement personnalisé, en savoir plus sur les événements personnalisés ici. And window.isFBInitialized est une variable définie lors du chargement du SDK.

callback est la méthode englobant les événements liés au FB .

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

callOnFBSDKLoad(FBLogin)

PS: Ignorez les conventions de syntaxe et de nommage, je partage en gros l’idée de résoudre de tels problèmes.

1
Mohit Kanwar

Une solution simple et solide. Appelez une fonction lors du chargement du SDK. Je vais le nommer 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>

Plus tard, n’importe où, placez ceci: 

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

Cela fonctionne bien pour moi. Est nécessaire d'inclure l'objet "Log.info.bind".

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