Facebook javascript-sdk Permission Dialog Error - facebook

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.

Related

I have followed the steps in 'Getting Started with Facebook Login for Web' but adding the Facebook SDK for Javascript does not seem to work

I tried following the steps outlined in 'Getting Started with Facebook Login for Web' however they do not seem to be working.
I have followed the steps on this page; I retrieved my App ID (Step 1), I added the Facebook SDK for Javascript (Step 2) (Minus the channel URL, which I read elsewhere in the documentation is optional, as I am working on this page offline rather than hosted on a server), I then added the login code (Step 3).
I'm not sure why it isn't working. I am getting the error 'Failed to load resource' in the console log.
Full Code:
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1233456789', // 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
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any auth related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct user interaction (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}
});
};
// 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));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<!--Below we include the Login Button social plugin. This button uses the JavaScript SDK to-->
<!--present a graphical Login button that triggers the FB.login() function when clicked.-->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
If you look closely, the Facebook SDK download line starts with //, not http:// or https://. That means that the script will be downloaded with using the same protocol of the embedding page. You are opening a local file, which shows up as file:// in the navigation bar, so the browser tries to download the SDK via file:// and fails.
Long story made short: add a https: before the two //, like this:
js.src = "https://connect.facebook.net/en_US/all.js"
Longer solution (but cleaner): use a local development server. If you have PHP 5.4 installed on your PC, open a command line, navigate to the project folder and then launch:
php -S localhost:8080
The open your browser and enter localhost:8080 in the address bar.

Facebook registration page - Invalid 'client_id' when not logged into Facebook

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));

Facebook login connect

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...

Facebook PHP-SDK doesn't unset SESSION if user revokes application permissions

EDIT***
I think I didn't explain enough/correctly, here are the steps when I have the problem with the session:
1.- User logins with jssdk and accepts my app.
2.- Now I use the PHP-SDK to getUser(); and restrict or show some pages.
3.- User DOES NOT log out, but revokes the permissions directly from the profile settings.
4.- User returns to my application (without closing the page/browser of course) and the PHP-SDK still returns getUser() as a valid
connected user!
5.- How my application is supposed to know that the user revoked the permissions if the PHP-SDK says the getUser() is a valid ID?
My users login to my application with the JS-SDK and the following code:
FB.login(function(response) {
// handle the response
}, {scope: 'email,user_likes'});
-- and this is the asynchronous script
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '****************', // App ID
channelUrl : 'localhost', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth:true
});
// 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));
</script>`
However, when the users remove the application from their privacy settings and try to access my application again, this code still outputs the user ID $user = $facebook->getUser();
I checked the facebook.php from the PHP-SDK and there's a method that is supposed to unset the SESSION but doesn't unset anything.
protected function clearPersistentData($key) {
if (!in_array($key, self::$kSupportedKeys)) {
self::errorLog('Unsupported key passed to clearPersistentData.');
return;
}
$session_var_name = $this->constructSessionVariableName($key);
unset($_SESSION[$session_var_name]);
}
Is this a bug? or Facebook always reads the session even if the user revoked the permissions of the application?
I think the behavior of $facebook->getUser(); should output 0 when the user is not connected to the application, but of course this is not what happens.
Session and permission via Facebook are 2 different things.
A session is application and user specific to your code. You need to control this session.
If someone revokes permissions for your app, then all it does it remove permission in Facebook. Your app isn't notified unless you have setup the correct settings in your Facebook app. And even still you need to clear the session.
So while the session will hold the information it previously obtained, if you try to connect to perform something on Facebook with the permissions you previously had you will get an error.

Facebook auto login - notify user

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.