I am attempting to implement a simple Facebook login flow for a web application using HTTP redirects, as detailed at https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.2.
For the purposes of making this question generic, let's say the application URL is www.example.com/app.php. On the application page, there is a link which directs users to Facebook's OAuth endpoint, where ideally:
they log in to Facebook (if not already logged in) and approve my application permission to access their public profile
they are then redirected back to my application's URL along with some extra parameters appended (e.g. www.example.com/app.php?code=...&access_token=... if the login was successful, or www.example.com/app.php?error_reason=...&error=...&error_description=... if login/app approval was unsuccessful)
The Facebook OAuth endpoint is:
www.facebook.com/dialog/oauth?client_id=12345&redirect_uri=www.xyz.com/app.php
where I have filled in the client_id and redirect_uri parameters with my application's ID and my application's URL respectively.
What actually happens whenever I access the link is that it immediately redirects back to my application's homepage - without ever showing a login dialog of any kind. This happens with Firefox and with Chrome - both when I am logged in to Facebook and when I am not, in normal sessions and in incognito sessions with no plugins enabled. From the browser inspector, I can see that the Facebook OAuth page is definitely requested but is straight away 302 redirecting to my application page with just a code parameter appended.
www.example.com/app.php?code=...
This also happens when the Facebook OAuth link is accessed from pages other than my application's URL (e.g. if I click the link from www.example.com/other_page.htm).
I am unsure what I am doing wrong here; the application URL (www.example.com/app.php) is approved on my app dashboard in as many places as I could find, and changing the request_uri parameter to any other URL results in an error page. I have also tried urlencode()ing my application URL before passing it in the request_uri parameter, but the result remains the same. I don't know what to try next as as far as I can tell I have followed Facebook's manual login guide as closely as possible.
Related
The Facebook Platform Policies section 1.6 clearly states
Your website must offer an explicit "Log Out" option that also logs the user out of Facebook.
The Login Flow for Web without Javascript SDK says on Logging people out
You can log people out of your app by undoing whatever login status indicator you added, for example deleting the session that indicates a person is logged in. You should also remove the stored access token.
On the other hand the Login Flow for Web says about Logging people out
Note: This function call will also log the person out of Facebook. The reason for this is that someone may have logged into your app and into Facebook during the login flow. If this is the case, they might not expect to still be logged into Facebook when they log out of your app. To avoid confusing people and to protect personal security, we enforce this logout behavior.
So in my understanding the Login Flow with JS SDK does what the policy says, it logs the user out of Facebook as well. How do I implement the Login Flow without JS JSDK correctly, such that i do not violate the Facebook Platform Policy? So far i don't see that the Graph API offers a similar functionality.
That should be easy, looking at the PHP SDK’s method getLogoutUrl, that creates an URL of the following scheme:
https://www.facebook.com/logout.php?next=FOO&access_token=USER_ACCESS_TOKEN
For FOO you just place the URL of your website where you want the user to be redirected to after they are successfully logged out of Facebook (don’t forget to properly URL-encode that value), and USER_ACCESS_TOKEN should be self-explanatory. (You need an active user access token to log the user out of Facebook – obviously, because otherwise every site on the web could just redirect me to this address and log me out of Facebook, without me actually wanting that to happen.)
I know that facebook allow me to specify multiple domains for my app.
But in the "Website with Facebook Login" i can only specify one url.
Is it possible for me, to authenticate users on domain.se, domain.dk and domain.net with the same App ? Or should i still create one app, for each domain ?
It is technically possible to use Facebook Connect on multiple domains, there are some limits (5 domains max).
So the key to doing this is adding all domains in the App Domain field under your app settings.
The PROBLEM, however, is that Facebook only lets you add domains that are derived from your Canvas URL or Site or Page tag URLs, so if you try to enter anything else you get an error that looks like this:
The SOLUTION is to create App on Facebook, Website, and Facebook Tab using the ADD PLATFORM button and then put in URLs that point to your other domains. Here is an example of what I mean:
If you use a unique domain for each field you can max out with 5 different domains. I have tested this technique with up to 3 domains, but i think it should work for all 5.
Note: Facebook admin features change from time to time, so all of this is subject to change
As long as you listed all the desired App Domains in application settings you should be able to authenticate users on any of them.
"Website with Facebook Login" is really only intended to be used as link to your site/application.
Update 2 (July 2016):
App domains must match the domain of the Secure Canvas URL, Mobile Site URL, Unity Binary URL, Site URL or Secure Page Tab URL.
Update (December 2013):
At the time of writing original answer it was possible to list any domains in application settings but from that time the UI of Application Settings (as well as way of handling Application Domains) changed at least couple of times, at some point you could only list domains that derive from one of application's canvas pages.
As of December 2013 it is possible (again) to list domains that do not derive from application canvas URL.
Assuming your domains are being served by the same web server and you have access to that web server, you can use the manual login procedure: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow to login from as many domains as you wish.
Assume your domains are site1.com,site2.com.... Instead of using the Facebook javascript API, you will simply place a plain old Log In with Facebook button on each site which will redirect the browser to the facebook login page as described in the above article. In the state variable you can specify a code which indicates which of your sites is requesting a login. In the redirect you will use a single service domain which you assign to your web server (e.g. fb.mywebserver.com) and which you specify as the verified redirect url in the facebook login settings page. All the sites will redirect to this same url, avoiding the problem of supporting multiple domains.
Once the user has logged in, the browser will redirect to fb.mywebserver.com and pass it the state, which tells you which site is requesting login and a code which you can use on the back end to retrieve the user's info using the Facebook graph apis. You store this info with a uid in your data store then using the info in state, you redirect to to the appropriate site including a parameter that indicates a Facebook login (e.g. site1.com?fbc={some uid}). The browser will obediently then call site1.com?fbc... Your web server will receive this request and detect the fbc parameter which tells it to associate the corresponding Facebook logged in user with this site. It can then retrieve the logged in users info using the uid and, for example, return a session cookie for this user along with the page. If you generate the page on the server you can, of course, also include a welcome "user" or alternatively, your client code can do an ajax call to retrieve that information.
From the user's standpoint they press the Login with Facebook button, are redirected to a Facebook login page where they login and then are redirected back to your site in a logged in state. Not quite as nice as having the login popup but likely acceptable.
A similar process can be used for google logins as well
Best thing I've found to do in the development/production scenario is add a "Test App", then add a platform for your development web site - as you have to provide where the "page tab url" lives if you use that as a platform.
Facebook requires your "page url" to be live / accessible if you need to apply for status or permission review.
This got me around the "login in development" / "login in production" scenario.
what I need: upload photos to user's fan page as a page, using an app for that
what I have: my website which does uploading, and a user, who created fan page and application, and that app's id and secret
what I do:
call FB.init() with that appId
call FB.login() with manage_pages,publish_stream permissions - this prompts FB login popup where user is asked to login and then to authenticate the app. As the result I get app access token.
Send request to https://graph.facebook.com/oauth/access_token?client_id=APP_ID&client_secret=APP_SECRET&grant_type=fb_exchange_token&fb_exchange_token=TOKEN_FROM_ABOVE to get extended app token valid for 2 months (and therefore page tokens will be extended as well as described here)
Send request to https://graph.facebook.com/me/accounts?access_token=TOKEN_FROM_ABOVE to get a list of pages user manages, and let user to choose the page he wants to publish to.
That gives me PAGE access token I can use to publish photos to user's FAN page using /albumId/photos/ API call.
what is the problem:
the "via" link in the photo redirects user to MY website (where user has authenticated his app to upload to his page):
that is because I had to ask user to enter my website's URL in app settings, otherwise Facebook login dialog will complain:
SO MY QUESTIONS ARE:
Am I doing this right? am I missing something probably?
If I am - then how can I get that "via" link to link to user's website?
Thank you.
how can I get that "via" link to link to user's website?
Not at all, because this always links to the app that was used making a post/upload.
What you could try though is having your website redirect when a user is coming to your site from Facebook. Which post/feed story the user is coming from should be passed to your site as parameters; then you’d only have to figure out which user made that post (look it up in your database), and redirect to their homepage.
I ended up adding client's website URL as a query string parameter into "Site URL" field in the application settings - and then I need to modify my site's backend to do redirects:
http://mysite.com/?redirect=http://client-site.com
I have created a facebook app on developers.facebook.com and specified a site url for my website. When users on my website login with facebook it redirects them back to the site url I specified (e.g. example.com) on the facebook app settings.
I also have a mobile web site which has facebook login but when users login from the mobile site (mobile.example.com) it still redirects to the main site (example.com).
How can I make facebook redirect to either example.com or mobile.example.com depending on where the facebook login request comes from?
Facebook allows you to pass a variable named state to the auth dialog. This value gets returned by Facebook on both success or failure.
The intent of the state variable is to prevent people from gaining access to your site with forged requests. However, you could add a string to the state variable unique to people coming from the mobile site. On your redirect page registered with your app, you just need to add code to examine the state variable and redirect the user if it has the "mobile" string in it.
I know there is a way to redirect the page using javascript in the iframe of the canvas application to an external url.But is there any other way so that user directly gets redirected to the external url as soon as they authorizes the application.
i know it is possible because a famous app klout in Facebook does it.http://apps.facebook.com/klout__/
redirects to
http://klout.com/ automatically as soon as the user
Remember i got an invitation request from my Facebook friend.when i clicked the invitation notification and when i authorized the application it redirected to a external url.Any idea how this has been done? And i think this wont be encouraged in Facebook policies either?
Facebook want to make sure that the servers it interacts with are of the same domain that is set up in the app settings.
In the klout example you gave what they did was to add an App Domain which is done in the app settings, but there's a limitation to what domains you can add there.
For example if your site url in the settings is set to "www.example.com" then you can add "examlpe.com" or "sub.example.com" to the app domains.
But if you try to add "www.example2.com" you'll get:
Error
example2.com must be derived from your Site URL or your Mobile Web
URL.
Edit
I'm sorry, I did not understand you correctly.
If you want to simply redirect the user to your url in the main window then you can use javascript like this:
top.location.href = "http://www.example.com";
What I was referring to before is the ability to have "www.example.com/" as the site url (in the settings) and still use "sub.example.com" with redirect_uri and such.
2nd Edit
Forgot to mention this:
In the Facebook Platform Policies it states that:
13 . The primary purpose of your Canvas or Page Tab app on Facebook must not be to simply redirect users out of the Facebook experience
and onto an external site
And so you should not redirect the users out of facebook.