I'm calling FB.login() on a click event in my application. The dialog pops up as expected, but when the user is done logging into Facebook (and/or authorizing the app), the dialog does not close. Instead it loads a white page (inside the dialog) and the title changes to XD Proxy.
This only happens on Google Chrome (I'm using the latest version available right now for Windows 7).
This doesn't happen if Chrome is in Incognito mode.
The fb-login 'social plugin' works fine on Chrome.
To test/debug this further, I created a new Facebook App with vanilla settings. The only change I made was set the Site URL in the app settings. Here's HTML code that you can use to recreate this bug.
Sample Code for recreating issue
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Chrome Bug Test</title>
</head>
<body>
<button onclick="dologin()">Login using Facebook</button>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '[YOUR APP ID HERE]',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script type="text/javascript">
function dologin(){
FB.login(function(r){
if(console && console.log) {
console.log(r);
}
});
}
</script>
</body>
</html>
Facebook Settings that I've tried changing
Setting a site domain, didn't change anything.
Using a custom channelUrl and channel file, didn't help either.
Related bugs tracked at Facebook
http://bugs.developers.facebook.net/show_bug.cgi?id=14789
https://github.com/facebook/connect-js/issues/269
http://bugs.developers.facebook.net/show_bug.cgi?id=12112
http://developers.facebook.com/bugs/278247488872084
Related issues here on Stack Overflow
Blank popup with FB connect
facebook connect blank pop up on chrome
Facebook Connect Login redirecting in Chrome and Safari
https://stackoverflow.com/questions/4423718/blank-page-with-fb-connect-js-sdk-on-after-permission-request
Facebook connect showing blank popup on login in Internet explorer 8
Facebook login popup window stays open when using Fb.login in IE
JS SDK FB.login() works but pop-up dialog is staying open after logged in
Facebook login hangs at "XD Proxy" when page is installed via Chrome Web Store
XD Proxy Facebook
XD_Proxy popup won't close
I've seen many people come across this, but what bugs me is that I haven't been able to find a concrete fix for this. Facebook hasn't responded to bug reports yet. One solution would be get rid of Javascript based authentication code and do it solely using serverside mechanism (Facebook PHP SDK). I'd like to avoid that due to time constraints.
Anyone have any ideas how to fix this?
I got a similar call to FB.login() to close the dialog box by changing
onclick="dologin()"
to
onclick="dologin(); return false;"
Given the age of this post, I am guessing that the poster has solved this; however, given that this is also a resource for others searching to resolve similar issues, I thought that I would include my experience just in case.
I found out that what was causing this same issue symptom for me was accidentally forgetting to include event.preventDefault(); in my "click" listener handler in jQuery. The facebook login dialog was popping up and allowing me to log in but not disappearing. The issue was that the website was performing the default form post action, which was interfering with the facebook call-back function.
I had the same exact problem. I did two things, first I added this line right before the FB.init() call:
FB.Flash.hasMinVersion = function () { return false; };
Then I went into the FB app page and added the Site Domain (i.e. test.com).
I think the site domain setting was the key, but I am not 100% positive. All I know is that it seems to always close now in all browsers including Chrome.
Short answer relating to question above:
Load the all.js script over https.
<script src="https://connect.facebook.net/en_US/all.js"></script>
Longer answer if you are troubleshooting a similar issue to the original question:
Use Google Chrome to attempt the login. Once you have logged in and have the blank pop-up window hanging up on the screen, press F12. This brings up the developer tools for Chrome. Click the Console tab, and you will hopefully see the error. What you will likely see is related to XD (cross-domain) issues.
Even if your particular issue is different from the issue I was having, the above should lead you in the right direction.
My issue/solution was specific the Facebook C# SDK v6 documentation - the tutorial code loads the all.js script using a URL that begins with // - which then loads the script from the same scheme as my site (which was http). After I logged in, the pop-up tried to redirect me back from the https Facebook login to my http site and bingo, we have the XD issue. The solution was to specifically load the scripts from https://connect.facebook.net/en_US/all.js as follows:
// Load the SDK Asynchronously
(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 = "https://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
Edit:
After some consideration, this approach of allowing a redirect to http might compromise the security of the system by allowing the data in that request to be read by someone else and then to be re-used. I couldn't find any relevant documentation or examples and so I could not conclude one way or another, YMMV.
Calling this snippet after FB.init fixed the issue for me. But other solutions seem to have worked for different cases.
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
if ($.browser.chrome || $.browser.msie) {
FB.XD._origin = window.location.protocol + "//" + document.domain + "/" + FB.guid();
FB.XD.Flash.init();
FB.XD._transport = "flash";
} else if ($.browser.opera) {
FB.XD._transport = "fragment";
FB.XD.Fragment._channelUrl = window.location.protocol + "//" + window.location.host + "/";
}
I've been experiencing the same issue in IE9, and it seemed to stem from upgrading to Flash Player 10. The answers suggested already did not work for me and I'd lost hope in trying to fix it since finding an open bug at Facebook covering it. But Henson has posted an answer on a similar question that fixed it for me. In the JavaScript in my site master I removed these lines
FB.UIServer.setLoadedNode = function (a, b) {
//HACK: http://bugs.developers.facebook.net/show_bug.cgi?id=20168
FB.UIServer._loadedNodes[a.id] = b;
};
and now it works. (N.B. I have not checked to see if the IE8 issue those lines were intended to overcome returns.)
Related
I've been working on a problem for the last day and a half now and have still yet to find a solution.
When visitng my game on facebook (which is in facebook's iFrame) php sessions don't work. This is for IE and Safari. Chrome works fine.
I've already read all the posts on stack about this problem, which seems to be down to third party cookie security and needing interaction with the iFrame first. There was a workaround by making javascript post some form data to the iFrame first, but this seems to have been 'fixed' in the latest versions of the browsers very recently as this no longer works.
I even tried implementing a start page that would require them to click a link first (in the iFrame) to load another page which would then create the session. But even THAT doesn't work.
I'm also having trouble even loading new pages in the iFrame using javascript, which seems to always cause infinite loop refreshes.
And no, P3P headers do NOT solve it.
Does anyone have a solution to this problem? I can't be the only one with it, considering how many facebook apps exist!
I came across this problem using a client that had "Accept third party cookies" disabled. My solution was to force PHP to embed the session ID into the URI by putting this line at the start of each page:
ini_set('session.use_trans_sid', true);
As the URLs are in iframe within Facebook the SID is not seen in the top window.
For IE, you will need the P3P Headers set. Something like:
<?php header('P3P: CP="CAO PSA OUR"'); ?>
Safari blocks 3rd-party cookies by default. Currently, the only work-around that is working for me is to "pop-up" a new window to set the cookies. I have something like this:
<script type="text/javascript">
function safariFix(){
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1){
window.open('https://yourdomainname.com/safari.php', 'Safari Fix','width=100,height=100');
}
}
</script>
And safari.php will have this:
<?php
setcookie("safari_test", "1");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Safari Fix</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
window.close();
});
</script>
<body>
Since Safari does not accept third-party cookies by default, we are forced to open this window.
This window will automatically close once we have set the cookies.
</body>
</html>
PROBLEM: This won't work if users have "block pop-ups" enabled in Safari. If anyone has a better solution for this, inform me ;)
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
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.
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!
make sure that you are not (pending) as a developer/admin in the app settings.
I get this error when the AppID is incorrect. Double check your AppID.
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.
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.
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".
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).
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.
I'm running into a bit of trouble trying to call my native iOS application from my web app (apple-mobile-web-app-capable). Whenever I'm in Safari pressing the button to open my app with a custom url scheme, that works just fine.
However, when I've added it to the home screen I get stuck with the error: The URL can't be shown. Redirecting to http or https works fine but if I call mysupercustomurlscheme:// I get the error message above.
I've tried opening it by document.location.href, window.location, etc etc but nothing seems to do the trick and I've run out of ideas.
If anyone has got any ideas I'd be most grateful to hear them.
Thanks in advance!
Okay, here's a somewhat clumsy way to do it, but it works and might help some poor soul out there trying to achieve the same thing.
First, create a simple HTML link as, apparently, regular HTML links open in Mobile Safari instead of within the full screen view in the web app.
Link
In redirect.html you simply redirect the user with some simple javascript.
window.location = "mysupercustomurlscheme://"
And that's it! It's certainly not the best way to do it but it's 'fairly' seamless. That's what I came up with at least, if you have any other suggestions do let me know.
Hope this helps someone!
Just wanted to post an example of what Tobias is referencing. You need to host on your server and link to in emails, social media, etc. Simply substitute in your app's URI and your App Store link. Note that the iframe works on more browsers.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/my.app/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>
So, if the user has your app installed, the link with the URI will succeed and you will exist the browser before the script for redirecting to the App Store can be triggered. If the user does not have your app, the redirect succeeds (after a brief ugly error message). I am a developer at Branch and we use this, so feel free to reach out with questions in implementing.
I have facebook connect button on a page of my site and I want user to redirect to a page after a successful login: here's the code snippet:
</script>
<fb:login-button onlogin="facebook_onlogin();">
</fb:login-button> <script type="text/javascript">
FB.init("API_KEY", "http://myip/facebookapp/xd_reciver.html/");
function facebook_onlogin() {
window.location="http://myip/facebookapp/mypage/"
}
</script>
But when I logged in it redirects to the page INSIDE the pop-up, how can I redirect to the page out side of the popup..
In my experience, this is generally caused by not having the cross-domain receiver file set up properly.
Assuming you copied the cross-domain receiver file that Facebook provides, then in your code snippet above, it looks like you misspelled "receiver" in xd_receiver.html. Double-check that it is a valid URL by copying and pasting it into your browser and making sure it can be loaded... my guess is you'll have to fix the spelling and remove the trailing slash, ie. http://myip/facebookapp/xd_receiver.html. Double-check the API key while you're at it, Facebook Connect can be quite frustrating to set up sometimes.
Are you using latest connect javascript sdk by facebook or the oldest one ?
checkout the latest javascript sdk by facebook http://developers.facebook.com/docs/reference/javascript/
Here you'll see nice working example.
I do IFrame application for facebook.
Problem is: any link inside it causes redirect loop
Link is: http://mydomain/mypage?fb_sig=[what I got from $_GET['fb_sig']]
(to test I link to the same page as my loaded canvas is loaded from)
when I click on it, my server returns:
<script type="text/javascript">
top.location.href = "http://www.facebook.com/login.php?api_key=5dc632fcef992470341178f492f79b93&v=1.0&next=http%3A%2F%2Fthiismydomain%2Ffacebook%2F%3Ffb_sig%3D96a5c47f133eadcfbba4abf82e5311e0%26page%3D1";
</script>
then it goes to corresponding page, and facebook returns
Location: http://thisismydomain/facebook/?fb_sig=96a5c47f133eadcfbba4abf82e5311e0&page=1&auth_token=ce4cf4968f91cace5b3e915f5b658984
then, my server replies with
<script type="text/javascript">
top.location.href = "http://www.facebook.com/login.php?api_key=5dc632fcef992470341178f492f79b93&v=1.0&next=http%3A%2F%2Fthisismydomain%2Ffacebook%2F%3Ffb_sig%3D96a5c47f133eadcfbba4abf82e5311e0%26page%3D1%26auth_token%3Dce4cf4968f91cace5b3e915f5b658984";
</script>
and back, facebook replies:
Location: http://thisismydomain/facebook/?fb_sig=96a5c47f133eadcfbba4abf82e5311e0&page=1&auth_token=ce4cf4968f91cace5b3e915f5b658984&auth_token=77df653b7949ca39c1a226c82cce8add
and it goes on and one without end.
Should I say that this redirect responce from my server is generated automately (most probaby my facebook php lib)
I have no more ideas why this happends. Any ideas?
I had a similar problem, where getSession() returned nothing, and thus sending me out on an infinite redirect loop. I solved it by enabling OAuth 2.0 in the settings for the application, as stated here:
http://forum.developers.facebook.net/viewtopic.php?id=64656
Ok, if you recognize the problem, here is the solution:
fb_sig is not the only param to be passed manually. Whole fb_sig* should be passed. Read more at this beautiful page http://www.foobots.net/breakouts.html