Facebook app: localhost no longer works as an app domain

Question

I am writing a game for Facebook using Rails and jQuery. Since I started using the Facebook Javascript SDK, using localhost as the application domain seems to work very well. I was able to test my game both locally and on Heroku.

On the last day, it seems like Facebook made a big update to its user interface for developers. Now, if I add localhost as the application domain, it causes the following error:

This should be obtained from the canvas URL, secure canvas URL, website URL, mobile site URL, page URL or page URL of the secure page. Check and correct the following domains: localhost

My game also now does not work locally, and I get an error when the Javascript SDK is registered by the user:

API error code: 191 API Error description: The specified URL is not owned by the application Error message: Invalid redirect_uri: This URL is not allowed by the application configuration.

This does not happen when I deploy my game, since herokuapp.com is considered a valid application domain.

How should I develop and test my game if I can no longer use localhost or 127.0.0.1?

Answer 1

The protocol seems to be continuing to change, and the accepted answer did not work for me today. In case this helps other searchers, here is what helped me:

• All changes were made on the "Settings" page on the "General" tab

1.) In the center, under the first field of options, click "+ Add Platform" and select "Website" (or something suitable for your application.)

2.) In the field that appears on the website that you just added: Site URL: http://localhost:3000/

3.) In the field above this (Settings => General): Application domain: localhost

4.) In the bottom right corner, click "Save Changes"

5.) Make sure the application code is copied and pasted correctly in your code. (The identifier is in the first field on this page if you need it again.)

Answer 2

• Go to the app settings page at http://developers.facebook.com
• Click the down arrow in the upper left corner (next to the name of your application) and click "Create a test application" and give it a name
• In the "Settings"> "General" section of this new test application, set "Application Domains" as "localhost"
• Also set the site URL as " http: // localhost: 8888 " (or any other port that you use).
• IMPORTANT: This application has different application and application identifiers from your online application. So, the last step: make sure that you update the code that resides on your local host using the App App App and App Secret. On the contrary, the code located on the real server should use the main application identifier and secret.

Answer 3

You can still test your application without deploying it to a remote server such as heroku. The trick is updating the etc/hosts as follows:

 127.0.0.1 mydomain.com 

Then in the settings of the Facebook application, enter [ http: //] mydomain.com without "[" and "]"

It worked for me that way

Answer 4

This is the wrong way. You must create a test application using the Test tab in the application settings. And then you can enter your development phase URL (e.g. localhost) into your application.

Answer 5

Just add localhost as the URL of your canvas or mobile site, this will allow you to have both localhost and herokuapp.com in your domain settings. Then, once your application is ready, just uninstall it.

Answer 6

Solution Using Firebase

To make this work on localhost , port 3000 , I did the following:

• Create application

2. Now select "+ Create Test Application" in the drop-down arrow list (top left).

3. Add localhost to application domains

4. Add http://localhost:3000/ to the site URL using the selected "+ Add platform"

Until that moment, I followed all the previous answers presented here, but nothing worked.

So...

5. On the left menu, select "Add Product"

6. Add Facebook Login

You will be presented with a workflow carousel with the default domain http://localhost:3000/ , click "continue" to the end.

7. Choose Facebook Login> Settings from the product menu.

8. Enter your Firebase OAuth redirect URI (found when enabling Facebook login in your firebase console https://console.firebase.google.com , example below)

9. Insert URI and Save.

Done.

Answer 7

For everyone who walks with this in 2017. The interface has changed again. I wanted to comment on this, but I do not have enough reputation. Your application’s local URL should now be copied to three places. Currently (October 26, 2017) the sequence:

1.) Click "Settings" on the left menu.

2.) In the center, under the first field of options, click "+ Add Platform" and select "Website" (or something suitable for your application.)

3.) In the field that appears on the website, you just added a copy of your localhost website URL (fe http: // localhost: 3000 / )

4.) In the box above "Domain Domain", copy the same URL

5.) In the lower right corner, click "Save Changes"

6.) In the left menu, in the "Products" section, click "Login to Facebook" (or add it via "+ Add Products" if it is not available)

7.) Now you are in the Facebook login settings. Copy the same URL into the "Valid OAuth Redirect URIs" box

That should work.

Answer 8

Try using url with port e.g.

  http://localhost:8000/ 

I had the same problem and found this solution right now.

Answer 9

This works for me in heroic, the localhost item doesn't work (for me). I hope this helps

1.) In the center, under the first field of options, click "+ Add Platform" and select "Website" (or something suitable for your application.)

2.) In the field that appears on the site that you just added: Site URL: http://MYAPP.herokuapp.com/ (replace MYAPP with the name of your application)

3.) In the field above this (Settings => General): Application domain: MYAPP.herokuapp.com (replace MYAPP with the name of your application)

4.) In the bottom right corner, click "Save Changes"

Answer 10

Just a note for some others who may be struggling with this, just like me. I was not able to get this to work with "test" applications. Using my actual application settings (and just adding

 "http://localhost:3000/" 

to my canvas URL), like everyone else. Test apps don't seem to equal real apps.

Answer 11

For me, it worked like this:

Customizing the facebook application toolbar:

* In the "basic" tab:

1) Leave the application domain empty.

2) Erase any platform. Meaning: There is no website without a canvas. (so the site URL field is not populated)

* On the "Advanced" tab:

3) I entered the URI with a redirect of a valid OAuth:

 http://localhost/myappfolder/redirect.php 

4) regarding my code, insdie my c: /xampp/htdocs/localhost/myappfolder/index.php (this file does loginURL):

 $helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php'); 

inside the redirect.php file:

 $helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php'); 

and I got a session! eventually! no need to hang at the end: P