My sample Facebook app was working great yesterday in Chrome. The page integrates Silverlight ad Facebook via the JavaScript SDK. I can check basic login status, login to Facebook, get your name and log out.
Today, with no changes on my part, it's broken in Chrome with a JavaScript error that's very common on Google search results, but no real answers. It still works great in IE and Firefox.
Here's the public URL:
http://www.andrewdothay.net/prj/facebook/
When you open the JavaScript console in Chrome, it throws tons of these errors:
Unsafe JavaScript attempt to access frame with URL
http://www.facebook.com/login.php?api_key=151352704876752&cancel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df1175dd3f%26origin%3Dhttp%253A%252F%252Fwww.andrewdothay.net%252Ff304d89d8%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df3760623c%26result%3DxxRESULTTOKENxx&channel_url=http%3A%2F%2Fwww.andrewdothay.net%2Fprj%2Ffacebook%2F&display=popup&fbconnect=1&locale=en_US&method=auth.login&next=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df3c546942%26origin%3Dhttp%253A%252F%252Fwww.andrewdothay.net%252Ff304d89d8%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df3760623c%26result%3DxxRESULTTOKENxx&return_session=1&sdk=joey&session_version=3&v=1.0 from frame with URL http://www.andrewdothay.net/prj/facebook/ .
Domains, protocols and ports must match.
Any ideas on what's going on with Chrome here?
Update
I discovered that Chrome on today's machine was blocking the login pop-up when I was calling FB.login(), but I know I wasn't getting those 190 error messages in the JavaScript console yesterday.
So, when I allow pop-ups in Chrome, it does work for an end user, but all those new error messages are killing my diagnostic experience as a developer.
Source: Tips4all, CCNA FINAL EXAM
I've found the solution. If you execute FB.login without user action, webkit blocks the popups.
ReplyDeleteFor instance, I used an invite system on my project. There was a input/text to enter invitation code. I checked the invitation code is available with an ajax/post request. if it is available, I run FB.login(). As you guess, browser blocked popup and tons of errors appeared at js console.
So you must run FB.login() after a user action. I'll put a facebook login button between ajax/post and FB.login(). Users'll have to click it -thats sucks- but they'll not see a problem.
Btw, problem occures in a few days. I think it's about trust system of browser. When you're developing it, you visit lots of times, browser thinks it's reliable at first. I'm not sure about this part but my solution works.
In my case it was because of facebook JS loaded multiple times at single page: one for login and second for "like" button. Removing reference in "like" module saves the day.
ReplyDeleteMücahit Yılmaz is correct. Take the example I pasted below and if you use the setTimeout() method it fails, other wise it works. I still get the warning message in a loop until I properly login but it's a small price to pay. I'm sure users won't see it.
ReplyDelete$(document).ready(function() {
$("#facebook_link").click(function() {
//setTimeout(fb);
fb();
return false;
});
function fb() {
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
gotResponse(response);
} else {
// no user session available, someone you dont know
FB.login(function(response) {
if (response.session) {
// user successfully logged in
gotResponse(response);
} else {
// user cancelled login, do nothing
}
});
}
});
}
function gotResponse(response) {
console.dir(response);
}
});
It's easy to reproduce: login to facebook in another tab, then try this code and you'll see no warnings. Logout, then try the code and you get the warnings. It's because it hits the .login block.
See if pop-up windows are blocked in Chrome.
ReplyDeleteIn response to user631822, I actually had the function running on a user click, but was getting my popup blocked by Chrome. The problem was that I had FB.init() at the top of the function, followed by the FB.getLoginStatus() procedure. Apparently this was taking too much time, or
ReplyDeleteI had this problem with a chrome browser and it was due to my chrome settings. I had the browser set to disallow 3rd parties sites from setting cookie data. Allowing Pop-ups was not an for me. When the facebook iFrame is created it must set a cookie that it then uses to track if the user needs to login. If that cookie isn't allowed to be set then the site fails. One thing that would be useful in the facebook api would be a setting that shows when something is failing. I do not see that as an event that one can subscribe to and assign a callback.
ReplyDeleteHere is a link to the FB javascript sdk on subscriptions. Any response on finding a callback for failed requests would be appreciated.
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/