Question

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

我在innit配置中有一个频道网址，我已经确认在没有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>

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

Answer 2

我在Rails项目中遇到了类似的问题，它有助于实现

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

标题，并将其放在正文<script>正下方的<div id="fb-root"></div>标记中。

Answer 3

对于浏览器平台，该插件似乎正在使用post prepare插件填充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

仅限Firefox：在FB.init（）之前调用的FB.login（）

3 个答案: