Facebook JS SDK does not set cookie - facebook

I'm trying to implement Facebook authentication in our web app, with server side processing of the Facebook cookie. We use the JavaScript SDK to perform our login and set the cookie.
Somehow, however, the Facebook SDK does not appear to set our fbsr_APPID cookie (or any cookie whatsoever). This is the CoffeeScript code:
window.fbCallbacks = []
# Create initialization function
window.fbAsyncInit = ->
fbConfig =
appId: '<APPID here>'
channelUrl: '/assets/channel.html'
status: true
cookie: true
xfbml: true
FB.init fbConfig
cb() for cb in window.fbCallbacks
# Set it up
((d)->
id = 'facebook-jssdk'
ref = d.getElementsByTagName('script')[0]
return if d.getElementById id
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)
We let Facebook perform the login via the provided login widget:
<div class="fb-login-button" data-show-faces="true" data-scope="publish_stream"/>
Some extra information:
This was tested in Chrome stable and canary as well as IE9, both on localhost and 127.0.0.1, with and without the --enable-file-cookies set (for what it's worth). I'd say that means it's not a browser issue.
I've tried fiddling with the channel file, but it seems perfectly accessible where it is now.
Setting a cookie in my own code from JS works like it should.
The JS SDK loads fine, because my login widget is properly decorated, and even shows that I've logged in already after I did.
No errors are reported in the console. It's completely blank.
Replacing the CoffeeScript with a copy from the initialization code JavaScript example on the Facebook Developers does not make it work either.
So what's happening? Why isn't Facebook setting my app cookie?
For reference, here is the JavaScript generated by the CoffeeScript above:
(function() {
window.fbCallbacks = [];
window.fbAsyncInit = function() {
var cb, fbConfig, _i, _len, _ref, _results;
fbConfig = {
appId: '<appid>',
channelUrl: '/assets/channel.html',
status: true,
cookie: true,
xfbml: true
};
FB.init(fbConfig);
_ref = window.fbCallbacks;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
cb = _ref[_i];
_results.push(cb());
}
return _results;
};
(function(d) {
var id, js, ref;
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";
return ref.parentNode.insertBefore(js, ref);
})(document);
}).call(this);

It appears I misunderstood the SDK. The login button widget does not actually set a cookie locally; it manages authentication and access through Facebook and JavaScript entirely and therefore does not allow you access to an authentication token on the server.
Using the JS SDK's FB.login() function did set the cookie.

Related

facebook send button blank when site url does not contain filename (index.html)

My widget works fine on condition that url of the site contains file name. f.e. It is working with
www.domain.com/subdomain/path/index.html and keeps showing blank when address of site is www.domain.com/subdomain/path/.
That's kinda weird behavior, i know that there were some issues with facebook's send-box, but i couldn't find one fitting into my bug.
I dynamically change url and make a call to FB.XFBML.parse();
Using such a code for facebook widget then
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'appID',
status : true,
cookie : false,
xfbml : true
});
fbApiInit = true; //init flag
};
(function(d, debug){
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 = "http://connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /debug/ false));
Please tell me what to do.
The important thing is that i'd rather prefer both of addresses to work, if it's not possible, it would be great to have opportunity to use addres with no filename.ext
Everything is working fine now.
I just realized facebook does not allow to use sending no-extension addresses.
I was using
$('.fbMenu :first-child').attr('href',document.location.toString()).attr('ref','text');where document location was just a path.
Such a simple code fixed the issue:
$('.fbMenu :first-child').attr('href',document.location.toString().indexOf('html')==-1?document.location.toString().replace('#','index.html#'):document.location.toString()).attr('ref','text');

Mobile Safari Facebook Login Redirect Issue - Javascript SDK

The Javascript SDK is working for every browser on my desktop, but I'm having issues with Safari on an iPhone.
Here's what happens:
- I click Login
- Facebook Oauth opens in a new window, and I successfully login
- The Facebook Oauth Window closes, and the old window shows up
- Rather than refresh the login page (as desktop browsers do), nothing happens...
So I'm successfully logged in, but the old page shows up. The user thinks that they're not logged in. I've seen similar issue son stack overflow but no answers.
Has anyone seen this or know of a solution?
<html xmlns:fb="http://ogp.me/ns/fb#">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : <%= FACEBOOK_CONFIG['app_id'] %>, // App ID
channelUrl : '//'+window.location.hostname+'/channel', // 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
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
setTimeout('document.location.reload()', 10);
});
};
// 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>

