Facebook error when like button pressed - javascript

I get this, when clicking on the like button.
Unsafe JavaScript attempt to access frame with URL http://www.facebook.com/dialog/oauth?api_key=248753205242460&app_id=248753205242460&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Dfedecb848%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff2ad19772%26domain%3Dlocalhost%26relation%3Dparent.parent&client_id=248753205242460&display=none&domain=localhost&locale=en_US&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df99e53428%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff2ad19772%26domain%3Dlocalhost%26relation%3Dparent%26frame%3Df2c40b1914&response_type=token%2Csigned_request%2Ccode&sdk=joey from frame with URL http://www.facebook.com/plugins/like.php?action=like&api_key=248753205242460&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df458cef1c%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff2ad19772%26domain%3Dlocalhost%26relation%3Dparent.parent&colorscheme=light&extended_social_context=false&font=segoe%20ui&href=http%3A%2F%2Fecommercedeveloper.com&layout=standard&locale=en_US&node_type=link&sdk=joey&show_faces=true&width=400#. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=9#channel=f2ad19772&origin=http%3A%2F%2Flocalhost&channel_path=%2FDummy%2FFBplugin%2Ffb.php%3Ffb_xd_fragment%23xd_sig%3Dfe951f208%26 from frame with URL http://www.facebook.com/plugins/like.php?action=like&api_key=248753205242460&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df458cef1c%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff2ad19772%26domain%3Dlocalhost%26relation%3Dparent.parent&colorscheme=light&extended_social_context=false&font=segoe%20ui&href=http%3A%2F%2Fecommercedeveloper.com&layout=standard&locale=en_US&node_type=link&sdk=joey&show_faces=true&width=400#. Domains, protocols and ports must match.
I dont know why I get that error, it could be because the code that checks the login is triggered..
This my html:
<!DOCTYPE html>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function(){
FB.init({
appId : '248753205242460', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
window.fbAsyncInit = function() {
console.log('Sdk is loaded');
FB.getLoginStatus(function(response) {
console.log('GEtting logged in status');
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
console.log('User is connected');
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
console.log('User not authorized');
} else {
// the user isn't logged in to Facebook.
console.log('User inst logged in');
}
});
};
FB.Event.subscribe('edge.create',
function(response) {
console.log('You liked the URL: ' + response.status);
});
});
</script>
</body>
</html>

The error messages Unsafe JavaScript attempt to access frame with URL and Domains, protocols and ports must match usually imply that your http protocols are faulty.
Should you be using HTTPS for these calls instead of normal HTTP?
when i see these errors i usually test out if i'm missing an https somewhere...
Also see if your app has all it's secure URLs set up in the developer management panel on facebook!

The other event that I am using is "getLoginStatus", which will show me if the user is logged in to facebook or not..
That’s not an “event” in itself – it’s just an asynchronous method, and it gets you the login status.
console.log('FB.getLoginStatus: '+FB.getLoginStatus);
At this point you are not even calling the method – you are just stating it’s name. (I know, you’re calling it before – but this debug output does not make much sense.)
I want to trigger edge.create
How exactly did you implement your like button? This event is not fired if you’re using the iframe version of the button.
[from comments] I think I need to have my own app id... can it be the cause? it is my facebook name and not a number
Of course you do. Your user name is not an app id in any way.

Related

Is it possible to delete facebook permission, after login prompt?

I have continue with facebook button in the user's profile page.
that opens facebook's permission page and saves facebook user ID to our DB, that makes a pair with his account.
Now I want to makedisconnect button that sends permission delete requests to facebook and delete entry from our DB.
I used FB.Event.subscribe('auth.authResponseChange', event); listener but the authResponse doesn't change when the user logs off from FB, on the other web browser tab.
if(fb_status === "connected" && fb_userID.length > 0){
removeFbUser(fb_userID); // deletion in DB
}else if (fb_status === 'not_authorized'){
//error message
}else{
// user is logged out
FB.login(function(response) {
if(response.status === "connected"){
removeFbUser(response.authResponse.userID);
fb_userID = response.authResponse.userID;
}else{
// error
}
fb_status = response.status;
});
}
I'm also getting this error message from facebook sdk :
You are overriding current access token, that means some other app is expecting different access token and you will probably break things. Please consider passing access_token directly to API parameters instead of overriding the global settings.

