I'm having trouble with facebook javascript client side App authorization. The code below works as expect when the App is not authorized, App authorization popup appears. When the same code runs in codeignigter the authorization dialog fails to appear.
// 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 = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : '169550646480230', // App ID
channelUrl : '//'+window.location.hostname+'/channel', // Path to your Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
This might be due to two things (I am making assumptions here):
CSRF is enabled and blocking the external response from Facebook
response from FB is filtered out due to invalid URI characters.
Disable CSRF first, and check if it works, that would be my starting point.
Figured this one out.
Any PHP facebook calls that are run before the Javascript authentication will generate an exception on the server and stop all HTML activity. I guess its called Async for a reason.
Related
All my pages have the facebook login button and load the facebook SDK.
This is my JS code for loading FB:
window.fbAsyncInit = function() {
FB.init({
appId : 129837912837129837128937, //fake id
channelUrl : '//www.example.com/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oath : true
});
// Load the SDK Asynchronously
(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));
Problem reproduction:
1) Use logout link to logout from facebook within my site. Facebook.com also gets logged out. Fine so far. My site now has the user logged out.
2) The user at some point goes to facebook.com and logs in. He uses a cookie to maintain the session.
3) He then goes to my site directly on the link /page.php?5&sdasda&asdad or any other non-home page link and the page loads completely (apart from the FB login button that has some lag of 1-2secs max).
4) When FB login button loads eventually, the FB js detects that the user is already logged in facebook.com (sees the fb cookie obtained in step 2) so attempts to "log" him in by redirecting to the root (www.mydomain.com) and not refreshing the current page.
This is how my login button looks like:
<div class="fb-login-button fb_iframe_widget " scope="status_update,email,user_birthday,read_stream,publish_stream,share_item"></div>
rendered as:
Is this a normal behavior? Am I doing something wrong in the first place? Anything to fix this?
I'm writing a web app that relies on logging in via Facebook. Here's what I want to do:
When the user clicks the "Connect with Facebook" button on the web
app, another tab will open in his browser with the Facebook login
link that lets him authenticate the app.
Once the user authenticates the app, the login tab will close, the
the user will be on the original web app page
The web app will detect that the user has connected with Facebook,
and logs the user in.
Right now, the only solution I can think of is having the web app continuously querying Facebook to see if the user has been logged in, is there a better way of doing this?
Integrate login with the Facebook Javascript SDK. (rather then the PHP sdk) You don't need to reload the page. You can deal with logged in user states in the callbacks.
//load the async FB sdk
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// 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 = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
//Do something when the user is logged in
FB.Event.subscribe('auth.login', function(response) {
//do something with response object
});
</script>
I want facebook login in my website
For that I followed these steps:
1)Created a demo site at developers (i uploaded the image as well)
2)Copied the app id at the place where required
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<MY APP ID>',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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</div>
3)I got the fb login button as shown in image:
on clicking the button a new window is popped up asking fb username and password and after coming back it shows this error
Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/dialog/permissions.request?_path=permissions.request&app_id=158742990907100&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D5%23cb%3Dfbf1cdd54%26origin%3Dhttp%253A%252F%252Flocalhost%253A8080%252Ffa53db99%26domain%3Dlocalhost%26relation%3Dopener%26frame%3Df27abde948&sdk=joey&display=popup&response_type=token%2Csigned_request&domain=localhost&fbconnect=1&from_login=1&client_id=158742990907100 from frame with URL http://localhost:8080/Befundo/. Domains, protocols and ports must match.
The properties I set for my app is :
I am not sure about APP NAMESPACE,APP DOMAIN,SITE URL
I am getting one more problem, when I click Login button twice it logs this message in the console of Browser::
FB.login() called when user is already connected.
and do nothing.
Please shed some light where I am doing wrong?
Thanks in advance.
Your login button is working as expected, and it's connecting user (which is confirmed by message that came after second click on the login button).
Next message is not an error in your code (it's because of cross-domain policy applied to JS-SDK trying to communicate with Facebook):
Unsafe JavaScript attempt to access frame with URL ... from frame with URL ... Domains, protocols and ports must match.
You can (probably) suppress it by passing self-hosted channelUrl to FB.init. (see FB.init documentation)
You also seems to do nothing after the user is connected. Read documentation for FB.login to figure out what you should do after user is logged in...
Hi, i am puzzled about an Facebook-Error that has been recently popping up in my (newer) applications: The apps are working fine, until i disable sandbox mode and try to test the app as a normal user.
When clicking the login-button as normal user i get:
"An error occured. Please try again later" or sometimes : "API Error Description: An unknown error occurred Error Message: kError 1349045: An invalid Platform session was found.: An invalid Platform session was found."
Sometimes the normal Permission-Dialog shows up, but after asking the extended permissions i also get the error...
Here is my Code:
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX', // App ID
channelUrl : '//' + window.location.hostname + '/fbchannel.html', // Channel File
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
$(function(){
$('.login').click(function(e) {
e.preventDefault();
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
$('#output').text('Good to see you, ' + response.name + '.');
});
} else {
$('#output').text('User cancelled login or did not fully authorize.');
}
}, {scope: 'email, user_photos, publish_stream, user_likes'});
// Additional initialization code here
});
});
// 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 = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
I already tried enabling/disabling the enhanced auth dialog and the domain, facebook-app url and website is correctly set. For an admin of the app everything is working fine...
Does anybody have an idea what i have done wrong or have the same problems?
When you set up a facebook app you set up the urls from which it can be used.
My guess is that you are trying to load this page of yours from a domain different than the one in the facebook app settings.
In the facebook app settings, you should have something set in the Website - Site Url, you then need to load the page with the js sdk from the same domain.
If you want, you can set up other domains in the App Domain in the settings page, but all of the domains there must be derived from your Site URL.
I created a very simple page that only loads the js sdk and then tries to call the FB.login, I then tested it on the same domain as it is set for that app in the settings page, everything worked great.
I then copied that file to my localhost and gave it a try there, and indeed I received the same error you described.
I am allowing my users to login to my web-app using their Facebook account.
A user is auto-logged in to my website through Facebook if -
They are registered to my site using Facebook
They haven't logged out of my site and ended their session
They are currently signed into Facebook
This is fine, except, there is a pause between the user accessing the homepage and being taken to their dashboard whilst Facebook checks whether they have logged in. Is there a way to show a sort of pre-loader that says "Signing in with Facebook" whilst the transition is made?
I am using the following Facebook javascript -
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxx',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function() {
FB.api('/me', function(response) {
window.location='mysite/fb_signin/';
});
});
};
(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>
Thank you.
With the facebook api you are able to check if the user is connected or not before doing to call to FB.api (that is what taking time).
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
This should help
I agree with Marc that you can use the getLoginStatus() to help you determine what they are before you send them to one place or another. However, you said something was slow. So that led me to look at your code, and it appears you're missing the channelUrl in your FB.init() call (see https://developers.facebook.com/docs/reference/javascript/ for more information). without the channelUrl user interaction with the Javascript SDK functions will be sluggish and slow.