I am trying to use the Facebook javascript sdk for my chrome extension. Since it is a chrome extension how do i integrate it with facebook? is it an app on facebook.com or a website?
Currently i have it as a website.
my site url on the settings is:
http://localhost/Users/home/Documents/facebook/
i have also enabled web sharing on my mac.
do i need to set the site domain as well? what am i doing wrong here?
Enter http://localhost/Users/home/Documents/facebook/ as your "Site Domain" on the developer app:
https://developers.facebook.com/apps/{api_key}/summary
Replace {api_key} with yours; or find a link at https://developers.facebook.com
Interestingly enough, Facebook lets you type anything into the domain so it can be an offline URL (such as localhost or a local port) and Facebook will redirect to it after authentication.
You can test Facebook applications locally if you add an entry to your hosts file which points to any subdomain of the root domain you gave Facebook. For example, if your domain is example.com, you can add entry to your hosts file pointing fbtest.example.com to localhost (127.0.0.1).
You can then test away locally without having to edit your Facebook app configuration (assuming your local server is set to serve the same content to all subdomains).
Alternatively, if it's important to have the exact domain, you can just add an entry for the root domain. It just means you won't be able to access the live site while testing.
In order to develop and publish a Facebook application, you must provide a web accessible URL that Facebook can query. If you have webspace you can upload to or make your IP available to the web for Facebook to call, it should solve your problems.
Facebook will allow you to put just about any valid url into the box, however when you go to use it for logins or general use, you will begin to notice errors, since Facebook's spider cannot fetch the url.
Check the 'Desktop Apps' section of https://developers.facebook.com/docs/authentication/
This explains how to do authentication where there's no server involved, it's aimed at desktop apps but a browser toolbar should work in a similar way
Related
I know this is an old answer but I think the context is different for my use case.
I am trying to log in with Facebook and in the configuration of my application in Facebook I have my web application. For example the URL of the site I have is website.com. However, I am actually using subdomains, in this way, my application generates subdomains belonging to my clients. For example, the URL of my client in my application
to login is: subdomain1.website.com The error message I get from Facebook is:
JSSDK Unknown Host domain: The domain where you host the Facebook Javascript SDK is not in the list of host domains in your app's Javascript SDK. Specify your host domain in the app dashboard login settings.
How can I login with Facebook using a subdomain? Obviously, I don't want to add the sub-domains every time a new customer comes to my application.
Pd: I thought that with adding to Allowed Domains for the SDK for JavaScript *.website.com
but that doesn't work.
I hope your answers, thank you.
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'm creating a Social Media management webapp. This webapp will be used by our customers on there own sites (read, own domains). The webapp connects to a facebook app that we own, to allow them to manage there pages.
I'm using the "Website" platform for the app. During development I've had the "Site URL" set to my localhost url, and the "App Domains" set to localhost. This has worked fine.
However I now realise that this app will not always be run from localhost. It will be run from many differnt domains. I've read many posts about how its not possible to do this anymore, or at least the max is 5 domains by adding multiple platforms.
So how am I supposed to do this? Will I need to create an app on my profile for each customer/site? Will I have to create an app on each customers facebook account and link its app ID to our webapp?
The solution for this was not so bad.
Since AccessTokens are portable, so you can generate them on a single domain, and then use them to access the API from any page.
To do this, I have setup a single page on my own server (not customers server), whos domain is in my Apps Domains property. This page just has the facebook JS SDK, and some code to handle whether or not to show a login or a logout button. I embed this as an iFrame inside my webapp (that can run from any URL). I use
FB.Event.subscribe('auth.authResponseChange' function {});
to look for status changes, then use the the JS postMessage method to send the result of this to the parent of the iFrame, who then sends it to the server. This AccessToken can then be used anywhere.
What is App Domain used for in Facebook Apps?
Somebody had asked the same in What are App Domains in Facebook Apps? but I didn't really get it.
What I am trying to do is "publish actions" from a mobile app. The object to be published must be stored in a separate web page. And the domain of the separate page is supposed to be included in app domains.
Is app domain applicable for Mobile apps as well?
Well AppDomain simply means where is located your application's server side files.
Your application only usable from that domain. Facebook needs data for cross domain and security issues.
Unless you're going to use FB auth for a website you don't need to fill App Domain input.
I encountered the same issue for my mobile app. To fix it, I set the App Domain to my domain. But that wasn't enough because I then got the error:
Error
You have specified an App Domains but have not specified a Site URL or a Mobile Web URL
puurbuy.com must be derived from your Site URL or your Mobile Web URL.
So I had to go one step further and enable "Website with Facebook Login" setting the URL to my homepage, even though I do not have a Facebook login on my website. A terrible work around in my opinion, but it worked.
Because not using Sandbox Mode:
1. Had to establish a category on appdetails page
2. Had to set Website with Facebook Login
3. Then able to set App Domain
Now the debug pulls in the correct information without error.
App domain is not something related to your app or web domain, this is basically a App Store address.
Simply write this line in App Domains.
apps.apple.com
this worked for me.
I want to add the ability to 'login with Facebook' to my site. But I am confused when I register my site in Facebook Apps. What should I input into App Domains?
the app domain is your domain name.
Before you enter your domain, first click on Add Platform, select website, enter your site URL and mobile site url. Save the settings.
Thereafter, you can enter the domain name in the App domains field.
See more at my blog: http://www.ogbongeblog.com/2014/03/unable-to-add-app-domains-to-new.html
If you don't specify the platform for the app you won't able to add app domain correctly.
Here is an example -- validate that its a type a website platform.
To add to the answers above, the App Domain is required for security reasons. For example, your app has been sending the browser to "www.example.com/PAGE_NAME_HERE", but suddenly a third party application (or something else) sends the user to "www.supposedlymaliciouswebsite.com/PAGE_HERE", then a 191 error is thrown saying that this wasn't part of the app domains you listed in your Facebook application settings.
In this example:
http://www.example.com:80/somepage?parameter1="hello"¶meter2="world"
the bold part is the Domainname. 80 is rarely included. I post it since many people may wonder if 3000 or some other port is part of the domain if their not staging their app for production yet. Normally you don't specify it since 80 is the default, but if you just want to specify localhost just do it without the port number, it works just as fine. The adress, though, should be http://localhost:3000 (if you have it on that port).
it stands for your website where your app is running on.
like you have made an app www.xyz.pqr
then you will type this www.xyz.pqr in App domain
the site where your app is running on should be secure and valid
It's simply the domain that your "facebook" application (wich means application visible on facebook but hosted on the website www.xyz.com) will be hosted. So you can put App Domain = www.xyz.com
I think it is the domain that you run your app.
For example, your canvas URL is facebook.yourdomain.com, you should give App domain as .yourdomain.com