We have a Flutter app with Google login feature. In order it to work, we need to send the access grant code to the backend service. In SPA workflow, that could easily be done by setting redirect_uri. But in mobile, we cannot do that as it is the app itself (not a website) that user needs to return. Is there any way that we can set a redirect_uri that will redirect user to app itself? (from in-app web view) Of course, I should also be able to grab the grant code from the query parameters.
Also an example would be great if it is possible to create such a redirect_uri.
A workaround is to point the redirect_uri to a standard webpage hosted by you, and that webpage uses javascript to open the app.
How to open app from webpage: Lots of ways, such as How to open flutter application from url?
Of course, I should also be able to grab the grant code from the query parameters.
You can find plenty of tutorials about how to do that, since in the approach above, redirect_uri points to a very normal webpage.
I have this desktop windows app written in C#
The user can post an image to his wall from the app. I have already created the Facebook app. In the previous version the win app would upload the image to my web site then the user was directed to https://www.facebook.com/dialog/oauth/ (via Process.Start(…) that would open the default browser) with my Facebook apppid and a redirect_uri and after authentication and obtaining an access_token the post image dialog would open. It all worked fine.
However, my question is if I could do these stages without a web site of my own, directly from c#.
I have seen plenty of examples but most of them refer to aspx, php and javascript but after all this is a few http request so I think it should be possible.
I think the main problem is how to get an access_token if there is no web page that the user is directed to after login.
I have seen an example using the webbrowser control but it wasn't very clear. And also, if possible I rather that the user would login using their default browser where they are most likely already logged in to Facebook and don't need to enter user and password just for this.
Also, is it possible to upload an image to facebook directly from my app without putting it on some public url first.
Any help would be appreciated. Thanks
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
We're trying to develop a widget that uses Facebook APIs and other websites (e.g different domains) could embed. We do not want every website to create it's on Facebook app but we'd like everyone using this widget to be connected to our Facebook app.
The problem is that Facebook seems to authenticate only a specific domain for an app (Canvas URL).
Ideas?
Guy
Update: I just realized that for Facebook server API as long as I set the redirect_uri to a valid URL (as defined by the site url) then everything is OK. So I can let my widget call the login and set the redirect_uri to some page we hold on our server that will communicate with the origin. So far so good. Now the problem that remains is whether there's a way to do it using the Facebook JS sdk rather then having to invent the wheel. From what I see there I could find a way to make the JS SDK not use the window.location.href. Ideas?
you just need to create the app, then from the profile site of your app there is an link to let users add the app to their page. (this is also possible via a special link (see the docs))
but be aware, one page can only include your app once. so if you like your "customers" to have your app multiple times on the same page you have to create multiple apps but point the canvas and tab url to the same script.
The other way would be to add child applications directly for the user, so you can let your customers even set a customized icon. This is hard to code couse you have to use old apis (newer one doesnt support the functions anymore) and there is none to null documentation for it. (I have such an app running, if you want to see some examples drop me a note)
I have a facebook iframe application - let's call it apps.facebook.com/my-app.
We currently use Google Analytics for our tracking, and I correctly have Google Analytics installed on my application (that is included via iframe to the FB app) & it is tracking any use of the application mentioned above.
However, I would like to find out what the traffic source is to my-app PRIOR to facebook; ie, if a user goes to domain1.com, and follows a link from there to apps.facebook.com/my-app, it appears that the "traffic source" gets tracked as "apps.facebook.com" rather than "domain1.com", b/c the GA is installed within my code of the page included via the iframe, so its http referer is apps.facebook.com
Is there any way to retrieve "domain1.com" as my traffic source, in this case? Or any suggestions to try? (whether using Google Analytics, or another source? I see that the facebook insights does give some information on referrers, but it's not very extensive at all; no date ranges, etc)
Thanks so much!
- ali
Just using Google Analytics in Facebook, there isn't much you can do here. However, what we've done in the past (to general success) is to create a redirect link outside of Facebook with the analytics on it, and push all traffic there first.
In other words, create a page at www.myapp.com/redirect, and put the google tracker there (or, alternately, just append the referrer url to the query string manually). Then, redirect with javascript out to the Facebook canvas app URL. That way, the user ends up in the right place, and you get your referrer info as well.