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
I have a Facebook application, and my host have selfsigned certificate. Usually thats not a problem, because my browsers used Canvas URL (with http), and everything worked fine. But some other browsers requires Secure Canvas URL (with https), and throw an exception if Secure Canvas URL is empty, or if my host has incorrect certificate.
So how the browser/Facebook decides when to use Canvas URL, and when Secure Canvas URL? Can I make them use Canvas URL only, without https?
If I'm correct applications have a setting like "October 2011" or something (I'll try to verify that for you). Maybe if you disable that one you can use http. The idea behind this implementation was to put every new applications on https.
Now I can understand for development purposes you want to try without https. Not every browser acts the same way with self-signed certificates (Chrome <-> FF).
In a business environment I strongly suggest you have a valid certificate.
EDIT : possible duplicate of your question http://facebook.stackoverflow.com/questions/7308348/facebook-canvas-apps-https-and-http
EDIT 2 : Apps on Facebook Authentication and Security Migration (HTTPS)
All Canvas and Page tab apps must convert to process signed_request (fb_sig will be removed) and obtain an SSL certificate for use in "Secure Canvas URL" and "Secure Page Tab URL" (unless you are in Sandbox mode). You must provide an SSL certificate in the Dev App settings to avoid having your app disabled.
So ... are you in sandbox mode?
No problems with making our webserver secure. App on Facebook runs fine IF 'secure browsing' opted in (user-setting). How can we make our App visible for visitors who has not opted in on 'secure browsing'?
Do we have to make a copy of the site on a insecure (http) server? Or is there another solution? (force to non-ssl via htaccess)
There should be no issue with setting both app urls, in your Facebook app settings, to use the https url.
i am making a facebook tab which using iframe to show the tab content from other url. Everything work fine but when users use secure http connection (https) the tab no longer loads and shows error saying page not secure.
The pages that the iframe showing is not using ssl. Do i need to have a ssl to show the page in secure connection or i have to change some setting in facebook?
You will need to buy an SSL certificate, make sure it is properly installed on your server, and make sure your the page is properly working over SSL (no warnings). Once this is setup, plug the SSL url of your page onto your fan page tab application settings, and it will work. You will want to do this as Facebook is continually encouraging users to enable the always-on SSL option on their account, and at some point SSL may be the only option on Facebook and they probably won't give you much of a warning to enable it.
for now it's an option to have ssl certificate but starting from October the first, it will be required
i have set up my application, it works well for almost all browsers except google chrome, it seems to have a warning about my secure url of the ifram and doesnt load it, the only way i could work around it is visiting the actual url of the iframe, confirmed the ssl warning, then went back to the application on fb, so it finally worked
lousy solution i know, but there was nothing else i could do
So I created a facebook app using iframes, I'm using it as a tab on a facebook page and it works.
But if I use HTTPS, the tab isnt even there.
Anyone know how to fix this?
thanx
Facebook recently enabled the ability for users to set their accounts to use secure browsing (https / ssl). In your application settings > Facebook integration section you now have 2 fields: Secure Canvas URL & Secure Tab URL which in order for your app to work if a user has enable secure browsing, you will need to fill those in. This also requires that the server you are hosting your app on has a valid and configured SSL certificate.
If you are browsing over HTTPS (which is a something a user can now enable in their FB account settings), then the iframe will need to be pulled in over a secure connection too.
This is a known issue (marked as fixed and resolved - http://bugs.developers.facebook.net/show_bug.cgi?id=15200) and, rather than attempting to simply call the same URL over HTTPS, Facebook now provide a separate field under the integration settings for the URL of a secure version of the iframe. If this does not exist, then the tab will not display over HTTPS.
Sergiogx, make sure you filled both fields Canvas Tab URL and Secure Canvas Tab URL. I'm using free facebook page hosting from http://hostfb.com and they also provide SSL support.