Menu
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
981
OAuthException: If you receive an OAuthException error, it means that Edgar doesn't have the correct permissions to access your Facebook accounts right now. The password may have been changed on Facebook or Facebook may have reset your security session.
In the App Dashboard, choose your app and scroll to Add a Product Click Set Up in the Facebook Login card. Select Settings in the left side navigation panel and under Client OAuth Settings, enter your redirect URL in the Valid OAuth Redirect URIs field for successful authorization.
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.
98
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!
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