Can't load facebook js sdk from Chrome extension

I'm trying to use facebook sj sdk in a Chrome extension.
Im doing this on my extension init:
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId: 'APP_ID', // App ID from the App Dashboard
//channelUrl : '//www.example.com/', // Channel File for x-domain communication
status: true, // check the login status upon init?
cookie: true, // set sessions cookies to allow your server to access the session?
xfbml: true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
console.log(FB);
};
// Load the SDK's source Asynchronously
(function(d, debug) {
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 = "http://connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/false));
I'm getting this error:
Refused to load the script 'http://connect.facebook.net/en_US/all.js' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
I have the permissiosn in manifest set to http://*/. How can I load the sdk from an extension?
This is because you are trying to load an external script from your Chrome extension. For security reasons to prevent cross-site-scripting you need a special permission in your manifest.json file.
"content_security_policy": "script-src 'self' https://connect.facebook.net; object-src 'self'"
Make sure you use https:// instead of http://.

How do I perform a Facebook logout when third party cookies are disabled?

I have a logout page on my site, which looks something like this:
<div id="fb-root"></div>
<script>
// Load the Facebook 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 : '[valid_app_id]' // App ID
});
FB.getLoginStatus(function(loginResponse){
// As soon as we get the login status... log out!
FB.logout(function(logoutResponse) {
// logged out!
});
});
}
</script>
The page functions perfectly well when accessed from a vanilla Chrome browser. However, if the
[x]Block third-party cookies and site data
option is checked under "Content settings..." for chrome, the page fails to logout users, and reports
FB.logout() called without an access token.
Is there a workaround to this problem? I'd like to be able to log users out, even when they have stricter-than-usual security settings.
I founded a solution that solved this problem, just define a empty value to your access token, and finaly redirect him to logout page using getLogoutUrl() mrthod:
$_SESSION['fb_YOUR_APP_ID_access_token'] = '';
$logout = $facebook->getLogoutUrl(array( 'next' => 'YOUR_LOGOUT_MESSAGE_PAGE'));
header("Location: $logout " );
Sorry for my bad english!

How to get page events from Facebook?

I'm using this code, but it returns empty data array. My access_token has all permissions. I know PAGE_ID, now i need to get events from this page.Thanks
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : APP_ID, // App ID
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));
var interval = setInterval(function() {
if (typeof FB != 'undefined') {
clearInterval(interval);
FB.api('/' + PAGE_ID +'/events?access_token=' + ACCESS_TOKEN, function(response) {
//do something with response
});
}
}, 20);
</script>
It's not clear from your code how you are obtaining the access_token - are you using the access token for the page\account for which you need to retrieve the events? The way I have been doing it (not sure where I picked up this technique) for page events is to loop through the user accounts to get the access token for the page in question. Something like this (php)
$accounts = $facebook->api('/me/accounts');
foreach($accounts['data'] as $account){
if($account['id'] == $page_id){
$page_access_token = $account['access_token'];
}
}
My first access_token for my APP which i get from http://developers.facebook.com/tools/explorer/ was wrong. (Maybe it's only for test mode) Because i couldn't get events by this access_token.
On http://developers.facebook.com/docs/authentication/applications/ was written:
App Access Tokens generally do not expire. Once generated, they are valid indefinitely.
To obtain an App Access Token, perform an HTTP GET on:
https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials
I got access_token using HTTP GET, by this access_token i get events from facebook page: https://graph.facebook.com/PAGE_ID/events