accounts-facebook fails with SecurityError when the site uses SSL - facebook

My meteor app has so far lived "unsecured" - meaning no redirection to https:// by default. This has worked fine in conjunction with the accounts-facebook package, which creates its own SSL enabled connection to Facebook when doing its OAuth magic.
My problems started when I tried acessing my site using https instead of http. The pop-up window the accounts package opens to log into facebook halts quickly and by reading its console output I can see the following message
Uncaught SecurityError: Blocked a frame with origin "http://wishlist-foobar.meteor.com" from accessing a frame with origin "https://wishlist-foobar.meteor.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
I thought this might have something to do with the site url in the app's facebook settings, but changing the http to https in that setting got me nowhere. Still got the same message. How is this supposed to work? I am not hardcoding the http part of the path anywhere except the facebook settings, so this seems to be something the accounts-facebook package is doing.
This is my app settings on Facebook. Observe the non-SSL site url.

It turns out you need to set the ROOT_URL environment variable for the callbacks to work and make sure visitors hit that url (for instance, forcing ssl). See these SO answers for more background info.
Google OAuth login in http server
Why is ROOT_URL a required environment variable for bundle deployment?

Related

Cannot test Facebook OAuth in development because 'Valid OAuth Redirect URIs' not allowing localhost

In Facebook Login Settings (in Valid OAuth Redirect URIs), when I attempt to add http://localhost:8000/survey, I get the following message,...,
http://localhost redirects are automatically allowed while in development mode only and do not need to be added here.
So, when I attempt to use http://localhost:8000/survey in my redirect_uri= parameter on my https://www.facebook.com/v7.0/dialog/oauth?client_id=... URL for FB login, I get this error message on the FB login page:
URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.
Okay,... so I'm not allowed to whitelist http://localhost:8000/survey by adding it to Valid OAuth Redirect URIs -- where it says that http://localhost redirects are automatically allowed -- but then when I actually use a localhost URL, it is not whitelisted.
How is it possible test my app's FB login in a localhost/development environment? (I'm familiar with ngrok, but is there another way besides that?)
The first part you quoted mentions the app being set in Development Mode:
http://localhost redirects are automatically allowed while in development mode only and do not need to be added here.
You can toggle this from the top right corner of your App Dashboard on Facebook's site. More detailed instructions here: https://developers.facebook.com/docs/apps/managing-development-cycle/#step1
Another alternative that you have is using your hosts file to point a domain name to your localhost, if you can't set your app in development mode.

OAuth access_denied on login from all providers after server IP change

We recently changed the IP-address on a server hosting one of our services based on .NET Web API 2.
The service is using OAuth2, providing external logins via Facebook/Google.
We're still using the same server and the same host name for our services, only the IP-address has changed. Now I'm getting back my login URL with "&error=access_denied" whenever I try to login using Facebook/Google.
I have checked every setting in both Facebook's and Google's developer consoles but nothing seems to apply. If I remove the OAuth redirect URI, I get an error that the URL is blocked, so the settings seems to take effect.
What have I missed?
Funny how asking a question makes you think even more outside of the box. The culprit was that wrong DNS-server was set on the web host.
I'll see myself out...

Meteor accounts-facebook not working on server

I have followed the this tutorial (http://bulenttastan.net/login-with-facebook-using-meteor-js/) to setup Meteors accounts-facebook package. The application worked fine while working on the local environment(localhost).
Now that I have hosted the app on my server I have the following configuration on my Facebook Apps Dashboard.
But when I try to login from my application I receive the following error message:
"URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs."
My app is hosted on the port '3002' so, I have set the port along with the domain name on the Site URL section on facebook and with respect to the site URL I have also set the redirect URI as given on the image.
Thanks in Advance.
Found a Fix! Setting the ROOT_URL environment variable did the trick for me.

The redirect_uri URL is not supported

I am using facebook app on two servers, dev and live. The dev server is hosted at test.testdev.com and live server is hosted at test.testlive.net. Earlier it was working properly on both the servers but now it works only on dev.
When I try to access it on live server it displays the following error:
redirect_uri URL is not supported
My Facebook app is configured as follows:
Site URL: http://testlive.net/
App Domains: testlive.net testdev.com
I tried using different settings but it didn't worked for me. What may be reason behind this? Also should the redirect_uri start with http/https ?
I found the answer to my question. For live server the redirect_uri was not configured properly i.e. redirect_uri was //test.testlive.net whereas it should have been started with http/https like http://test.testlive.net.
So in future if you face this issue make sure your redirect_uri should start with http or https

Need to set up SSL for facebook site apps to work, any suggestions? I do not need to protect passwords or anything

facebook is forcing apps to use HTTPS, i have been looking in to openSSL, but i really cannot get my head around on how to install it, i am using godaddy and it runs on a linux server, i dont think i can execute from any command line.
I need to have a valid HTTPS link, a self signed certificate it OK, but i cannot seem to get one up on GoDaddy, can i redirect all HTTPS to HTTP, would that work? via .htacess
Any suggestions are welcome!
I had the exact same problem Yesterday, and quickly found a way around this without having to move my application to a server with SSL.
Facebook only validates the starting URL to be https://..... however, you are not forced to use ssl from there on forward. Thus I simply created a free Heroku account (you can use any other hosting provider that supports SSL) and added a index.php file with the following code:
<?php
header( 'Location: http://my.app.url' );
When the IFrame is loaded, it will automatically redirect to your application hosted on a non-ssl server and will work without any problems.
For more information you can check out my blog post http://www.xethron.co.za/building-a-facebook-app-on-a-host-without-https-ssl-support