仅限Firefox：在FB.init()之前调用了FB.login()

Question

使用Facebook SDK时，当尝试将用户连接到我的网站时，在控制台中会出现以下错误。在除Firefox之外的所有其他浏览器中，“使用Facebook连接”按钮都正常工作。

我在innit配置中有一个Channel URL，并且已确认此问题发生在没有Firebug的Firefox安装中。以下是我的代码：

<script type="text/javascript">
  window.fbAsyncInit = function() {
  FB.init({
     appId :  'my_real_app_id',
     channelUrl : 'MYURL.com/channel.php',
     status:  true,
     cookie:  true,
     xfbml :  false
  });
};

(function(d) {
  var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
  if (d.getElementById(id)) { return; }
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  ref.parentNode.insertBefore(js, ref);
}(document));

$(document).ready(function() {
  $('a#login-fb').click(function(event) {
     event.preventDefault();
     FB.login(function(response) {
        if (response.authResponse) {
           console.log('Welcome! Fetching your information...');
           FB.api('/me', function(response) {
              handleFacebookLogin(response);
           });
        } else {
           console.log('User cancelled login or did not fully authorize');
        }
     }, {scope: 'email, offline_access, user_birthday, publish_stream, publish_actions' });
  });
</script>

- w2bro

---

你解决了问题，还是采用了某些变通方法？如果是的话，如果你能将其提交为答案，那就太好了。 - Ain Tohvri

Answer 1

我通过更改上面的javascript，在#fb-root下面使用以下代码来解决此问题:

<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function() {
  window.fbAsyncInit = function() {
     FB.init({
        appId :  'my_id',
        status:  true,
        cookie:  true,
        xfbml :  false
     });
  };

  (function() {
     var e = document.createElement('script');
     e.async = true;
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
     document.getElementById('fb-root').appendChild(e);
  }());

  //rest of code here

- w2bro

Answer 2

我在一个 Rails 项目中遇到了类似的问题，解决方法是:

    window.fbAsyncInit = function() {
    FB.init({
        appId:my_real_app_id, 
        cookie:true,
        status:true, 
        xfbml:true
    });

将其从头文件中移除，并将其放置在正文中的<div id="fb-root"></div>标签后面的<script>标签中。

- Ain Tohvri

Answer 3

对于浏览器平台，插件似乎使用后置准备插件来填充APP_ID。它假定这在项目根目录下的config.xml中指定。我不确定为什么 - 但我的配置中缺少了这个导致了错误。

将此行添加到config.xml中，似乎可以解决问题。

<preference name="APP_ID" value="0123456789"/>

注意：实现似乎基于多个文件中特殊令牌APP_ID的内联替换（请参见plugins/cordova-plugin-facebook4/scripts/after_prepare.js）。

在我的情况下，这已设置为null（可能是第一次运行时没有上述条目在config.xml中）。为了解决这个问题，我重新安装了插件和浏览器平台。

$ ionic cordova plugin remove cordova-plugin-facebook4
$ ionic cordova platform remove browser
$ ionic cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="0123456789" --variable APP_NAME="myApp"
$ ionic cordova platform add browser

- Martin