it is incredibly easy to hide content from someone who does not like your application...if you're using FBML. I'm using an iFrame and the JavaScript SDK, and am having terrible difficulty figuring this out.
The behavior I'm seeing (both logged in and out) is that does not seem to be supported by FB.XFBML.parse(). Am I mistaken or is there an alternative method I can use that does not require the user to give explicit permission?
Finally figured it out!
After you have initialized the api (using FB.init()) simply do the following:
FB.api('/mypage', function (response) {
FB.api({ method: 'pages.isFan', page_id: response.id },
function (response) {
alert(response);
});
});
When the '/mypage' response comes back, it has the page id of the profile. Use that in the pages.isFan call and it will return a boolean object telling you if the current user has Liked that page or not.
No need to deal with authentication, extended permissions, or any FQL.
Related
This is our link for the fb or old way sign-in: http://www.greeceinsiders.com/login
Does the fb-login work to you? When I click it it redirects me to the same page.
Sometimes it works sometimes not. When a user logs in with fb we collect his vredentials sucha as email,city, name in our mysql database. Does anybody had the same problem? Is there any good tutorial out there, that explains it step by step and is for the current fb api?
Any suggestions or feedback is welcome, thank you! Some code
FOUND IT!
I like to use the FB.login method. This allows me to set the permissions that I want (such as email) and access the info on my server through a Facebook library like https://github.com/facebook/php-sdk. There are also good tutorials on https://developers.facebook.com/docs/authentication/:
FB.login(
function(response) {
if (response.authResponse) {
$.ajax({
url: Global.base_url + 'user/facebook_log_in/',
dataType: 'json',
success: function(data) {}
});
}
else {
// Display facebook error
}
},
{
scope: 'email'
});
I've been battling with this all morning.
I'm actually trying to get custom Open Graph Actions to work. I've succeeded in this, piecing together bits of information from here and there and everywhere, and now I have a button which posts a "Want" action with the following flow:
> User Clicks Button
> FB.api checks response.
> if response code is 200 the user has not granted publish_stream permission
> call FB.ui({ method:
"permissions.request",
"perms": 'email,publish_stream'
}
> call back to original function and post to stream
> if user has already granted permission, then just publish
That all works lovely.
What I need though, is to catch a case where the user is not logged in to Facebook at all.
This appears to be response code 2500 where no access token is present
SO I have this code snippe, which catches that case
.....
} else if (((response.error.code) * 1) == 2500) {
doLogin('publish_stream', postWant, itemId);
// post want being the original function and itemId being the item we are "wanting"
}
my doLogin function looks like this:
function doLogin(permRequired, callingFunction, urlAppend) {
FB.ui({
method: 'oauth',
scope: 'email,' + permRequired
},
function (response) {
// DO THINGS NOW WE'RE LOGGED IN
});
};
This is basically exactly the same as my function to get the extended permission, which looks like this:
function getPermission(permRequired, callingFunction, urlAppend) {
FB.ui({ method:
"permissions.request",
"perms": 'email,' + permRequired
},
function (response) {
// DO THINGS NOW WE HAVE PERMISSION
});
};
This latter example WORKS, but the Login example just loads a popup saying "Sorry, something went wrong, please try again later"
Obviously FB.init is already called, the APP is set up correctly, APP_ID declared in FB.init and so on, clearly, as the other stuff works.
FB Login froma FB Login button works, but I need this to work through this flow in order for the "frictionless" behaviour to operate (ie, I can't have another button to click)
Don’t use FB.ui with method:"permissions.request" – just use FB.login, and set the options parameter with the scope of (additional) permissions you require.
https://developers.facebook.com/docs/reference/javascript/FB.login/
I've already registered my app on Facebook developer and got an ID, but had hard time to characterize the my app(chrome extension), it's website app, mobile app, facebook app? What I wanna do is a simple extension that allows users simply to click on it, and the background JavaScript calls the Facebook API to ask the users to log in like this.
window.fbAsyncInit = function() {
FB.init({
appId : '123456789',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
chrome.browserAction.onClicked.addListener(function(tab) {
FB.login(function(response) {
if(response.authResponse) {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
alert('User cancelled login or did not fully authorize.');
}
});
});
However, it pops up a window that says an error occurred, it is another way of saying "I am not authorized", how do I specify my app's URL on the Facebook developer page, because the extension's URL is a garbage like this chrome extension://asdjlajsldj/ or anyone knows any workaround? Thank you
I would assume that Facebook's API uses OAuth 2 to let applications access users data. Google provides a way of doing this with an example in their API section. I have also have posted an alternative method on GitHub. Note that my method will require some alternations to fit Facebook's interface but the idea is the same (I have a GitHub branch to do this with GitHub).
Essentially your extension must get an access token for the user from Facebook, then using this token as a parameter you can query private data from the API. What makes it seem difficult is the fact the the chrome extensions are sandboxed and have no return URL, but using one of the two methods above should do you just fine.
Good Luck!
I used the old rest api for showing the Permission Dialog in Facebook before.
Now, with the new graph API, what can I do? (I'm in IFrame Apps).
I know that I can cheat and popup the permission in a seperate window:
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'offline_access'});
like that.. call the FB.login again (let say I want people to click on a different button and trigger the extended permisison dialog)
However,it looks ugly,and it doesn't look like a dialog.
Is there a way to generate the dialog? I try to figure out whether FB.ui can help but there is only little information about that.
In addition, I don't think the 'response' callback ever execute. Neither I click "Don't allow" or "allow", won't trigger any call back. any idea?
hihih..anyone can help me?
Finally. find out the solution from another website.
first. after FB.init( ... ); do that:
FB.provide("UIServer.Methods",
{ 'permissions.request' : { size : {width: 575, height: 300},
url: 'connect/uiserver.php',
transform : FB.UIServer.genericTransform }
} );
Then, whenever you need to call the permssion dialog, do that:
FB.ui({method: "permissions.request", "perms": 'email,offline_access'},
callBack);
It took me so long to figure out by looking at the FB object and find out there is UIServer with permissions.request then from that, I keep searching and find this solution. and FB.ui talks nothing about it.. and FB.provide is not documented. THANKS facebook.
You don't need to use javascript or any SDK for this although it would make it easier. You need only to redirect the user to a url like this:
https://graph.facebook.com/oauth/authorize?
client_id=...&
redirect_uri=http://www.example.com/callback&
scope=user_photos,user_videos,publish_stream
You should always redirect the user to the top window either with javascript or the link.
window.top.location = <login_url> or Login
If you are using the PHP SDK or the C# SDK you could have the sdk generate the url for you, but the process is the same.
Also, not that the redirect_uri has to be on the same domain as your iFrame application's url. This will cause Facebook to redirect your user outside of Facebook to your website, you then should redirect the user back to the app inside of facebook. For example:
User clicks login
user goes to Facebook login page
User clicks allow
Facebook redirects the user to http://www.example.com/callback
Your app redirects the user to http://apps.facebook.com/myapp/loggedin
One of the answers suggests a hack in which you call FB.provide() and then FB.ui() to pop up the extended permissions dialog. That solution doesn't work for me, but there is a documented solution now that does. Just call FB.login() to get the permissions you need.
FB.login(function(response){
if (response.authResponse) {
alert('success!');
} else {
alert('fail!');
}
},{scope: 'email'});
Even better, you can ask for extended permissions with the login button.
I have a Facebook app that is built as an iFrame. I am using the JavaScript client API loaded via:
http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php
In my initialization code, I use the requireLogin method to ensure that the user has authorized the app. I have found this to be necessary to be able to gather the user's name, avatar, etc. for the scoreboard. Here's a representative code snippet:
FB_RequireFeatures(["Connect","Api"], function() {
FB.Facebook.init("...API_KEY_HERE...", "xd_receiver.htm");
var api = FB.Facebook.apiClient;
api.requireLogin(function() {
api.users_getInfo(
FB.Connect.get_loggedInUser(),
["name", "pic_square", "profile_url"],
function(users, ex) {
/* use the data here */
});
});
});
This causes the iframe to redirect causing the Facebook authorization screen to load within my app's iFrame. This looks junky and is somewhat confusing to the user, e.g. there are two Facebook bars, etc.
Question 1: is there anything I can do to clean this up while still implementing as an iFrame, and still using the JavaScript APIs?
According to the FB API documentation:
FB.ApiClient.requireLogin
This method is deprecated - use
FB.Connect.requireSession instead.
My experience though when I replace api.requireLogin with FB.Connect.requireSession it never gets invoked. I'd prefer the recommended way of doing it but I struggled and was not able to find a way to get it to work. I tried adding various arguments for the other two parameters as well with seemingly no effect. My expectation is that this method will load in a dialog box inside my app iFrame with a similar authorization message.
Question 2: what am I missing with getting FB.Connect.requireSession to properly prompt the user for authorization?
Finally, at the end of the game, the app prompts the user for the ability to publish their score to their stream via FB.Connect.streamPublish. Which leads me to...
Question 3: am I loading the correct features? Do I need both "Api" and "Connect"? Am I missing any others?
Here is a summary of the changes I needed to make to clean up the authorization process. It appears that iFrames must fully redirect to properly authorize. I tried using the FBConnect authorization but it was a strange experience of popup windows and FBConnect buttons.
Ultimately this game me the expected experience that I've seen with other FB apps:
FB_RequireFeatures(["Connect","Api"], function() {
var apiKey = "...",
canvasUrl = "http://apps.facebook.com/...";
function authRedirect() {
// need to break out of iFrame
window.top.location.href = "http://www.facebook.com/login.php?v=1.0&api_key="+encodeURIComponent(apiKey)+"&next="+encodeURIComponent(canvasUrl)+"&canvas=";
}
FB.Facebook.init(apiKey, "xd_receiver.htm");
FB.ensureInit(function() {
FB.Connect.ifUserConnected(
function() {
var uid = FB.Connect.get_loggedInUser();
if (!uid) {
authRedirect();
return;
}
FB.Facebook.apiClient.users_getInfo(
uid,
["name", "pic_square", "profile_url"],
function(users, ex) {
/* user the data here */
});
},
authRedirect);
});
For iFrames, the solution was ultimately to redirect to the login URL which becomes the authorization URL if they are not already logged in.
I think that FB.requireSession only works from a FB connect site outside of
Facebook. If you're using an app hosted on apps.facebook.com use the php api
call instead,
$facebook = new Facebook($appapikey, $appsecret);
$facebook->require_login();
or link to the login page.
Of these methods to login
* Using the PHP client library
* Directing users to login.php
* Including the requirelogin attribute in a link or form
* Using FBML
only the first 2 are available to iframe apps hosted on apps.facebook.com
I think requirelogin and fbml only work with fbml canvas apps.
see
http://wiki.developers.facebook.com/index.php/Authorization_and_Authentication_for_Canvas_Page_Applications_on_Facebook
Question 1: is there anything I can do
to clean this up while still
implementing as an iFrame, and still
using the JavaScript APIs?
Question 2: what am I missing with
getting FB.Connect.requireSession to
properly prompt the user for
authorization?
Please have a look at this. This article discusses correct use of require session and provides links on how to implement that. And yes, you are right, the requireLogin has been deprecated and won't help any more.
Question 3: am I loading the correct
features? Do I need both "Api" and
"Connect"? Am I missing any others?
As far as I know, you can use both API and Connect together, basically you access Facebook's API with the help of JavaScript.
For iframe apps however, there is no great help and minimum support of API with some handful functionality available. See this for more info.
This causes the iframe to redirect
causing the Facebook authorization
screen to load within my app's iFrame.
This looks junky and is somewhat
confusing to the user, e.g. there are
two Facebook bars, etc.
Finally and personally I have not seen any iframe app requiring user to add the app first. This will create the problem of two bars you mentioned as quoted above.
The link I posted at the beginning of my answer has some useful links to get you started and decide the next-steps or possibly making changes to your apps.