web-dev-qa-db-ja.com

キャッチされないReferenceError：FB.getLoginStatusの使用時にFBが定義されていません

ユーザーがfacebookを使用してログインしているかどうかを確認しようとしていますが、JSコンソールでそのエラーを取得しています。私のコードは次のようになります。

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

何が問題になる可能性があり、それを修正する方法について何か提案はありますか？

javascriptfacebookfacebook-login
30
Xeen

SDKがロードおよび/または初期化される前にFB.getLoginStatusを呼び出しています。それを待つために、それがfbAsyncInitイベントの目的です。そこで、メソッド呼び出しをそこに入れます。

43
CBroe

Chromeでは、エラーが発生します：ncaught ReferenceError：FB is not defined。

Facebookの初期化関数fbAsyncInit（）でカスタムイベントをトリガーするのが好きです。その後、FB関連のスクリプトをすべてfbAsyncInit関数内で実行することに限定されません。発生するカスタムイベントをリッスンするだけで、どこにでも配置できます。

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

    }
);
52
jairbow

次の簡単なアプローチを使用しましたが、正常に機能します。

headセクションで、SDKをロードします。

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

次に、実際のコンテンツがあるページのbodyで、これを使用しました：

<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

Facebook sdkでスクリプトを直接タグで使用する

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

私たちは同じ問題に直面していましたが、FB SDKがロードされていない（または遅延してロードされている）ため、それに依存するいくつかのケースで問題を引き起こしていました（またはjavascriptを壊していました）。

この問題を解決するために、facebookに関連するすべての呼び出しを委任しました。次のような関数を作成しました：

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

fbInitializedはカスタムイベントです。カスタムイベントの詳細についてはこちらをご覧ください こちら And window.isFBInitializedは、SDKのロード時に設定される変数です。

コールバックは、FB関連イベントを囲むメソッドです。例えば.

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

callOnFBSDKLoad(FBLogin)

PS：構文と命名規則を無視してください、私は基本的にそのような問題を解決するためのアイデアを共有しています。

1
Mohit Kanwar

よりシンプルで堅牢なソリューション。 SDKの読み込み時に関数を呼び出します。 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>

後で、どこにでも、これを配置します。

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

私にとってはうまくいきました。オブジェクト「Log.info.bind」を含める必要があります。

var Log = {info：{bind：function（）{alert（ 'Hi'）; testAPI（）; }}}
0
Claudio Garaycochea