I'm using Facebook's open graph api along with the JavaScript SDK on my site. My goal is for a user to connect to my site and then after performing certain actions on my site publish a message to the users facebook stream. I have the facebook connect function working just fine. During the connect I request email, publish_stream, offline_access permissions. I think those are all I need for what I'm trying to do. Now when the user connects via facebook connect I do get and capture the facebook access token and secret though I don't know what to do with them.
According to Facebook's shoddy documentation for the JavaScript SDK... to do what I'm trying to do it says to use the following code:
var body = 'Reading Connect JS documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
I'm doing just that as a test and instead of alerting the response I'm stringifying the JSON response and writing to the console. Suffice it to say the stream publish fails and the response is this:
{"error":{"type":"OAuthException","message":"An active access token must be used to query information about the current user."}}
If the user is 'connected' to my site via facebook connect and accepted all the permissions I specified, don't I have a valid access token? Is the access token another parameter I have to pass to the api call?
Make sure you have all this in the page:
<BODY>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : APP_ID, // the app ID you get when you register your app in http://www.facebook.com/developers/
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
if (FB.getSession() != null) {
var body = 'Reading Connect JS documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}
</script>
The above code worked for me with the publish_stream permission. Make sure that the code is not running before the javascript api has received the access token. Run:
console.log(FB.getSession())
directly above the FB.api call to make sure you have an access_token.
Related
I have developed an application where users login via facebook (PHP SDK); now I would like to add JS SDK too, because I want to implement a generic friend selector (http://facebook-friend-selector.codersgrave.com/) that works with JS SDK. I have two questions about:
1) Can mixing the two SDK lead to problems?
2) I added the JS SDK code as explained in the documentation and tried a simple request
FB.api('/me/friends', function(response) {
alert(JSON.stringify(response));
});
but I get an error (unknown error); I also tried a dialog box
FB.ui({
method: 'feed',
link: 'https://developers.facebook.com/docs/dialogs/',
caption: 'An example caption',
}, function(response){});
but the box appears and suddenly disappears. I think the issue is related to the authentication...I guess, since my users are authenticated via PHP, that I need to pass the access token to JS, but how? This question Passing the Facebook Authorization Token from PHP to Javascript seems to be exactly what I need but I don't understand the answer: it says to store the token in a cookie, but how can JS know about it, which name the cookie should have?
Finally, if I do something like
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert('connected');
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
}
});
I actually get a "connected" alert, that means that JS knows that the user is logged in, even if the login was via PHP, so where is the problem?
Solved. My code contained two stupid mistakes, this is the correct code:
function test(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.api('/me/friends', function(response) {
alert(JSON.stringify(response));
});
}
});
}
Test
In the first version the call to the friends method was outside the getLoginStatus method, so it was called before setting the variable accesToken, furthermore, I haven't the "return false" statement after the test() call.
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.
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/
In the authentication flow documentation here it mentions the CODE which is returned upon oAuth authentication.
Is this required for the Javascript SDK or is this handled automatically in the background in this code?
By "is this required?" I mean, do I have to handle this code to verify the authenticity of the request, or does the JavaScript SDK use the code automatically to gain the access_token.
The documentation explains the client side flow, and how to get the access token using the 'code' so until now. I've been assuming that the SDK manages this automatically in the background, because it produces an access code as response.authResponse.accessToken.
FB.login(function(response) {
if (response.authResponse) {
// User is logged in to Facebook and accepted permissions
// Assign the variables required
var access_token = response.authResponse.accessToken;
var fb_uid = response.authResponse.userID;
alert(dump(response.authResponse));
// Construct data string to pass to create temporary session using PHP
var fbDataString = "uid=" + fb_uid + "&access_token=" + access_token;
// Call doLogin.php to log the user in
$.ajax({
type: "POST",
url: "ajax/doLogin.php",
data: fbDataString,
dataType: "json",
success: function(data) {
// Get JSON response
if (data.result == "failure")
{
alert(data.error_message);
window.location.reload();
return false;
}
else if (data.result == "success")
{
window.location.reload();
return true;
}
},
error: function() {
return false;
}
});
} else {
// user is not logged in and did not accept any permissions
return false;
}
}, {scope:'publish_stream,email'});
I would like to know, because I want to ensure that my code is secure.
From the documentation
With this code in hand, you can proceed to the next step, app authentication, to gain the access token you need to make API calls.
In order to authenticate your app, you must pass the authorization code and your app secret to the Graph API token endpoint at https://graph.facebook.com/oauth/access_token. The app secret is available from the Developer App and should not be shared with anyone or embedded in any code that you will distribute (you should use the client-side flow for these scenarios).
If you plan on using the FB.api function to make calls to their Graph API, then you need the code to get the access token. But if you only need to authenticate the user, then what you have will do that just fine.
I am currently developing a Facebook application on a website that would need to send a notification to the app's users without using a user interface dialog. After reading some blogs I concluded that the option is available in example in PHP API only. I could only find this example:
http://developers.facebook.com/docs/channels/
Is there a JavaScript API to do this?
After some sort of more reading, I found out that FB.api could handle graph object apis and also the rest apis which are to be deprecated, and I got the following working:
FB.api('/1175241653/apprequests', 'post',
{ message: "This is a Good Request!!" },
function (response) {
if (!response || response.error) {
alert('Error occured , Request Failed :(( ');
} else {
alert('Request is sent successfully');
}
});
However, that id number 1175241653 does not work if the logged in user's id is not that id.
Therefore this would required the same functionaliy that Facebook uses to retrieve the ID of whomever signed into the application. Is there any way to do this?
Now , I got this working in all means and I'd like to share it with those who may deal with :))
lets say 1st as to do a single app request from ur application to any of facebook registered users in your application would be like this:
var data =
{
message: "Hey there, something good happened over here !",
access_token: "AAADdf39DLxgBANEwZA9ZCfZCSbtdfcZBtstWMMsW5JiZBjVW2Ucx234sedhHSZCm8aEABzvhWPBNWi1bTKwZBq0EcgZD"
}
FB.api('/68751034/apprequests',
'post',
data,
function (response) {
console.log(response);
if (!response || response.error) {
} else {
}
});
access_token should be provided as to authenticate the request from the application to the registered user.
If you do not know about access tokens, you can read about it over at the facebook site:
http://developers.facebook.com/docs/authentication/
Also, if you want to send batch requests to a set of users in one request call, there's a support page from the facebook site about that too:
http://developers.facebook.com/docs/reference/api/batch/
and here's a sample of what I mean :
var _batch = [];
for (var i = 0; i < _socialids.length; i++) {
_batch.push({
method: 'post',
relative_url: _socialids[i] + '/apprequests/?access_token=' + _accessTokens[i],
body: "message= This is a request sent to many users" });
}
if (_batch.length > 0) {
FB.api('/', 'POST', { batch: _batch }, function (res) {
// Do whatever when the batch request is sent
});
}