Question

为了在Facebook Graph Api上进行调用，用户必须登录并接受我的网站上的应用程序。启用Ghostery并阻止Facebook Connect后，它无法加载sdk，我在Chrome控制台中获得了一个不错的GET http://connect.facebook.net/en_US/sdk.js net::ERR_BLOCKED_BY_CLIENT。显然它打破了这个特征。

有一个很好的，简单的客户端方式来检测Ghostery的阻塞，所以我可以显示友好的消息，要求用户将我的网站列入白名单，如果他想要完全访问这些功能吗？ / p>

仅供参考，我正在使用Angularjs并使用提供程序加载sdk并进行调用。这是它的外观：

function fbInit(appID) {

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

    window.fbAsyncInit = function() {
        FB.init({
            appId      : appID,
            cookie     : true,  
            xfbml      : true,  
            version    : 'v2.1' 
        });
    }; 
}

this.setAppID = function(appID) {
    this.appID = appID;
};

this.$get = function() {
    var appID = this.appID;
    var self = this;
    fbInit(appID);

    return {
        /* Methods */
    };
};

Answer 1

Facebook在加载JS客户端时调用fbAsyncInit。如果在一定时间后没有运行该功能，您可以相对确定它已经失败。你可以采取的一种方法就是这样。

window.fbLoaded = false;

setTimeout(function() {
    if (!fbLoaded) {
        // show error
    }
}, 5 * 1000);

window.fbAsyncInit = function() {
    window.fbLoaded = true;
    // hide error incase client took more than 5 seconds to load
    // continue running your code as usual
}

Answer 2

您可以尝试在初始化FB API之前通过XHR自行加载文件，并在该请求出错时中止/通知用户。

我假设您已拥有connect.facebook.net

的主机权限

Answer 3

您可以将void处理程序附加到脚本标记，以加载API请求失败时将触发的API。

这比设置超时和等待onerror

要快得多

Answer 4

在2019年，除了反跟踪浏览器扩展之外，某些浏览器的默认行为是阻止第三方跟踪cookie（例如firefox或更多），因此我在Angular（2+）项目中使用@Xan's approach作为案例。我正在使用Fetch API来检查津贴。（您可以在提供的链接中检查Fetch API的浏览器兼容性）。在下面，您可以在应用初始化或GDPR接受等之后尽快调用checkIfFacebookIsBlocked()函数。

  checkIfFacebookIsBlocked() {
    const _this = this;
    fetch('https://connect.facebook.net/en_US/sdk.js')
      .then(function() {
        console.log('Facebook sdk is allowed:');
        _this.initFacebookSdk();
      })
      .catch(function() {
        console.log('Facebook sdk is NOT allowed:');
        // handle the case that facebook is not allowed
      });
  }


  initFacebookSdk() {
    const _this = this;
    (window as any).fbAsyncInit = function() {
      FB.init({
        appId      : FACEBOOK_APP_ID, // fb App ID
        cookie     : true,
        xfbml      : true,
        version    : FACEBOOK_SDK_VERSION // fb app's api version
      });
      FB.AppEvents.logPageView();
      // your code after Facebook sdk is loaded... (getLoginStatus(), login(), api('/me', ...) etc.)
    };
    (function(d, s, id) {
      let js;
      const fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/en_US/sdk.js';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }

Facebook Sdk被阻止：如何检测用户是否正在使用Ghostery？

4 个答案: