Menu
The below binds the login event to a div. If I click it, I get the expected js sdk login popup. After submitting the popup with my credentials, however, the popup turns white and doesn't close. If I refresh the page, I'm logged in, but it doesn't auto refresh as you might expect. Anyone got any ideas?
Edit: The same code (with diff app id and domain credentials) works on a different server. This leads me to believe that my problem might be unrelated to the below code. Are there any app or server configs that could cause the login popup to fail to close / update?
<!DOCTYPE html>
<html class="no-js ie ie10plus" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object#">
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
</head>
<body>
<div id="fb-root"></div>
<div id="fbLogin">Test login link</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script>
var fbmm = {};
window.fbAsyncInit = function() {
FB.init({
appId : '339910146083688', // App ID
cookie: true,
xfbml: true,
status: true,
oauth: true
});
$(document).ready(function(){
$("#fbLogin").click(function(){
console.log('test');
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 + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
});
});
};
(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 = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
778
There are some known problems when testing on ports other than 80 or 443. Try setting up your test machine on one of these (“normal”) HTTP(S) ports, and see if the problem still persists.
173
My guess is that the problem occurs since you do not provide a channel url, as mentioned in the documentation (under the Channel Url section):
The channel file addresses some issues with cross domain communication in certain browsers.
...
The channelUrl parameter is optional, but recommended.
Even though your problem is not listed in the three issues the channel file solves, I experienced the same problem as you once and solved it by adding the channel, though it was a while ago so I'm not 100% it's the same.
It is explained there how to create the channel file, and you need to change your javascript just a bit:
FB.init({
appId: '339910146083688', // App ID
cookie: true,
xfbml: true,
status: true,
oauth: true,
channelUrl: YOUR_CHANNEL_URL
});
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
