I'm working on a new website that uses the Facebook API for users to login and several implementations of the graph Api.
My workflow usually is:
Development on localhost
Development using MAMP/XAMPP or similar software
Push to server -> testing domain
A team of people can test the changes for a few days to see if everything works as planned.
Push to server -> live domain
Changes are live for public
Facebook uses the site URL in the appsettings and for security reasons, they will only redirect to that url... Problem is.. I have localhost and 2 different domains. How can I make this work?
Of course I could edit the hostsfile, but that only fixes it for localhost.. Still no solution for the testdomain.
Please tell me this is somehow possible! I'm getting more and more depressed with the Facebook API.
I usually register a facebook app per environment. (dev points to localhost etc..)
Haven't found a nicer way to do this either..
why still test facebook api on localhost?
You can try in heroku
This is
facebook official blog article
Also see the document in heroku
It is free to use.
Related
So, I have this grade project where I have to do a mashup and deploy it on AppEngine. So, everything is fine, and I even got it working some months ago, but when I deployed the project again after doing some changes and updating the facebook api, it no longer works.
Thing is, it does works on localhost. The error only occurs when deployed. It's only a normal publish post POST.
So, here's the error:
The URL was blocked: Redirection has failed because the URI is not incluided in the list of OAuth authorised of the application client. Check that the OAuth access of both client and web are active and add all the domains of your apps as OAuth redirection URI
This was translated from spanish so it might not be totally accurate.
So, it seems easy, but I don't really know if the proble is that I have to do something in the configuration of appengine control panel (most likely), in the configuration of the facebook api control panel or if it's something in the project code. I've checked everywhere and have the faint memory of solving this several months ago, but I can't anymore.
Thanks!
For Facebook login, you need to tell Facebook the URI of the page that the login will start from. If you change the URI, then the login process will break. You can set the URI from this page:
https://developers.facebook.com/apps/1234567890/fb-login/
Except that you need your app id in there instead of 1234567890. You can get there from here:
https://developers.facebook.com/apps
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
Context
I'm working on a facebook messenger bot and have a workflow issue.
To create it i used ngrok to make a facebook test application hook on my local and it worked fine.
Now the bot is in staging for test and an other application have the webhook pointing to the stage server.
For the production server i intend to do a production application that will have webhook pointing on it.
Question
But since an application has to be attached to a page to start a conversation to it, how can i test several bots ?
Do i need 3 pages (local test, staging test and production) ?
Or is there a Facebook way to it ? (test version of app is not working for now on messenger bot, known bug)
Or maybe a good practice ?
You are looking for Test Apps in Facebook App Development. You can find this setting on the Developer Page on the top left where you can find a drop-down button to create a Test App.
I use to create my dev and staging environment.
Docs on this seem non-existent. It does seem like you need separate pages and bots for test/staging environments.
Here's what I did for the bot I made.
Make test/staging pages.
Unpublish those pages so they're not publicly searchable.
Give testers/devs Page Roles on the page so they can search for and find it.
Give those same testers/devs roles in the bot dashboard so they can actually chat with the bot.
Using Visual Studio 2013 Update 5, I have created a boilerplate MVC 5 application with Individual User Accounts auth option selected, and I have been trying to implement social logins using the template code, but have been unsuccessful.
I have ensured all NuGet packages are up to date, and the code is using MVC 5.2.3; Owin 3.0.1; AspNet.Identity 2.0.0.
I can get everything working fine, including authenticator apps using OtpSharp, but the Facebook login is just not working whatever I try.
I have created the Facebook App, set all the relevant options on that and set the AppId and AppSecret in my Startup.Auth.cs file.
When I try to login with Facebook, the MVC site redirects me to Facebook, which prompts me with the auth screen for the app. I click OK and accept this then I am redirected back to the MVC app. If I check the authorised apps under my Facebook account, my app is listed and shows that it has granted permission to the app to retrieve email address.
The callback works fine but when it hits ExternalLoginCallback and in particular:
var loginInfo = await AuthenticationManager.GetExternalLoginInfoAsync()
loginInfo always returns null.
Looking at the Request it shows an error of access_denied:
https://localhost:44301/Account/ExternalLoginCallback?ReturnUrl=%2Fmanage&error=access_denied
I have read pretty much every blog post and SO question on this error and whilst most of them are helpful, most are also out of date and not relevant.
It would seem that something is missing from the templated project, or something has changed elsewhere as no matter which tutorial I read, and options I set, the result is the same.
I have tried this internally on a dev machine running IIS Express and externally on a hosted machine running IIS 7.5 too and the results are the same.
I've even decompiled the Microsoft.Owin.Security.Facebook library to see where that particular section of the querystring is set to no help.
If I had any hair I'd have pulled it all out by now.
I'll take any suggestions. Can anyone help?
Facebook loves to make things difficult. Access_denied sounds like they are blocking you on purpose. Check your developer dashboard and the accounts authorized to test your app while its in development mode. The email permission is approved by default, so that isn't your issue.
Make sure the account you are testing with is added here:
If that doesnt solve it, make sure you have the correct app domains (testing and live) listed in the domain section here:
I had the exact same issue. No matter what I did the facebook would show the login, get permissions and then return back to the Login page instead of the Email confirmation page.
Using Fiddler Facebook would invoke "http://localhost:1234/signin-facebook&code=SOME_SECRET_CODE_HERE", and then my application's controller would invoke "http://localhost:1234/ExternalLoginCallback?error=access_denied". I was sure Facebook is refusing the access. It was only after implementing a Facebook Javascript SDK Sample, I realised I could successfully login and also view FB scopes!
My Dev environment
MVC 5 application
Visual Studio 2013 Community edition Update 5
Microsoft.OWIN v2.2.1
Microsoft.OWIN.Security.Facebook v3.0.1
Finally I found a YouTube Video by ProCoder which mentioned to put the correct path in the Valid OAuth redirect URIs as http://localhost:1234/signin-facebook and it worked. If you haven't already added, you will need to add Facebook Login product to your Facebook app.
I also set App Domain to localhost and Site URL to http://localhost:1234/
I have added 127.0.0.1 and MY.EXTERNAL.PUBLIC.IP to the Server IP Whitelist Under Security in the Advanced Settings option of the Facebook app.
All these settings I replicated in a new MVC 5 application and it worked like a charm.
update the package Owin.Security.Facebook 3.0.1 to 3.1.0
It works for me
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