14

I copied the HTML below from the 'Facebook for Websites' Facebook developer page and replaced APPID with my app id. I put this page on my dev web server. If I navigate to the page, it renders the login button just fine. But clicking the login button, it opens the Facebook login page which says "An error occurred. Please try again later."

I must be missing something fundamental. Any ideas?

<html>
<head>
  <title>My Facebook Login Page</title>
</head>
<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'APPID',
        status     : true, 
        cookie     : true,
        xfbml      : true,
        oauth      : true // removed a comma after 'true' as it generates a script error
      });
    };
    (function(d){
       var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all.js";
       d.getElementsByTagName('head')[0].appendChild(js);
     }(document));
  </script>
  <div class="fb-login-button">Login with Facebook</div>
</body>
</html>

Further investigation shows that it works fine in Chrome, Firefox and Safari, and fails in IE9.

This is the URL it goes to in Chrome, it works fine: https://www.facebook.com/login.php?api_key=255367907914&skip_api_login=1&display=popup&cancel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%26error_reason%3Duser_denied%26error%3Daccess_denied%26error_description%3DThe%2Buser%2Bdenied%2Byour%2Brequest.%23cb%3Df16c026dc%26origin%3Dhttp%253A%252F%252Fsami.test.eu%253A81%252Ff314f6d52%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df48d09da8&fbconnect=1&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Fpermissions.request%3F_path%3Dpermissions.request%26app_id%3D255367907914%26redirect_uri%3Dhttps%253A%252F%252Fs-static.ak.fbcdn.net%252Fconnect%252Fxd_proxy.php%253Fversion%253D3%2523cb%253Df16c026dc%2526origin%253Dhttp%25253A%25252F%25252Fsami.test.eu%25253A81%25252Ff314f6d52%2526relation%253Dopener%2526transport%253Dpostmessage%2526frame%253Df48d09da8%26sdk%3Djoey%26display%3Dpopup%26response_type%3Dtoken%252Csigned_request%26domain%3Dsami.test.eu%26fbconnect%3D1%26from_login%3D1%26client_id%3D255367907914&rcount=1

This is the URL in IE9 which results in the error: https://www.facebook.com/dialog/oauth?api_key=255367907914&app_id=255367907914&client_id=255367907914&display=popup&domain=sami.test.eu&locale=en_US&origin=1&redirect_uri=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df14fd3a0495986%26origin%3Dhttp%253A%252F%252Fsami.test.eu%252Ff2d9bfc6aa24134%26relation%3Dopener%26transport%3Dflash%26frame%3Df2539c36bc13734&response_type=token%2Csigned_request&sdk=joey

sakibmoon
  • 2,026
  • 3
  • 22
  • 32
Sami
  • 570
  • 1
  • 4
  • 11
  • Is it the actual code you run? Haven't you forgotten to specify your application id? – zerkms Feb 29 '12 at 22:32
  • Yes I replaced APPID with my actual app id, copy-pasted from the Facebook apps page. If this works for other people, then maybe there is something wrong with my app. But the error message is not helpful at all. – Sami Feb 29 '12 at 22:48
  • Another piece of information: it works fine in Chrome, Firefox and Safari, i.e., I get the Facebook login page as expected. But it fails on IE9, I get "An error occurred. Please try again later." – Sami Feb 29 '12 at 22:55
  • 1
    what if you compare url generated in chrome and IE9? – zerkms Feb 29 '12 at 22:59
  • The URLs are indeed different. IE is the only one who stays on facebook.com/dialog/oauth. The other browsers end up in facebook.com/login.php. – Sami Feb 29 '12 at 23:04
  • I updated the post with the full URLs. – Sami Feb 29 '12 at 23:20

8 Answers8

4

SOLVED (at least for me): I had no "Website with Facebook Login" configured in my facebook app settings cause I did a page tab app. No external website. Unfortunately I did the debugging without the facebook iframe around the app -> so that was the reason.

To get rid of the error I filled in "Website with Facebook Login" and filled out the "App Domains" input in the app settings.

Strange that this problem only occures in IE though!

stoefln
  • 14,498
  • 18
  • 79
  • 138
4

I figured it out after I had some time for a debug session.

I was using a fake domain to develop my app locally. I have the domain in my local hosts file mapped to 127.0.0.1 (I was doing this for reasons not related to this post).

Turns out that when I navigate to the Facebook login page, IE passes 127.0.0.1 in the URL to facebook as the return URL. 127.0.0.1 did not match with the URL I had configured for my app in Facebook, so the login page shows the "An error occurred" message (it would have been nice to get a proper error message).

Other browsers send my fake domain as the return URL, and they have no problems.

In any case, I stopped using the fake domain and ensured that the domain name matches exactly the configuration in Facebook, and now the problem is gone.

Thanks for all the replys. zerkms's suggestion of comparing the URLs finally lead to the solution.

Sami
  • 570
  • 1
  • 4
  • 11
2

make sure that you are not (pending) as a developer/admin in the app settings.

henrikpp
  • 348
  • 2
  • 7
1

I get this because SSL is not configured on my local so https://mywebsite.in/. was not working. Then in my app I have enabled sandbox mode and removed secure url like Secure Canvas URL.

Note: when you enable sandbox mode only app creator would be able to access facebook login. Other users will below message

An error occurred. Please try again later.
Kumar Soneta
  • 61
  • 6
1

I get this error when the AppID is incorrect. Double check your AppID.

Eric Cope
  • 877
  • 1
  • 12
  • 25
  • That's what I suspected until I tried other browsers. Since it works on Chrome, Firefox and Safari, but fails on IE9, I assume my AppID is good. The problem looks to be IE9 specific. – Sami Feb 29 '12 at 22:58
0

i got the same issue,but here the domain name may be the problem. while we create facebook appid, in this section 'Website with Facebook Login' we need to specify the 'Site URL' correctly. Means when we are testing the app in local we need to mention the url as "http://localhost://{portnumber}" and if we are running in server we need to specify actual url like "http://mywebsite.com".

tiru
  • 789
  • 5
  • 20
  • 42
0

UPDATED SOLUTION: In your FB App configuration you need to add a Website platform with your website's URL set. Then you can add App Domains which I set to our website's base domain (e.g. for a URL like http://www.mycoolwebsite.com, just use mycoolwebsite.com).

New FB Settings Screenshot

IMPORTANT: In order for this to work you'll need to be using a subdomain of your app's URL for your local development. You can do this easily by modifying your hosts file on your development computer to use a non-existent subdomain of your website such as local.mycoolwebsite.com. Just google 'edit hosts file' for your platform (e.g. mac / windows) if you're not familiar with how to do this.

munsellj
  • 1,587
  • 13
  • 23
0

Since it's IE specific, the answer has always been (well 99.5% of the time) that your server is not sending out p3p headers. See http://www.hanselman.com/blog/TheImportanceOfP3PAndACompactPrivacyPolicy.aspx for information on how to set these buggers up so IE plays nice.

DMCS
  • 31,720
  • 14
  • 71
  • 104