What am I doing wrong in localhost Facebook app development?
Asked Answered
E

1

9
App Domains: localhost
Website with Facebook login: http://localhost/auth

I go to http://localhost/auth/ and in my Chrome developer console I see the error: Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

I do a view-source to see the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="fb-root"></div>
<script>
  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'myappidremovedfromstackoverflowquestion', // App ID
      channelUrl : '//localhost/auth/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional init code here

  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<p>hello</p>
</body>
</html>

I go to http://localhost/auth/channel.html and view source to see the single line:

<script src="//connect.facebook.net/en_US/all.js"></script>
Eclectic answered 30/4, 2013 at 7:36 Comment(0)
M
11

You should use some alias domain when you want to connect your Facebook application with your local environment.

Try the following:

  1. Go to your etc/hosts (or %systemroot%/system32/drivers/etc/hosts) file and add the following line:

    127.0.0.1 foo.local # alias domain

  2. Go to App > Settings and register your application by simply using foo.local as app domain.

  3. Add your Site URL (e.g. http://foo.local/project/ )

  4. Done.

Edited on 16.01.2016:

Facebook has changed their UI, follow these steps to make it works.

  1. Go to App > Settings > Basic (tab)
  2. Click on Add Platform, select "Website" and enter your alias domain.
  3. Add your domain in App Domain section.
  4. Done.
Manned answered 30/4, 2013 at 7:44 Comment(2)
Since the SO watchdongs won't let me edit the answer, I will post the correct part as a comment: The problem was that at some point of time I had set the Valid OAuth redirect URIs under Advanced settings to something different and that was overriding all other settings. Emptying that field fixed the problem, but of course the right fix would have been to set that field to the specific URL I want to receive the access token at.Eclectic
In addition to this, if you're using a custom port, e.g. 127:0.0.1:8080, for me it only worked when I added the port in Facebook's app dash. So in the /etc/hosts 127.0.0.1, but in FB: 127.0.0.1:8080Sync

© 2022 - 2024 — McMap. All rights reserved.