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
Well, I have a question regarding connecting multiple social accounts using SecureSocial, not through the login menu, but from inside the App.
What I am trying to do is:
User Logs In the app using SecureSocial
After he/she logs in the app, they should be allowed to connect their Facebook/Twitter account, what I am trying to do is let users connect to different social account from a logged in session of the app.
To make it more simple, what I mean do is, provide
"Connect to Facebook" OR "Connect to Twitter" from inside the app, for logged in users. Is there any such functionality in SecureSocial??, they have made it really easier for me to integrate social channels in my app, who has no idea whatsoever about social apps.
Is there some functionality as such provided by SecureSocial, or will I need to create my own modules, if I am needed to create my own modules, could you guys give me some pointers about how to do so. I googled for this issue but couldn't get any suitable answers. Thank you.
There is support for linking accounts now. Check the master samples on how to do it. If you start an authentication flow when a user is already logged in SecureSocial will invoke a new method called link in UserService.
all:
We have a software developer building a web site with Facebook login for our company. They have told us to register a Facebook application.
For the moment, the beta application is hosted in a development environment. I would like to start testing also the Facebook integration. But when I access to the application page in Facebook, I get an error.
I think it might be related to an attribute I find in the first page of the app configuration. The attribute is called "Hosting URL".
The option seems to be linked to some kind of hosting service provided by Heroku. I don't know exactly what is that, but I would say we do not need it. We will use our own hosting server and, what's more, our application is developed in a language different that the one Heroku supports.
Could somebody confirm us which is the problem and, if it is possible, give us a hint to solve it?
Thank a lot in advance,
-The SportPoket team
The "Hosting URL" is meant to be the public web address of your finished production application. During development however, you only need to provide the URL for the app that is accessible from your web browser. If you are running a local web server on port 5000, http://127.0.0.1:5000/ will work.
Heroku is just one of the suggested hosting services for Facebook and you don't have to use it, but the documentation can be helpful. More about setting up a Facebook app dev env can be found here: https://devcenter.heroku.com/articles/facebook#1-creating-a-development-facebook-app
We are developing a hybrid mobile app (code is written in HTML and runs on browser shell as a native app on the device). We need to authenticate the user against an external security manager. I've seen the Gmail App in iPhone which opens a browser to authenticate the user. We are also looking to do something of that sort. We just need to gather your thoughts on how authentication can be done with some external security manager in a mobile app.
Also I noticed that Dailymotion website was able to know if the user is authenticated with Facebook. This looks like a cross domain authentication.
Can you please share your thoughts on how Google and others have implemented it?
What you are looking for is OAuth and OpenID services to federate your login. Depending on the architecture of your system you can implement whichever one you like or even a hybrid of both.
Take a look at this link: Federated Login for Google Accounts
It provides all the useful information you need.
Hmm this question seems old but in case you haven't found an answer here's how I did it with my hybrid apps :
open url on client side with the provider's (facebook/twitter/instagram) url for login
the user logs in and is redirected to the server's callback url (my server is written in nodejs)
once I've got the access token from the provider. I save this token and then create a token for the client to reuse every time the user wants to access a protected ressource.
Download the apk and test it.
If this is what you're looking for you can checkout both the client side code at : https://github.com/malikov/Authenticate.me-client-cordova-ionic
And the server side code at : https://github.com/malikov/Authenticate.me-Node-Server
Cheers
I need to check WiFi is pass through web page login or not, but I don't know how to do.
So I need someone can help me or explain how to wifi via web page login. thanks.
On Android: You can implement your own RedirectHandler and then use it in an HttpClient to hit a website that should never be redirected. If you get redirected then this access point is likely a walled garden (no access to the internet, without further steps). After that you are unlikely to be able to simply log in for the user programmatically, since the user could be anywhere and may need to pay to use the internet: hotel, airplane, coffee shop. Instead the best course of action is to inform the user with a dialog that they will need to perform additional steps to reach the internet using the Wi-Fi access point they are currently connected to and then allow them to easily open the web browser to a website that will trigger the redirect such as www.google.com. I know this solution works because I've implemented it myself before.
On iPhone this probably isn't necessary since the iPhone already detects walled garden Wi-Fi access points as soon as the user connects to them and shows the browser. If the user fails to connect to the internet the iPhone disconnects the user from the Wi-Fi access point.