I have a localhost website and script with FB.logout(). After some actions, it fails to log me out and I see next error message in console:
Refused to display 'https://www.facebook.com/home.php' in a frame because it set 'X-Frame- Options' to 'DENY'.
I searched all StackOverflow and didn't find any working solution. Network inspector shows cancelled near home.php query.
So I understand that the script tries to load the Facebook homepage in a frame, but it can't because it is prohibited. So how can I fix it? Why doesn't logout() work for me?
My code
// Facebook Basic Example
window.fbAsyncInit = function() {
FB.init({
appId : '579651098766258',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
(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));
function testAPI() {
FB.api('/me', function(res) {
console.log(res);
setTimeout(function(){
FB.logout(); // <-- ERROR
}, 2000);
});
}
This solution worked for me:
Go to Settings tab in your facebook application and in Basic tab scrolldown to +Add Platform
Click on +Add Platform and choose Website
Add your url of your website (for me, was the same url added on Advanced tab on Redirect URIs)
Save changes and test again.
Also I made a youtube video to solve this problem: https://www.youtube.com/watch?v=7CNpLgwa0-c
I had to set the "App Domains" field in the Settings tab within the Facebook's App control panel in order for it to work:
Update by 2019 May 2nd:
1) The https now is enforced, so you must use https://localhost. http will no longer be available.
2) You need to whitelist your localhost by going to Settings > Basic > Add Plat form and choose "Website"
I'm not sure how your HTML looks like, but for me this worked on my logout button:
onclick="javascript:FB.logout(function() { window.location.reload() }); return false;"
I hope this will help someone out, at least this fixed my problem.
Update for 2018
From the App Dashboard, under the Facebook Login product, click on Quickstart and follow the instructions. The Logout API call should start working!
Note: I selected WWW and entered http://localhost:5757/ in the Site URL.
I have found that with www.example.com I get this error and without the www (example.com) there is no error...
This solution worked for me -
Go to facebook Login -> quickstart -> www -> set app origin url "https://localhost:4200".
Related
I want to create a Facebook login page for my web application developed on Netbeans. I followed the tutorial given on Facebook website (Facebook) I copied the HTML code provided there. My site URL of the App is set to http://localhost.com/ . I have also configured the hosts file of my windows system( Added an entry "127.0.0.1 localhost.com").
Now, upon running this code either through Netbeans or by simply running the code in the browser through a html file, I'm not getting any response from Facebook. The webpage remains blank. Please tell if there is anything that I'm missing. Any help will be greatly appreciated.
Here's the Facebook login code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{My App ID}', // I have entered my APP-ID here
status : true,
cookie : true,
xfbml : true,
oauth : true
});
FB.login(function(){}, {scope: 'publish_actions'});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
(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));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
Edit: It seems Facebook no longer supports JS SDK calls made from a local file, the script has to be run on a file with an http:// or https:// URI. So, I changed the js.src assignment to "js.src="https://connect.facebook.net/en_US/all.js";".
But now I'm getting an error as "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."
I'm trying to redirect a facebook user after he has logged in. For loging I used the sample code for jssdk from developers.facebook.com and then I added this to redirect a certain user.
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
if(uid == '**********'){
window.location.replace('http://stackoverflow.com/');
}
but it does not work.
here's the complete code:
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '************',
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 authentication 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.
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
if(uid == '**********'){
window.location.replace('http://stackoverflow.com/');
}
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 interaction from people using the app (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>
You may have more luck if you try the more conventional
window.location = 'stackoverflow.com/';
on your successful uid comparison, rather than the replace() method.
After about 2 days of trying to implement every version of the phonegap facebook plugin i decided to give up on it and to implement plain JS login system in my app. To be honest, native login system is just not worth handling this plugin...
I followed the instructions on the facebook developer site and my login works perfectly on desktop browsers. The problem begins after i compile it with phonegap and try to run it on an android device.
When i Press the login button I'm getting a
"FB is not defined at..."
this results from the attempt to access the FB.login() method.
Relevant code is :
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX', // contains my App ID
channelUrl : 'YYYYYYYYYYYY', // contains my Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
testAPI();
active_access_token = response.authResponse.accessToken;
$.mobile.changePage("#main_page");
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
// Load the SDK asynchronously
(function(d){
console.log ("async load started!");
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));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
Button wiring:
function set_buttons() {
$("#facebook_login_button").click(function(){
console.log("login attempt");
FB.login();
});
Again, This works perfectly in browser. I just cant make it work on android after phonegap compile.
Ideas?
Well , i figured it out...
since I'm running it from a locahost I added "http:" to
js.src = "//connect.facebook.net/en_US/all.js";
So now it's:
js.src = "http://connect.facebook.net/en_US/all.js";
Try to go to your Facebook´s app > Setting > Advanced and add the correct urls on 'Valid OAuth redirect URIs'
For me it had to do with adding BundleID on developers facebook app settings under iOS section.
This may help some other person in my boat.
I think this is a very obvious question, but I am completely stumped. I think I have setup my app settings correctly, but when I try to authenticate (with Javascript SDK) my account on my website and then console.log(me), I still only get public information.
EDIT: I think that my problem is that my website is using the "Current Dialog" and not the "Referral Dialog." I understand that the referral dialog is only used when someone is directed to my website through Facebook, but I know there must be a way to use the Referral Dialog from my website as well. Why would anyone even use the Current Dialog if it can only authenticate the server with a user's public information? I read another post that said I should look at the authentication doc (https://developers.facebook.com/docs/authentication/), but as far as I can see there is nothing there on authorizing with the Referral Dialog.
I want to use Javascript SDK. Is this possible or will I have to just do it without Javascript SDK?
In Auth Dialog, I have this: email, user_about_me, user_likes, user_location, user_website, user_checkins
Here is my code:
// 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 : '464723870207650', // App ID
channelUrl : '//'+window.location.hostname+'/scripts/channel.php', // 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
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
FB.api('/me', function(me){
console.log(me);
})
} else {
// user has not auth'd your app, or is not logged into Facebook
}
});
}
When I run it through the debugger, I don't get any errors.
Just call the FB.login method along with the wanted permissions:
function login() {
FB.login(function(response) {
console.log("FB.login callback, response: ", response);
}, { scope: "email,publish_stream,etc" });
}
Just keep in mind that:
Calling FB.login results in the JS SDK attempting to open a popup
window. As such, this method should only be called after a user click
event, otherwise the popup window will be blocked by most browsers.
Facebook authentication is working great. I can pull the profile pic and name of the user. However, when you click login and the facebook prompt comes up I have two problems (in both IE and Chrome).
First off, the window never closes. It just goes to a blank white page. This is actually happening to me across the web. turntable.fm logins do this as well as any fb connected sites I can think of. it happens to me at work, at home on multiple different PCs. Is fb broken? I can't help but think this is related to the other issue...
My page doesn't refresh after I close the (blank) login popup.
So those are the issues. I tried subscribing to the auth.login event and calling a reload() there, which is what the documentation recommends, but this didn't refresh when you logged in. It also caused a problem where if you logged out it would just automatically log you back in. That's why I added the code below to detect a logout and reload. That actually works. So how can I make it reload when the popup window is closed, or even better, make the popup window close itself and reload my page?!
all relevant fb code below (I think):
window.fbAsyncInit = function () {
FB.init({
appId: '123456', // App ID
channelURL: 'http://www.mydomain.net/channel.html', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
oauth: true, // enable OAuth 2.0
xfbml: true // parse XFBML
});
//update guest/username if logged in or not
FB.getLoginStatus(function (response) {
if (response.authResponse) {
FB.api('/me', function (response) {
$('#UserMenu').show();
$('#Login').hide();
$('#fbpic').html('<img alt="Account Picture" src="https://graph.facebook.com/' + response.username + '/picture" />');
$('#AccountName').html(response.name);
getVentID(response.id, response.name);
$('#Logout').show();
});
} else {
//not logged in to facebook
}
});
$('#Logout').live('click', function () {
FB.logout(function (response) {
// user is now logged out
window.location.reload();
});
});
//subscribe to login changes
FB.Event.subscribe('auth.login', function (response) {
});
};
// 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));
This was because I had Facebook "installed" in Chrome! Uninstall and now it works everywhere. SOOO happy!