I've been writing a game for Facebook using Rails and jQuery. Since I started using the Facebook Javascript SDK, using localhost as an app domain seemed to work just fine. I was able to test my game both locally and on Heroku.
In the past day, it seems that Facebook has made a big update to their developer UI. Now if I add localhost as an app domain, it gives me the following error:
This must be derived from Canvas URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL or Secure Page Tab URL. Check and correct the following domains: localhost
My game also now doesn't work locally and I get an error when the Javascript SDK logs in the user:
API Error Code: 191 API Error Description: The specified URL is not
owned by the application Error Message: Invalid redirect_uri: Given
URL is not allowed by the Application configuration.
This doesn't happen when I deploy my game, since herokuapp.com is considered a valid app domain.
How am I supposed to develop and test my game if I can no longer use localhost or 127.0.0.1?
The protocol seems to keep changing, and the accepted answer didn't work for me today. In case it helps other searchers, this is what did work for me:
All changes were made on the Settings page under the Basic tab
1.) In the center under the first box of options, click "+ Add Platform" and choose "Website" (or whatever is appropriate for your app.)
2.) In the box that comes up for the website you just added: Site URL: http://localhost:3000/
3.) In the box above that (Settings => Basic): App Domain: localhost
4.) At the bottom right - click "Save Changes"
5.) Make sure you have the app ID copied and pasted correctly into your code. (The ID is in the first box on that page if you need it again.)
Go to your App's settings page in http://developers.facebook.com
Click on the dropdown arrow on the top left (next to the name of your app) and click "Create Test App" and give it a name
In the Settings > Basic of that new Test App set the App Domains as "localhost"
Also set the Website Site URL as "http://localhost:8888" (or whatever port you are using).
IMPORTANT: this app has different App ID and App Secret from your online application. So, last step: make sure that you update the code that sits in your localhost with the Test App's App ID and App Secret. On the contrary, the code that sits in the live server should be using the main App's ID and Secret.
You can still test your app without deploying it on a remote sever like heroku.
The trick is to update the etc/hosts file this way:
127.0.0.1 mydomain.com
Then on the Facebook App's settings, type [http://] mydomain.com, without the "[" and "]"
It worked for me this way
For everybody who is fidgeting with this in 2017. The interface changed again. I wanted to comment this to the answer but I don't have enough reputation. The localhost url of your app now has to be copied to three places. Currently, (October 26th, 2017) the sequence is:
1.) Click "Settings" in the left menu.
2.) In the center under the first box of options, click "+ Add Platform" and choose "Website" (or whatever is appropriate for your app.)
3.) In the box that comes up for the website you just added copy your localhost site url (f.e. http://localhost:3000/)
4.) In the box above that "App Domain" copy the same URL
5.) At the bottom right - click "Save Changes"
6.) In the left menu under "Products" click "Facebook Login" (or add it via "+ Add Products" if it is not available)
7.) You are now in the Facebook Login settings. Copy the same url to the field "Valid OAuth redirect URIs"
This should work.
Just add localhost as your canvas url or mobile site url, this will allow you to have both localhost and herokuapp.com in your App Domain setting. Then once your app is in production, just remove it.
This is wrong way. You must create a test application using Test tab in app settings. And then you can enter your development stage url (for example localhost) to your application.
Solution using Firebase
In order to get this working on localhost, port 3000 I did the following:
Create App
Now Select "+ Create Test App" from the arrow dropdown (top left).
Add localhost to App Domains
Add http://localhost:3000/ to Site URL by selected "+ Add Platform"
Up to this point I had followed all previous answers submitted on here, but nothing worked.
So...
In the left hand menu, select "Add Product"
Add "Facebook Login"
You will be presented with a workflow carrousel, with defaulted domain http://localhost:3000/, click "continue" until the end.
Select "Facebook Login > Settings" from the Product Menu.
Enter your Firebase OAuth redirect URI (found when enable Facebook Login in your firebase console https://console.firebase.google.com, example below)
Paste URI and Save.
Done.
Try using the url with port, e.g.
http://localhost:8000/
I was having the same issue and found this solution right now.
After straggling with this for a while I found a solution that combines few answers from this question. I guess that things constantly change when it comes to things like Facebook apps.
The following worked for me at the time of writing.
The key takeaways are:
You must use HTTPS in your backend. You may use a self-signed
certificate.
To test against localhost you must create a test app from your primary app
TL;DR
Make sure your server exposes an HTTPS enabled port with a self-sign certificate. Consult your server documentation.
Go to https://developers.facebook.com/apps and select "Create App".
Select app type that supports Facebook login (E.g. consumer), click continue
Set a display name and contact email and click "Create App"
Optional! When the prompt to Add Products to Your App choose Add Facebook login. Here you will set your production login setting with a real domain, but you can focus on tests app at this stage.
Go to the left side of the page where your app name is displayed. In
the select box and click the small arrow. When the select box expand
click the button "Create Test App"
On the create test app popup select "Create Test App"
On the newly created test App go to "Add a Product" and "Add Facebook login" by clicking "Set up"
Ignore the setting by selecting the settings list under the "Facebook Login" on the left side of the page.
Note the info message at the top "You are currently editing a test version of ..."
Verify that both Client OAuth Login and Web OAuth Login are enabled (blue yes)
Under the "Valid OAuth Redirect URIs" add your local HTTPs address e.g.
https://localhost:8443
Click save changes.
Click Setting basic on the left side of the page and copy your
App Id and App Secret and keep them in a safe place
Common pitfalls
Make sure that you use your test app secrets when you test and not the main app, resulting in the following error
Can't load URL
The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings.
Make sure you use https://localhost:8443 and not https://127.0.0.1:8443 those are not the same from OAuth point of view resulting in an error similar to the one below
URL blocked
This redirect failed because the redirect URI is not white-listed in the app's client OAuth settings. Make sure that the client and web OAuth logins are on and add all your app domains as valid OAuth redirect URIs.
This works for me in heroku, the localhost thing didn't work (for me). I hope it helps
1.) In the center under the first box of options, click "+ Add Platform" and choose "Website" (or whatever is appropriate for your app.)
2.) In the box that comes up for the website you just added: Site URL: http://MYAPP.herokuapp.com/ (replace MYAPP with the name of your app)
3.) In the box above that (Settings => Basic): App Domain: MYAPP.herokuapp.com (replace MYAPP with the name of your app)
4.) At the bottom right - click "Save Changes"
Just a note for some others who may be struggling with this as I was. I have not been able to get this to work with "test" apps. Using my actual app settings (and simply adding
"http://localhost:3000/"
to my canvas URL) worked as everyone else suggested. It seems test apps aren't equal to actual apps.
I ran into an issue with my Rails app that I usually run with http://localhost:3000 because Facebook now requires the Valid OAuth redirect to use https.
To use https locally, I used [ngrok][1] which allows you to use https by providing a tunnel. To do this:
I went to their website and downloaded their program
I extracted the file for the program
In my console, I went into the directory where ngrok was extracted to and entered 'grok http 3000' on my Windows machine, others may use './grok http 3000'
After entering that, ngrok provided a https address which I put into the Valid OAuth Redirect URIs field in Facebook
Then I started my server and was able to access it using that https address instead of localhost:3000
to do local testing all you have to do is turn off the app, or put the facebook app in development mode. Then Facebook will allow you alone to access the app
For me it worked like this:
Configuring the facebook app dashboard:
*On the ' basic ' tab:
1) Leaving app domain empty.
2) Erasing any platform. Meaning: no website no canvas platform. (so no site-URL field to fill)
*On the 'advanced' tab:
3) I entered into the Valid OAuth redirect URIs:
http://localhost/myappfolder/redirect.php
4) regarding my code,
insdie my c:/xampp/htdocs/localhost/myappfolder/index.php (this file makes the loginURL):
$helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php');
inside the redirect.php file:
$helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php');
and I got a session! finally! no need to hang myself in the end :P
For those still having this issue, make sure your app is in development mode while trying to use localhost as the app domain else it won't work.
In case you are using Hotwire, remember to use button_to instead of link_to and disable Turbo on it. E.g:
<%= button_to "Register with Facebook", user_facebook_omniauth_authorize_path, form: { "data-turbo" => "false"}, method: :post %>
Related
Let me give you an example of the flow I am trying to achieve:
A user enters the website
The user has everything loaded (both files and network requests)
Files are now cached due to fetch event listener
The user installs the app on their phone (so far everything works as expected)
All the data that has already been fetched by the user is transferred to the app so that the user could launch the app in offline mode.
Currently, the last step is not working. User must open the app at least once whilst online in order to make it work. Is it possible to "transfer" the website's cache to the app? If so, could you nudge me in the right direction with some helpful links? Thanks!
I trying to deploy my website on my host server. It's showing it's successfully published. But when i am using my URL than it's giving me listed stuff,
Index of /
Audio/
Contect.aspx
Default.aspx
and other my project file.
Why am not able to see my website. When i click default.aspx then i am able see just my webcode.
Help me out.
You have to tell the IIS, that your folder is an application.
Open your IIS manager (might be at Control Panel, Administrative Tools, Internet Information Services (IIS) Manager)
unfold directory structure, until you find your application folder
right click, convert to application
First of all you should build you project web site and then make publish to you Windows server instance. (to File system or FTP).
Details about publishing is here: https://msdn.microsoft.com/en-us/library/vstudio/1y1404zt(v=vs.100).aspx
Then you will be able to configure IIS Web server to host your web site in the network, here is an example:
Creating a site in IIS using GUI.
1. Open IIS Manager. For information about opening IIS Manager, see Open IIS Manager (IIS 7). For information about navigating to locations in the UI, see Navigation in IIS Manager (IIS 7).
2. In the Connections pane, right-click the Sites node in the tree, and then click Add Web Site.
3. In the Add Web Site dialog box, type a friendly name for your Web site in the Web site name box.
4. Click Select if you want to select a different application pool than the one listed in the Application Pool box. In the Select Application Pool dialog box, select an application pool from the Application Pool list and then click OK.
5. In the Physical path box, type the physical path of the Web site's folder, or click the browse button (...) to navigate the file system to find the folder.
6. If the physical path that you entered in step 5 is to a remote share, click Connect as to specify credentials that have permission to access the path. If you do not use specific credentials, select the Application user (pass-through authentication) option in the Connect As dialog box.
7. Select the protocol for the Web site from the Type list.
The default value in the IP address box is All Unassigned. If you must specify a static IP address for the Web site, type the IP address in the IP address box.
8. Type a port number in the Port text box.
9. Optionally, type a host header name for the Web site in the Host Header box.
10. If you do not have to make any changes to the site, and you want the Web site to be immediately available, select the Start Web site immediately check box.
Click OK.
Keep in mind if you configured some host name and want to able you use it locally - you should add this host name to your windows Host file.
Example:
mytesthost.local 127.0.0.1
I am creating an hybrid app totally based on Html, CSS and Javascript.
I want to add facebook login functionality but as the web page isn't hosted any where i keep getting the warning message :
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
Also clicking on the login button opens up a blank window.
Following this tutorial:
https://developers.facebook.com/docs/facebook-login/login-flow-for-web/
I am not using Phonegap , sencha or any other framework.
Is there a way I can achieve this?
You need to specify an authorised domain in order to use the Facebook SDK, because your HTML only sits on the handset, you don't have a domain.
Have a look at Parse. Parse is a framework built for Facebook integration within mobile applications.
https://parse.com/docs/js_guide#fbusers-signup
The other option is host the HTML, CSS and JS on a server and pull the content into the app through a WebView, this will allow you to have a domain that you can add to your App settings page.
I have an app on facebook. Through my site, I open, using JavaScript, a popup. The querystring appearing on Facebook developers site (https://developers.facebook.com/docs/reference/dialogs/feed/) which is:
https://www.facebook.com/dialog/feed?
app_id=458358780877780&
link=https://developers.facebook.com/docs/reference/dialogs/&
picture=http://fbrell.com/f8.jpg&
name=Facebook%20Dialogs&
caption=Reference%20Documentation&
description=Using%20Dialogs%20to%20interact%20with%20users.&
redirect_uri=https://mighty-lowlands-6381.herokuapp.com/
The popup works well and everything is ok.
When I change the app id parameter to my app id, it's not working and it displays "An error occurred...".
What is the reason for that?
Another question related, I moved to facebook feed dialog because the Facebook sharer didn't show certain images. Is it possible to make the facebook feed dialog look like the share option?
Thanks,
Make sure you specified App Domain and Site URL. Those have to point to the server where your Share Feed Dialog will be triggered from. As for testing it can point to local host.
Example:
App Domain: localhost
Site URL: http://localhost:12345/
Good luck!
Marta
I'm using phonegap plugin to connect to facebook
this one : https://github.com/phonegap-build/FacebookConnect
I'm confused about Facebook app settings, when I call FB.init() I get this error message:
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
I edited Website with Facebook Login (site url) to : http:// localhost/ (without the space ofcourse I only added it because stackoverflow doesn't allow a link with 'localhost' in it) and I waited for several minutes (more than one day) for it to work but it's still not working.
any idea how can I get it to work ?
thanks
There are several settings which you need to set.
These settings worked for me for a Phonegap Build environment.
Under Native Android App:
package name: the "widget id" you have in your config.xml (e.g. com.aaa.bbb)
class name: the "widget id" with ".ProjectActivity" appended (e.g. com.aaa.bbb.ProjectActivity)
key hash: generate the key hash using the android instructions. Facebook explains this at https://developers.facebook.com/docs/android/getting-started/facebook-sdk-for-android/
facebook login: enabled
deep linking: disabled
Other steps:
You don't need to set "Website with Facebook Login (site url) " to http://localhost/ anymore. If you have a real website (with facebook login), then that's the place to put the real website URL.
Ensure sandbox mode is disabled
Write this code in onDeviceReady after creating your application id on facebook
FB.init({
appId: "<your appId>",
nativeInterface: CDV.FB
});
on facebook eit your app settings
set your "Website with Facebook Login" to
http://localhost/