FB Login, jquery not working on chrome

My code looks as below
$(document).ready(function () {
$.getScript('//connect.facebook.net/en_UK/all.js', function () {
FB.init({
appId: 'XXXXXXXXXXXX',
channelUrl: '//localhost/channel.html',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
Dosomethinguseful();
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
FB.login(function (response) {
if (response.session) {
dosomething();
}
});
}
});
});
});
Above code works great on safari and firefox. However, on chrome i dont see anything happening. Debugging shows no error.
Need help.
is there a working example of calling FB auth using jquery?
===========
tried the code from http://geekswithblogs.net/ptahiliani/archive/2013/08/23/facebook-login-authentication-example.aspx. It also doesnt work on chrome :(. I get following error
'Blocked a frame with origin "http://www.facebook.com" from accessing a frame with origin "https://s-static.ak.facebook.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.'
Maybe an old question but this happened to me recently.
We found when using a self signed certificate we would get a grey "broken" screen in facebook. However, when visiting the site directly (ie not via facebook) and we accept this illegit certificate THEN visited the facebook app it worked fine.
Seems Chrome won't ask you to continue if it detects an invalid cert when pulling in page resources via HTTPS. But it remembers if you accept one if requesting directly via HTTPS.
Good luck :)

How to detect user logging out of Facebook after logging into my app?

My application uses Facebook authentication:
FB.init({
appId: config.fbAppId,
status: true,
cookie: true,
// xfbml: true,
// channelURL : 'http://WWW.MYDOMAIN.COM/channel.html', // TODO
oauth : true
});
// later...
FB.login(function(response)
{
console.log(response);
console.log("authId: " + response.authResponse.userID);
gameSwf.setLoginFacebook(response.authResponse.accessToken);
}, {scope:'email,publish_actions,read_friendlists'});
And when using it, people can post to their wall:
var obj = {
method: 'feed',
link: linkUrl,
picture: pictureUrl,
name: title,
caption: "",
description: message
};
function callback(response) {
// console.log("Post on wall: " + response);
}
FB.ui(obj, callback);
This works fine, but there is one little hickup. If people:
Log in on the app.
Log out of Facebook.
Attempt to make a wall post from the app.
The opening of the wall post dialog fails. The console says "Refused to display document because display forbidden by X-Frame-Options.".
Can I instead get Facebook to show a login prompt to the user. Or can I detect the error and tell the user that he's no longer logged in on Facebook?
Just recall getLoginStatus BUT forcing a roundtrip to Facebook. Look following code:
FB.getLoginStatus(function(response) {
// some code
}, true);
Look the last parameter set to true to force the roundtrip.
From JS SDK documentation:
To improve the performance of your application, not every call to
check the status of the user will result in request to Facebook's
servers. Where possible, the response is cached. The first time in the
current browser session that FB.getLoginStatus is called, or the JS
SDK is init'd with status: true, the response object will be cached by
the SDK. Subsequent calls to FB.getLoginStatus will return data from
this cached response.
This can cause problems where the user has logged into (or out of)
Facebook since the last full session lookup, or if the user has
removed your application in their account settings.
To get around this, you call FB.getLoginStatus with the second
parameter set to true to force a roundtrip to Facebook - effectively
refreshing the cache of the response object.
(http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/)
What you could try and use is the FB.getLoginStatus where if the user is connected this would allow them to complete the wall post.
If they aren't connected then call the FB.login method before they can post on the wall.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
There are also the events for login and logout that you can watch for and do something with those responses.
FB.Event.subscribe('auth.login', function(response) {
// do something with response
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
});
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

FB.INIT not forcing login even with status:true js sdk

