I am trying to locally test my "Continue With Facebook" button. I get this error telling me the URL is invalid. Below is how I have configured my app's OAuth settings. Based on all my research this is configured correctly but something is still wrong.
I am using npm http-server to run a local instance of my site. It is running on localhost:8080
As per the last image, it wont let me add domain such as "http://localhost:8080". It only lets me add "localhost"
If your actual production URL is domain.com then in FB > Settings > App Domains, add the additional URL local.domain.com. Then on your local machine in the /etc/hosts file (or Windows equivalent) add the entry:
127.0.0.1 local.domain.com
In a browser, navigate to local.domain.com and that URL will be served up by your local machine (i.e. localhost). This will keep Facebook Login happy while running a test / development version.
You'll also need to whitelist your machine's IP (in FB > Settings > Advanced > Security > Server IP Whitelist) and add an additional http://local.domain.com/callback (in FB > Facebook login > Settings > Valid OAuth redirect URIs).
Related
I'm running meteor on localhost:3000 and I have apache set up to proxy requests for a domain to that meteor instance using a virtualhost and mod_proxy.
I'm getting this error when trying to log in to my meteor app using accounts-facebook:
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 think this is because my ROOT_URL is http://localhost:3000 . If I change the ROOT_URL to the domain, then of course meteor tries to listen to the domain, but can't because my apache server is in the way.
Is there a way I can make this work without another IP address?
From Meteor documentation,
Ensure that your $ROOT_URL matches the authorized domain and callback
URL that you configure with the external service (for instance, if you
are running Meteor behind a proxy server, $ROOT_URL should be the
externally-accessible URL, not the URL inside your proxy).
In my case, my app is listening on a configured port with mod_proxy behind an Apache proxy server, say it is listening http://www.example.com:8080. I have other applications running on other ports.
To get going, on Facebook I set Site URL and Valid OAuth redirect URIs to http://www.example.com:3000 and App Domains to www.example.com. On my machine I set ROOT_URL to http://www.example.com:3000, which is externally-accessible.
Such configurations work for me without a second IP address.
I could get it working by simply having
# /etc/hosts
127.0.0.1 localhost.localdomain localhost
And the facebook settings as in the image below. I've set a secondary (mobile) url to point to http://localhost:3000
I've created a whole facebook app like this, with login, access to graph-api etc. And everything was working both online and in the dev envrionment
I am trying to set up Facebook authentication with hybridauth in Laravel 4. I would like to test the authentication on my localhost server.
The domain where I would like the authentication to occur on is at:
http://localhost:8888/crowdsets/laravel-master/public/fans/landing
I have included the base url in the config file as:
http://localhost:8888/crowdsets/laravel-master/public/fans/landing/auth/
In Facebook, for my app, I am trying to set up the local host as the Site Url and App Domain.
I used:
Site Url: http://localhost:8888
App Domain: localhost:8888
I am receiving the error from FB:
Error
App Domains: localhost:8888 is not a valid domain.
Do you have any idea what I should be using in order to test this authentication system on my localhost? I am using MAMP on a Mac OS X 10.7.5 machine.
I was able to get this working for my Rails app locally without using a virtual host. Here are the steps I used:
Go to http://developers.facebook.com/, create, and setup your app
When inside the dashboard, click "Settings"
Click "Add Platform"
Choose website (for authentication via the web app)
Add http://localhost:3000/ as "Site URL" (and "Mobile URL" if necessary)
Add localhost to "App Domains" above
Click Save
Whereas you have your App Domain as localhost:88888, I believe it should just be localhost.
Been trying to setup my Facebook app which I want to use for Logins to allow me to test it on my Mac's localhost. Facebook is throwing the error "App Domain: http://localhost is not a valid domain." when I try change App Domain of Site URL to localhost or 127.0.0.1
IS there any way to get the facebook login api to redirect the browser to my localhost after authentication?
The way I do it is alias the site I'm working on to something like: http://sitename.loc, and then setup an app used specifically for testing with that as the domain.
An example of how to do this can be found here:
https://stackoverflow.com/a/7493806/1056965
On your local machine you have to setup hosts file to point your site name on local ip address. For example if you have to setup authorization with fb on site example.com put this record in your hosts file
127.0.0.1 example.com
And just start your site localy and facebook oauth will redirect you on example.com and you will get valid token localy.
For setup hosts file on windows help is on this link Windows Hosts Setup
Linux help link Linux hosts
It's simple enough when you find out.
Open /etc/hosts (unix) or C:\WINDOWS\system32\drivers\etc\hosts.
If your domain is foo.com, then add this line:
127.0.0.1 local.foo.com
When you are testing, open local.foo.com in your browser and it should work.
Allready, explained here
How to Test Facebook Connect Locally
I am planning to connect to Facebook chat from my localhost. I will need to get the session key from Facebook. When I give the site URL as localhost:8080 or ip-address:8080 it does not work.
I read about setting up two apps with 2 different API keys one runs on dev m/c and other on localhost but I did not quite get it.
Can anyone explain how to run a Facebook app on localhost?
I wrote a tutorial about this a while ago.
The most important point is the "Site URL":
Site URL: http://localhost/app_name/
Where the folder structure is something like:
app_name
¦ index.php
¦
+---canvas
¦ ¦ index.php
¦ ¦
¦ +---css
¦ main.css
¦ reset.css
¦
+---src
facebook.php
fb_ca_chain_bundle.crt
EDIT:
Kavya: how does the FB server recognize my localhost even without an IP or port??
I don't think this has anything to do with Facebook, I guess since the iframe src parameter is loaded from client-side it'll treat your local URL as if you put it directly on your browser.
For example have a file on your online server with content (e.g. online.php):
<iframe src="http://localhost/test.php" width="100%" height="100%">
<p>Not supported!</p>
</iframe>
And on your localhost root directory, have the file test.php:
<?php echo "Hello from Localhost!"; ?>
Now visit http://your_domain.com/online.php you will see your localhost file's content!
This is why realtime subscriptions and deauthorize callbacks (just to mention) won't work with localhost URLs! because Facebook will ping (send http requests) to these URLs but obviously Facebook server won't translate those URLs to yours!
if you use localhost:
in Facebook-->Settings-->Basic,
in field "App Domains" write "localhost",
then click to "+Add Platform" choose "Web Site",
it will create two fields "Mobile Site URL" and "Site URL",
in "Site URL" write again "localhost".
works for me.
You can also edit 'hosts' file and create local variation of your domain.
Example
If your real facebook application address is "example.com" you can create "localhost.example.com" (accessible only from your pc) domain in your "hosts" file pointing to "localhost" and run your local website under this domain.
You can trick Facebook this way.
In your app's basic settings (https://developers.facebook.com/apps)
under Settings->Basic->Select how your app integrates with Facebook...
Use "Site URL:" and "Mobile Site URL:" to hold your production and development URLs. Both sites will be allowed to authenticate. I'm just using Facebook for authentication so I don't need any of the mobile site redirection features. I usually change the "Mobile Site URL:" to my "localhost:12345" site while I'm testing the authentication, and then set it back to normal when I'm done.
2013 August.
Facebook doesn't allow to set domain with port for an App, as example "localhost:3000".
So you can use https://pagekite.net to tunnel your localhost:port to proper domain.
Rails developers can use http://progrium.com/localtunnel/ for free.
Facebook allows only one domain for App at the time. If you are trying to add another one, as localhost, it will show some kind of different error about domain. Be sure to use only one domain for callback and for app domain setting at the time.
So I got this to work today. My URL is http://localhost:8888. The domain I gave facebook is localhost. I thought that it was not working because I was trying to pull data using the FB.api method. I kept on getting an "undefined" name and an image without a source, so definitely didn't have access to the Graph.
Later I realized that my problem was really that I was only passing a first argument of /me to FB.api, and I didn't have a token. So you'll need to use the FB.getLoginStatus function to get a token, which should be added to the /me argument.
just specify your canvas url as http://localhost/app_path.
Ok I'm not sure what's up with these answers but I'll let you know what worked for me as advised by a senior dev at my work. I'm working in Ruby on Rails and using Facebook's JavaScript code to get access tokens.
Problem: To do authentication, Facebook is taking the url from your address bar and comparing that with what they have on file. They don't allow you to use localhost:3000 for whatever reason. However, you can use a completely made-up domain name like yoursite.dev by running a local server and pointing yoursite.dev to 127.0.0.1:3000 or wherever your localhost was pointing to.
Step 1: Install or update Nginx
$ brew install nginx (install) or $ brew upgrade nginx (update)
Step 2: Open up your nginx config file
/usr/local/etc/nginx/nginx.conf (usually here)
/opt/boxen/config/nginx/nginx.conf(if you use Boxen)
Step 3 Add this bit of code into your http {} block
Replace proxy_pass with wherever you want to point yoursite.dev to. In my case it was replacing localhost:3000 or the equivalent 127.0.0.1:3000
server {
listen yoursite.dev:80;
server_name yoursite.dev;
location / {
proxy_pass http://127.0.0.1:3000;
}
}
Step 4: Edit your hosts file, in /etc/hosts on Mac to include
127.0.0.1 yoursite.dev
This file directs domains to localhost. Nginx listens in on localhost and redirects if it matches a rule.
Step 5: Every time you use your dev environment going forward, you use the yoursite.dev in the address bar instead of localhost:3000 so Facebook logs you in correctly.
Forward is a great tool for helping with development of facebook apps locally, it supports SSL so the cert thing isn't a problem.
https://forwardhq.com/in-use/facebook
DISCLAIMER: I'm one of the devs
You need to setup your app to run over https for localhost
You can follow steps given in this to setup HTTPS on ubuntu
https://www.digitalocean.com/community/articles/how-to-create-a-ssl-certificate-on-apache-for-ubuntu-12-04
You need to do following steps:
install apache (if you do not have)
sudo apt-get install apache2
Step One—Activate the SSL Module
sudo a2enmod ssl
sudo service apache2 restart
Step Two—Create a New Directory
sudo mkdir /etc/apache2/ssl
Step Three—Create a Self Signed SSL Certificate
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/apache/ssl/apache.key -out /etc/apache2/ssl/apache.crt
With this command, we will be both creating the self-signed SSL certificate and the server key that protects it, and placing both of them into the new directory.
The most important line is "Common Name". Enter your official domain name here or, if you don't have one yet, your site's IP address.
Common Name (e.g. server FQDN or YOUR name) []:example.com or
localhost
Step Four—Set Up the Certificate
sudo vim /etc/apache2/sites-available/default-ssl
Find following lines and edit those with your settings
ServerName localhost or example.com
SSLEngine on SSLCertificateFile /etc/apache2/ssl/apache.crt
SSLCertificateKeyFile /etc/apache2/ssl/apache.key
Step Five—Activate the New Virtual Host
sudo a2ensite default-ssl
sudo service apache2 reload
A trick:
Use MAMPPRO and create:
server name: the EXACT adress of you website (eg: helloworld.com)
to your site on your disk
On Facebook:
So you can keep your original Site URL as well (eg: helloworld.com)
Now you understand that when you type your website on the adress bar you are in local!
..and when you want to be online, just inactive the server on MAMP PRO..
:)
None of the answers above worked for me. I am running on FB API 2.5. Mine was a combination of issues that lead to success once resolved
Create a test app to ensure that it is maintained and managed as
such and can be disabled when going live
Read the error message properly :) - I had to enable "Web OAuth Login" WITH "Client OAuth Login"
Use https://www.whatismyip.com/ to find out what my
current IP is
Create an A record on my Domain i.e.
http://localhost.mydomain.com that points to my current IP
It's probably not ideal as Dynamic IP's change and one could probably use DynDNS or something similar to make the IP more "static" but it worked for me
In my case the issue revealed to be chrome blocking the CORS request from localhost:4200 to facebook api website.
Running Chrome with this setting: "YOUR_PATH_TO_CHROME\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="c:/chrome
worked like a charm while developing. Even with no localhost added to facebook app's settings.
I am planning to connect to Facebook chat from my localhost. I will need to get the session key from Facebook. When I give the site URL as localhost:8080 or ip-address:8080 it does not work.
I read about setting up two apps with 2 different API keys one runs on dev m/c and other on localhost but I did not quite get it.
Can anyone explain how to run a Facebook app on localhost?
I wrote a tutorial about this a while ago.
The most important point is the "Site URL":
Site URL: http://localhost/app_name/
Where the folder structure is something like:
app_name
¦ index.php
¦
+---canvas
¦ ¦ index.php
¦ ¦
¦ +---css
¦ main.css
¦ reset.css
¦
+---src
facebook.php
fb_ca_chain_bundle.crt
EDIT:
Kavya: how does the FB server recognize my localhost even without an IP or port??
I don't think this has anything to do with Facebook, I guess since the iframe src parameter is loaded from client-side it'll treat your local URL as if you put it directly on your browser.
For example have a file on your online server with content (e.g. online.php):
<iframe src="http://localhost/test.php" width="100%" height="100%">
<p>Not supported!</p>
</iframe>
And on your localhost root directory, have the file test.php:
<?php echo "Hello from Localhost!"; ?>
Now visit http://your_domain.com/online.php you will see your localhost file's content!
This is why realtime subscriptions and deauthorize callbacks (just to mention) won't work with localhost URLs! because Facebook will ping (send http requests) to these URLs but obviously Facebook server won't translate those URLs to yours!
if you use localhost:
in Facebook-->Settings-->Basic,
in field "App Domains" write "localhost",
then click to "+Add Platform" choose "Web Site",
it will create two fields "Mobile Site URL" and "Site URL",
in "Site URL" write again "localhost".
works for me.
You can also edit 'hosts' file and create local variation of your domain.
Example
If your real facebook application address is "example.com" you can create "localhost.example.com" (accessible only from your pc) domain in your "hosts" file pointing to "localhost" and run your local website under this domain.
You can trick Facebook this way.
In your app's basic settings (https://developers.facebook.com/apps)
under Settings->Basic->Select how your app integrates with Facebook...
Use "Site URL:" and "Mobile Site URL:" to hold your production and development URLs. Both sites will be allowed to authenticate. I'm just using Facebook for authentication so I don't need any of the mobile site redirection features. I usually change the "Mobile Site URL:" to my "localhost:12345" site while I'm testing the authentication, and then set it back to normal when I'm done.
2013 August.
Facebook doesn't allow to set domain with port for an App, as example "localhost:3000".
So you can use https://pagekite.net to tunnel your localhost:port to proper domain.
Rails developers can use http://progrium.com/localtunnel/ for free.
Facebook allows only one domain for App at the time. If you are trying to add another one, as localhost, it will show some kind of different error about domain. Be sure to use only one domain for callback and for app domain setting at the time.
So I got this to work today. My URL is http://localhost:8888. The domain I gave facebook is localhost. I thought that it was not working because I was trying to pull data using the FB.api method. I kept on getting an "undefined" name and an image without a source, so definitely didn't have access to the Graph.
Later I realized that my problem was really that I was only passing a first argument of /me to FB.api, and I didn't have a token. So you'll need to use the FB.getLoginStatus function to get a token, which should be added to the /me argument.
just specify your canvas url as http://localhost/app_path.
Ok I'm not sure what's up with these answers but I'll let you know what worked for me as advised by a senior dev at my work. I'm working in Ruby on Rails and using Facebook's JavaScript code to get access tokens.
Problem: To do authentication, Facebook is taking the url from your address bar and comparing that with what they have on file. They don't allow you to use localhost:3000 for whatever reason. However, you can use a completely made-up domain name like yoursite.dev by running a local server and pointing yoursite.dev to 127.0.0.1:3000 or wherever your localhost was pointing to.
Step 1: Install or update Nginx
$ brew install nginx (install) or $ brew upgrade nginx (update)
Step 2: Open up your nginx config file
/usr/local/etc/nginx/nginx.conf (usually here)
/opt/boxen/config/nginx/nginx.conf(if you use Boxen)
Step 3 Add this bit of code into your http {} block
Replace proxy_pass with wherever you want to point yoursite.dev to. In my case it was replacing localhost:3000 or the equivalent 127.0.0.1:3000
server {
listen yoursite.dev:80;
server_name yoursite.dev;
location / {
proxy_pass http://127.0.0.1:3000;
}
}
Step 4: Edit your hosts file, in /etc/hosts on Mac to include
127.0.0.1 yoursite.dev
This file directs domains to localhost. Nginx listens in on localhost and redirects if it matches a rule.
Step 5: Every time you use your dev environment going forward, you use the yoursite.dev in the address bar instead of localhost:3000 so Facebook logs you in correctly.
Forward is a great tool for helping with development of facebook apps locally, it supports SSL so the cert thing isn't a problem.
https://forwardhq.com/in-use/facebook
DISCLAIMER: I'm one of the devs
You need to setup your app to run over https for localhost
You can follow steps given in this to setup HTTPS on ubuntu
https://www.digitalocean.com/community/articles/how-to-create-a-ssl-certificate-on-apache-for-ubuntu-12-04
You need to do following steps:
install apache (if you do not have)
sudo apt-get install apache2
Step One—Activate the SSL Module
sudo a2enmod ssl
sudo service apache2 restart
Step Two—Create a New Directory
sudo mkdir /etc/apache2/ssl
Step Three—Create a Self Signed SSL Certificate
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/apache/ssl/apache.key -out /etc/apache2/ssl/apache.crt
With this command, we will be both creating the self-signed SSL certificate and the server key that protects it, and placing both of them into the new directory.
The most important line is "Common Name". Enter your official domain name here or, if you don't have one yet, your site's IP address.
Common Name (e.g. server FQDN or YOUR name) []:example.com or
localhost
Step Four—Set Up the Certificate
sudo vim /etc/apache2/sites-available/default-ssl
Find following lines and edit those with your settings
ServerName localhost or example.com
SSLEngine on SSLCertificateFile /etc/apache2/ssl/apache.crt
SSLCertificateKeyFile /etc/apache2/ssl/apache.key
Step Five—Activate the New Virtual Host
sudo a2ensite default-ssl
sudo service apache2 reload
A trick:
Use MAMPPRO and create:
server name: the EXACT adress of you website (eg: helloworld.com)
to your site on your disk
On Facebook:
So you can keep your original Site URL as well (eg: helloworld.com)
Now you understand that when you type your website on the adress bar you are in local!
..and when you want to be online, just inactive the server on MAMP PRO..
:)
None of the answers above worked for me. I am running on FB API 2.5. Mine was a combination of issues that lead to success once resolved
Create a test app to ensure that it is maintained and managed as
such and can be disabled when going live
Read the error message properly :) - I had to enable "Web OAuth Login" WITH "Client OAuth Login"
Use https://www.whatismyip.com/ to find out what my
current IP is
Create an A record on my Domain i.e.
http://localhost.mydomain.com that points to my current IP
It's probably not ideal as Dynamic IP's change and one could probably use DynDNS or something similar to make the IP more "static" but it worked for me
In my case the issue revealed to be chrome blocking the CORS request from localhost:4200 to facebook api website.
Running Chrome with this setting: "YOUR_PATH_TO_CHROME\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="c:/chrome
worked like a charm while developing. Even with no localhost added to facebook app's settings.