Facebook login - how to develop on both localhost and in production?

Question

I am developing a website which uses the Facebook login. Now, I want to be able to get this to work both in my production environment, as well as in my development environment.

On Facebook, I can give ONE site url, which Facebook can redirect to. This worked great during my development phase, but now I want it both to work in production, but also while developing my solution.

I guess one way would be to run my application on the local IIS with my domain-navn and change my hosts file, but that can't seriously be the most easy solution!?

- What is the easiest way to get it to work in both environments?

Chiarra

Answer 1

Update: As of 2018 the path to this setting is now Products > Facebook Login > Settings > Client OAuth Settings the rest of this answer is still valid.

---

There is a better way. You just need to add valid callback URL's for your localhost to Settings > Advanced > OAuth Settings.

This method allows you still have your production website URL while allowing oauth from dev, staging, production, etc.

Vitellus

Nice :) I am pretty sure this is new functionality, but this is the best answer now. – Chiarra

I found these settings under Products > Facebook Login > Settings : Valid OAuth redirect URIs. Also of note, I had success specifying the root URL rather than the callback route. – Harquebus

When making an XHR request from localhost (triple checked redir url): XMLHttpRequest cannot load https://www.facebook.com/v2.8/dialog/oauth?client_id=xxxx&redirect_uri=http://xxxx.com. Redirect from 'https://www.facebook.com/v2.8/dialog/oauth?client_id=xxxx&redirect_uri=http://xxxx.com' to 'https://m.facebook.com/v2.8/dialog/oauth?redirect_uri=http%3A%2F%2Fxxxx.com&client_id=xxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. – Druci

@Druci you need to unlock CORS for local development (this is dependent on your server technology). Just do a search for your server (e.g. CORS node.js, or CORS php) and you should find some tutorials for turning of CORS protection for localhost. – Vitellus

Finally! At the time of this message, this works. For those of you who found the options that previously worked between 2012-2014, this seems to be the way to do it now. – Backpedal

this is no longer on option under App > Settings > Advanced. Can you update where I can modify these settings? – Exile

Note that Facebook only allows localhost to be used when the app is in development mode. So this approach won't work if you want to run in production and development at the same time. – Muslin

Answer 2

After I have worked with this for ~6 months, I have found a solution which works really well, based on the other two answers.

In Facebook I add two apps:

• Production app
• Dev app

Then, in my web.config app settings I have:

<!--Prod-->
<add key="_FacebookApiId" value="id"/>
<add key="_FacebookApiSecretId" value="secret_id"/>
<!--Dev-->
<add key="FacebookApiId" value="dev_id"/>
<add key="FacebookApiSecretId" value="dev_secret_id"/>

Which of course is read through a helper-class.

Then it works seamlessly on both production and localhost, and both myself and my team is happy.

Chiarra

This seems the right approach, as of 2019. Facebook also has the concept of a "Test app", which is recognised as a test variant of your production site. – Muslin

Answer 3

I have the same problem.

The only solutions I have found are:

• yes... edit the host file on your local machine: How to Test Facebook Connect Locally
• create another Facebook app only for development purposes: Facebook Oauth on localhost for testing during development (the blog is about Rails but the solution to use different apps depending on the environment is still valid for other languages)

Drape

Great idea to create a second app, and then depending on debug true/false hit different apps. Thanks! :-) – Chiarra

Answer 4

Facebook only allows localhost OAuth redirects when your app is in development mode. This means you can't run your application in production and perform local development tests.

Instead, you need to create a test variant of your app. Head to https://developers.facebook.com and view the dashboard for your production application. Click the drop-down menu at the top-left and choose Create Test App.

This populates a test application with almost the same settings as your production app. However, it gives you a new app ID and app secret, so you'll need to toggle these settings when running in development mode (as other answers suggest).

Here's some further info on test apps: https://developers.facebook.com/docs/apps/test-apps/

Muslin

Answer 5

Following the advice in this answer, it will work if set the Mobile URL to be your development domain (ie. localhost) and the Site URL to be your production domain.

Onfroi

Answer 6

The updated way.

In the App Dashboard, choose your app and go to Products > Facebook Login > Settings. Under the Client OAuth Settings, enter your redirect URL in the Valid OAuth redirect URIs field for successful authorization.

Go to https://developers.facebook.com/docs/facebook-login/web for more info.

Chartres