My app allows users to send requests using Facebook Requests Dialogue.
I run the init as follow:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '193078857407882',
status: true,
cookie: true,
xfbml: false,
});
</script>
From what I understand in the documentation the 'status: true' is supposed to check if the user is logged in to facebook.
However in my app when the user is not logged in it just shows the following error message:
An error occurred with hbg. Please try again later.
How can I force the application to check if the user is logged in and if not to log in?
Rails 3.0.7, Ruby 1.9.2, Js SDK
According to the Facebook docs for FB.getLoginStatus, if you want to receive the response from passing status: true to FB.init, then you need to subscribe to the auth.statusChange event:
While you can call FB.getLoginStatus any time (for example, when the
user tries to take a social action), most social apps need to know the
user's status as soon as possible after the page loads. In this case,
rather than calling FB.getLoginStatus explicitly, its possible to
check the user's status by setting the status: true parameter with you
call FB.init.
To receive the response of this call, you must subscribe to the
auth.statusChange event. The response object passed by this event is
identical to that which would be returned by calling FB.getLoginStatus
explicitly.
So in your code you would do something like
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);
});
Except you would subscribe to auth.statusChange instead. Note, however, that according to the FB.Event.subscribe docs:
auth.statusChange() does not have a 'status' field.
You can check login status by calling FB.getLoginStatus
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user
} else {
FB.login(function(res) {
if (res.authResponse) {
// user logged in
} else {
// user cancelled login
}
});
}
});

Confused by nature of JS SDK Facebook Events

I'm having a bit of trouble designing the user login/logout mechanism of my website that works with facebook.
The behavior of certain facebook events seems counter-intuitive:
'auth.login' fires on every page load when the user is logged in.
FB.getLoginStatus() fires on every page load, as I would expect
'auth.logout' fires only when the user actually logs out, and unlike 'auth.login,' auth.logout does not fire on every page load when the user is not logged in.
I want to build a system that detects whether or not the users session thinks that user is logged into facebook. If the user's session is set to believe they're logged into facebook, but they're actually not then perform an ajax call to the server and update the session. If the session and the facebook js sdk are in agreement over whether the user is logged in or not, do nothing. And if the user's session is unaware that user is logged into facebook but the js sdk says they are, update the server with an ajax call.
I want to create an application that syncs with the users current facebook login status. And I would like that application to login/logout (by executing an ajax call to my server to update their session) whenever they're facebook status changes. This is difficult since I can't seemto reliably detect when a user logs in or out of facebook.
One particular problem I have is when the user loads the page and they're logged into facebook, BOTH the auth.login event and the FB.getLoginStatus() events fire.
My ultimate question is, what combination of facebook-events or general strategy do i have to use to create such an application. A good example of what I'm going for is hulu.com's implementation of facebook login into their website. Thanks for reading this!
<script>
window.fbAsyncInit = function() {
FB.init({appId: '<?=$facebook_app_id?>',
status: true,
cookie: false,
xfbml: true});
FB.getLoginStatus(function(response) {
console.log('getLoginStatus');
console.log(response);
if(response.session){
if(window.module.Globals.prototype.oauth_uid != response.session.uid){
//authenticated user unknown to server, update server and set session
window.module.VCAuth.prototype.session_login();
}
}else{
if(window.module.Globals.prototype.oauth_uid){
//unauthenticated user with authenticated session, update server and unset session
window.module.VCAuth.prototype.session_logout();
}
}
});
FB.Event.subscribe('auth.login', function(response){
console.log('auth.login');
console.log(response);
});
FB.Event.subscribe('auth.logout', function(response){
console.log('auth.logout');
console.log('response');
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
I would recommend using the same callback for all methods. This way you get one authentication code path to worry about. Like this: (which is not that far off from the code you provided)
function authCallback(response) {
if(response && response.session){
if(window.module.Globals.prototype.oauth_uid != response.session.uid){
//authenticated user with invalid session
window.module.VCAuth.prototype.session_login();
}
}else{
if(window.module.Globals.prototype.oauth_uid){
//unauthenticated user with authenticated session
window.module.VCAuth.prototype.session_logout();
}
}
}
FB.getLoginStatus( authCallback );
FB.Event.subscribe('auth.login', authCallback);
FB.Event.subscribe('auth.logout', authCallback);
You said one main problem was:
BOTH the auth.login event and the FB.getLoginStatus() events fire.
Just make sure that session_logout() and session_login() set/unset the oauth_uid before making the async call to the server so that the next time the callback is called the correct state of the VCAuth is set.
Note: auth.logout is not fired every page load because auth.logout implies the user was logged in. It doesn't make sense to fire auth.logout if the user was never logged in right?
Hope this helps.

Categories