Facebook Sdk被屏蔽:如何检测用户是否在使用Ghostery

Facebook Sdk blocked : How to detect if a user is using Ghostery?

本文关键字：是否 用户 Ghostery 检测 屏蔽 Sdk 何检测 Facebook      更新时间：2023-09-26

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

是否有一种简单的客户端方法可以检测Ghostery的屏蔽，这样我就可以显示一条友好的消息，要求用户将我的网站列入白名单，如果他想完全访问这些功能的话？

仅供参考，我正在使用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 */
    };
};

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
}

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

我假设您已经拥有connect.facebook.net 的主机权限

2019年，除了反跟踪浏览器扩展外，一些浏览器的默认行为是阻止第三方跟踪cookie（例如firefox等），所以我在Angular（2+）项目中使用了@Xan的方法。我正在使用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'));
  }

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

这可能比设置超时并等待fbAsyncInit 快得多

相关文章：