Question

I am currently developing a Facebook App (it’s not my first one) and I encountered some, or a lot of problems.

The index.php file is including the content based on the $_GET['page'] variable. (e.g. ‘step1’, ‘step2’).

On ‘step2’, there is a form for uploading the video. The <input> field has an onChange() event which fires up this code:

function submitForm() {
  console.log('submitting...');
  FB.login(function(response) {
  if (response.authResponse) {
   console.log('Welcome!  Fetching your information.... ');
   FB.api('/me', function(response) {
     console.log('Good to see you, ' + response.name + '.');
     jQuery('#fuserid').val(response.id);
     
     jQuery('#uploadForm').submit();
     jQuery('.formContent').hide();
     jQuery('.loader').show();
   });
  } else {
   console.log('User cancelled login or did not fully authorize.');
   window.location = "index.php?page=contest&error=not_authenticated&signed_request=" + "<?php echo $_REQUEST['signed_request']; ?>"
  }
  }, {scope: 'email,user_birthday,publish_stream,user_likes'});
}

In Firefox, this works exactly like it should.
In any Internet Explorer version, the Facebook-Authentification popup is not opening, nor is the form submitted or anything.
EXCEPT for when the Developer Tools [those from IE] are activated and open – in this case, everything works in IE.

Chrome is similar, sometimes the popup is not opening, and I get the following error message:

Unsafe JavaScript attempt to access frame with URL
https:‍//www.facebook.com/dialog/permissions.request from frame with
URL
http:‍//mydomain.at/myapp/index.php?page=contest&signed_request=XXXX

I did some research, and research tells me that the $channelUrl should resolve this problem.
Here’s the code from my fb.init:

<div id="fb-root"></div>
<script>
(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/de_DE/all.js#xfbml=1&appId=<?php echo $appID; ?>";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type="text/javascript">
  window.fbAsyncInit = function() { 
    FB.init({ 
      appId      : '<?php echo $appID; ?>', // App ID 
      channelUrl : 'http://mydomain.at/myapp/channel.html', // Channel File
      status     : true, // check login status 
      cookie     : true, // enable cookies to allow the server to access the session 
      oauth      : true, // enable OAuth 2.0 
      xfbml      : true  // parse XFBML 
    }); 
 
    // Additional initialization code here  
    window.setTimeout(function() {
      FB.Canvas.setAutoResize();
    }, 150);
  };
</script>

Why is this Authentification-Popup not working in IE, and only sometimes working in Chrome?
Why do the Developer-Tools change the behaviour of the IE so much that everything works?

Answer 1

For IE, the issue is probably with “console.log(…)”: console.log is available only when Developer Tools are opened. You should comment it out, or use a fallback function for logging.