Tham chiếu không bắt buộcLỗi: FB không được xác định khi sử dụng FB.getLoginStatus

Question

Tôi đang cố kiểm tra xem người dùng đã đăng nhập bằng facebook chưa và gặp lỗi đó trong bảng điều khiển JS. Mã của tôi trông giống như sau:

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

Điều gì có thể là vấn đề và có bất kỳ sugestions nào về cách khắc phục?

Answer 1

Bạn đang gọi FB.getLoginStatus trước khi SDK được tải và/hoặc được khởi tạo. Để chờ đợi, đó là những gì mà sự kiện fbAsyncInit dành cho. Vì vậy, hãy gọi phương thức trong đó.

Answer 2

Trong Chrome, bạn sẽ gặp lỗi: Tham chiếu không bắt buộcLỗi: FB không được xác định.

Tôi muốn kích hoạt sự kiện tùy chỉnh trong chức năng khởi tạo của Facebook, fbAsyncInit(). Sau đó, tôi không giới hạn làm tất cả các kịch bản liên quan đến FB của tôi bên trong hàm fbAsyncInit. Tôi có thể đặt nó ở bất cứ đâu, chỉ bằng cách lắng nghe sự kiện tùy chỉnh đó được kích hoạt.

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

tôi đã sử dụng phương pháp đơn giản sau đây và nó hoạt động một cách chính xác:

Trong phần head tôi tải SDK:

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

Sau đó, trong body trang của bạn mà nội dung thực tế của bạn là , Tôi đã sử dụng điều này:

<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

Chúng tôi đang đối mặt với thứ e cùng một vấn đề, và kể từ khi FB sdk không tải (hoặc tải với sự chậm trễ) điều này đã gây ra vấn đề (hoặc phá vỡ javascript) trong một số trường hợp đó là phụ thuộc vào đó.

Để giải quyết vấn đề này, chúng tôi đã ủy quyền tất cả các cuộc gọi liên quan đến facebook. Chúng tôi tạo ra một chức năng như:

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

đâu fbInitialized là một sự kiện tùy chỉnh tìm hiểu thêm về các sự kiện tùy chỉnh here. Và window.isFBInitialized là một tập hợp biến khi SDK được tải.

gọi lại là phương pháp kèm theo các sự kiện liên quan đến FB. ví dụ:

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

callOnFBSDKLoad(FBLogin) 

PS: Vui lòng bỏ qua ý tưởng về cú pháp và đặt tên, tôi về cơ bản chia sẻ ý tưởng để giải quyết các vấn đề đó.

Answer 5

Một giải pháp đơn giản và vững chắc hơn. Gọi hàm khi SDK tải. Tôi sẽ đặt tên nó là 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> 

Sau đó, bất cứ nơi nào, nơi này:

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

Answer 6

Đơn giản chỉ cần sử dụng kịch bản với facbook sdk trực tiếp trong thẻ

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