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?
Related
I have made a Facebook registration form that works with custom fields and functions as I expect, EXCEPT when the user is not logged into facebook when they first visit the form.
In this situation the form does not render on screen and the following error appears:
Unable to load the registration form for this ID. You may have
previously blocked this app on Facebook. Go to your Facebook privacy
settings to unblock this app. (Error: Invalid 'client_id'.)
Now I know already that this has been discussed on the site but the solutions offered elsewhere don't work for me and I really want this to work based in the XFBML solution that facebook supports (a demo is here http://developers.facebook.com/docs/plugins/registration/)
If you logout of facebook you can visit a test of my code, taken directly from the facebook example and hardly modified here: https://www.askanutritionist.com/fb.html
By the way, yes sandbox is disabled in the facebook app settings as thats a common fix others on S.O. have suggested.
Thanks for your time.
Note; I would have commented on other existing questions with this topic but stackoverflow won't let me (yet).
Check that the app whose ID you're using isn't restricted demographically (e.g. by age or country) and that it isn't still in sandbox mode.
If it is restricted or in sandbox mode, users who aren't logged in and who meet the restrictions applied (or for sandbox mode, are admins of the app) can't see the existence of the app or its details until they log in.
Just to confirm; I never actually fixed this properly. Instead I made a work around and was able to do a javascript check via the facebook sdk to see if the user was logged in or not when they first hit the page that has the facebook registration form.
I do an http redirect if they aren't logged in (or aren't authorised) and if they are logged in later in the page I call to init the facebook form.
window.fbAsyncInit = function() {
FB.init({
appId : xxxx, // App ID
channelUrl : 'http:///xxxxx/fbchannel.php',
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
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// all ok!
//var uid = response.authResponse.userID;
//var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
window.location.href="create_account_with_facebook?authorizefirst";
} else {
window.location.href="create_account_with_facebook?loginfirst";
}
});
};
// 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'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>
We have a facebook website app for use as a public event kiosk. Many people will be logging into facebook through our site on the same device (set up at a booth, like a ipad or similar).
We need to log the person out of facebook itself after they are done; not simply destroy the graph api session for our site.
Here is the problem:
User walks up to our ipad, which has a browser loaded to our website. He or she clicks "facbook login", and is redirected to facebook to log in.
They log in, grant our app permission, and facebook redirects them back to our site.
After they use our site (post comment, etc...) they click log out on our site.
Next user sits down, clicks "facebook login", and is redirected to facebook. Upon reaching facebook.com, the browser is still logged in for the previous user, granting this user access to the first user's facebook (just a small problem =)
My hope is that I can send the user to facebook, to a page with nothing but a logout button, and have facebook redirect the browser back to my site, ready for the next user. This is how the login works, and I need a logout equivalent.
Edit:
Thank you very much for the answer. We spent like 3 days trying to figure this out; I hope you will forgive us if we post generic code that anyone can plug in. Placing this on an HTML page, then visiting that page, logs the user out of Facebook and your site.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your APP ID', // App ID
channelUrl : '//WWW.YOURSITE.COM/channel.php or channel.html or whatever yours is', // 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
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.logout();
alert('Thanks! You have been logged out of facebook.');
}
});
};
(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>
If you use the Facebook Javascript SDK, you can call FB.logout when they click your logout link as the documentation states:
FB.logout will log the user out of both your site and Facebook.
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...
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.