I have a React/Horizon app with facebook login.
I am wondering if there is any option to work with facebook login from localhost?
There are some other good answers here. However I want to add information about how to create a Test app (as recommended by Facebook).
Go to the page to manage Facebook apps (you, the admin must be logged in): https://developers.facebook.com/apps/
Hover over the block containing your live Facebook app and click on the three dots button that appears on the bottom right corner. Then select Create Test App from the menu.
The test app will be created with a snapshot of your production app's settings. After this, you can independently edit the settings of your test app without affecting your production app.
See the documentation here: https://developers.facebook.com/docs/apps/test-apps/
Regarding the rest of the setup:
keep your app in Development mode
go to Settings -> Basic (left hand menu) and
enter "localhost" for the App Domain
change your Site URL to the localhost version (e.g. http://localhost:3000/users/auth/facebook)
Here are some (Jan 2022) screenshots of my test app settings, which I just use for Facebook login.
Settings -> Basic
Settings -> Advanced
Facebook Login -> Settings
You need to register as facebook developer and create you app there. Once you have your web app registered you can go to your app and click on add product.
Add Facebook Login. Then enable Web OAuth Login and add your localhost in the textfield below and save, you should be able to access it. Attaching a sample screenshot of my facebook app.
Disclaimer: This answer was written in 2019 and I have not been able to keep up with the latest changes introduced by Facebook, this is here for reference purposes.
So in my case doing the following things worked for me.
Make sure your application is in development mode
Make sure you don't have anything in Valid OAuth Redirect URIs when working from localhost
Make sure you don't have anything in App Domains also
Make sure you have entered localhost in your site url
I would like to add an update: July 2019
Facebook now allow localhost automatically in development mode and it is blocked in production mode. All you have to do is turn on development mode in your app settings and you are good to go.
You do not need to add localhost as a redirect URL anymore.
Here you can see the error at the Redirect URLs when I'm trying to add localhost.
You can use a tunneling tool like https://ngrok.com/ which is free for at least one instance. Then you can create a test App as already suggested and use the ngrok generated urls in this test app.
After test I see that we don't need to setup anything in facebook app
(even Site URL don't need to be localhost)
Just need to use https://localhost instead of http://localhost. Then login work and we able to receive response.
Note: If you see SSL warning after you enter https://localhost to browser. Just click on Advance -> Process to ... (unsafe)
The method FB.login can no longer be called from http pages.localhost, I get: App domains must match the domain of the Facebook Web Games URL (https), Mobile Site URL, Unity Binary URL, Site URL or Secure Page Tab URL. Please correct at least one of these domains: localhost
Using something like local-ssl-proxy is an easy way to solve this.
So I also have problem with working with Facebook Login from localhost in React and Express and I got this info:
"The method FB.login can no longer be called from http pages". After click login button, app just crashed.
My solution to fix this mess, was delete Facebook cookie from this localhost page. After this, I still have this error about http, but I can proceed and test login options.
Other solution is working in incognito mode.
I'm using Firebase to log into Facebook and honestly, the easiest thing was to just get your localhost served over HTTPS. I used ssl-serve for it, since I was working on a very basic ESM app with no build tools. But most build pipelines (e.g. Vue's vue-cli, React, etc.) have a CLI option for SSL as well.
What I used:
cd src && npx ssl-serve --ssl --clipless --port 5000 --silent
Then you just accept the self-signed cert ("Advanced" > "Continue" in Chrome/Brave) and you won't need to mess around with swapping the redirect URIs or domains under your Facebook app's config, nor the Facebook App IDs on Firebase.
Facebook provide Test App for your current app to get access to localhost environment. Create a test app on facebook https://developers.facebook.com/docs/development/build-and-test/test-apps/
and use the API and Secret to get testing on localhost.
I would like to share my experience for anyone who use firebase authentication combine with facebook login. Below solution work for me:
First, set your App Mode is development at https://developers.facebook.com.
Next, when you enable facebook login in Firebase Authentication, firebase will give you a link call OAuth redirect URI, you will have to add this link to the Valid OAuth Redirect URIs field in the setting page of your facebook app (inside tab Facebook Login). This is the most important step.
Finally, you don't need to do anything else. Good luck.
If you're using react and your local server is on http and still getting the error run this in the terminal to start up an https localhost
Windows:
set HTTPS=true&&npm start
Windows Powershel:
($env:HTTPS = "true") -and (npm start)
Linux and macOS (Bash):
HTTPS=true npm start
when it opens in the browser
click Advanced and proceed
The site that I am embedding for my app on Facebook is SSL enabled and hitting the https page on a normal browser brings up the site as expected. For now, my SSL certs are self-signed.
However, when I try to run the app on Facebook, it fails to load the page. There are no errors except the image below. Mouseover on the icon shows a "NULL":
So my question is, does this have to do with the fact that my SSL certs are self-signed? Or is there some other reason for this?
Also, I am not able to check if the non-secure page (http) works on the app as Facebook does not allow me to switch off my secure browsing mode.
After obtaining commercial SSL certs, it now works. So I guess any SSL certs that result in a browser prompt asking the user to continue would not work in an embedded canvas on Facebook.
I have read that Facebook requires that iframe pages uses secure connections (SSL).
But I am now setting up my first app and there are two fields, one "Canvas URL" and another for "Secure Canvas URL".
Has the Facebook policy changed? Is it possible to use an iframe with an non-secure canvas url?
Secure canvas urls are not required in these scenarios:
The app is in sandbox mode and you are a developer or someone who can view the app in sandbox mode.
The app is public
and the user of your application has not enabled secure browsing on
their Facebook account.
If your app is live (not in sandbox mode) and you want ANYONE to use your app, the you will need to get an SSL certificate for your server and add the secure URL to your app's settings
Here is a blog post from Facebook about the change they made in October 2011 http://developers.facebook.com/blog/post/2011/09/09/platform-updates--operation-developer-love/
Sorry in advance for my bad english:
Fb policy has changed a lot in the last period.
Actually you NEED absolutly 2 canvas urls:
"standard" canvas (simply, link the host where the app/program is
stored)
secure canvas (you need to buy a facebook certificate for your host where app is stored)
Basically the app works if you have and also if you don't have a SSL certificate, but people who have setted a strong app privacy on their fb accounts, aren't able to see your app
(browser displays an error message: "this website is not secure bla bla, ecc")
Yes, you need a SSL certificate, but you can get 1 free cert in startssl.com.
Got this error when trying to use a my Facebook app on an iPad with Safari.
"mobile version of app is unavailble because it is misconfigured for mobile access"
The app works fine when used in a Safari browser on a desktop. Anyone a suggestion for a solution?
Only see this option in the settings of the app "Mobile Web URL" which has the same value as my "site URL".
I found if using authorization, I had to use m.facebook.com/authurl rather than www.facebook.com
If you're using SSL and visit https://apps.facebook.com or https://m.facebook.com on a mobile device, and your mobile URL is http:// (not https://) then you receive this error. I imagine the same happens through the Facebook iPhone app if secure browsing is enabled.
Adding the trailing slash at the end of my URL also seemed to help, but it may have been the above SSL issue confusing me.
I am developing an application in my local machine.
I let users invite their Facebook friends with a Facebook request Dialogue.
The friends then click the link in their Facebook and are directed to the canvas page and then redirected out of Facebook to my local site.
Do I need to have an SSL certificate and if so how can I have one when I am developing locally so I can test my site?
From Facebook Oct.1 deadline blog post, SSL is not required for sandbox apps. So you can continue to develop apps without SSL certificate as long as you enable sandbox in your app.
In my case, temporary DISABLE secure browsing setting in 'Account Setting'.
http://gyazo.com/39e4dd5087636ebc3024d2285ab3e33a.png
Forward works great for developing facebook apps locally, supports SSL too.
https://forwardhq.com/in-use/facebook
You need a certificate before October 1st, otherwise your canvas landing page will be blocked by Facebook. If you develop locally and need a SSL cert just for test, see the following trick for IIS:
http://weblogs.asp.net/scottgu/archive/2007/04/06/tip-trick-enabling-ssl-on-iis7-using-self-signed-certificates.aspx