i'm tried to include Facebook Customer Chat and test it on localhost. But all i see is empty iframe.
I doesn't have any errors just an empty iframe with . Also it doesn't react to FB.CustomerChat.show();
Some key moments from my code:
js.src = "//connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
Vue.use(vue_fb, {
appId: process.env.FACEBOOK_AUTH_APP_ID,
autoLogAppEvents: true,
xfbml: true,
version: 'v4.0'
});```
localhost won’t work for testing of this plugin, because of the requirements for white-listing the domain, https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting#requirements:
Domains must meet the following requirements to be whitelisted:
- Served over HTTPS
- Use a fully qualified domain name, such as https://www.messenger.com/. IP addresses and localhost are not supported for whitelisting.
A locally set up domain name with a self-signed certificate should probably work - all the relevant stuff happens in the browser, so that’s the only one you’d have to convince to accept that self-signed certificate.
But it’s probably a better option not to deal with the hassle of issuing and embedding your own certificate - and use a service like https://ngrok.com/ instead, that provides an easy HTTPS tunnel to your localhost, which is ideally suited to test stuff like this.
Related
I need to develop a Facebook app, and while I request my SSL certificate, I need to start the project because I have few time to deliver it.
Is it possible to use localhost as the "Secure Canvas URL"? This field requires that the URL begins with https, so I don't know the correct way to do it (in the case that using localhost is allowed).
First of all you need to set up your server to answer HTTPS requests.
Then you create a self-signed SSL certificate – not sure if that works for the domain name localhost, but I’d recommend setting up a local domain, such as mytest.local anyway (the .local being the important part here), make your server listen to that, and your system resolve it to your local IP address, f.e. via its hosts file.
And then you tell your browser to accept that self-signed certificate … and you’re good to go.
Since recently I can not test applications on localhost. There is no canvas url anymore to be set, only secure canvas url and it asks for https url. Even test apps do not have this option. So I have to buy another ssl and domain for testing pourposes only? If someone has the same problem or a solution please let me know. Cheers!
Just put in https://localhost and accept the unsafe message in the browser, you don´t need to buy a certificate.
You can also use a self-signed certificate, as explained in other threads:
create a trusted self-signed SSL cert for localhost (for use with Express/Node)
How do I allow HTTPS for Apache on localhost?
Thank you luschn for pointing that about self signed stuff out because just putting https://localhost will not work anymore.
It seems that facebook made some changes and that you can only test your apps on localhost if you create a self signed certificate with openssl tool. Then you can enter in secure canvas url something like https://localhost:3000/ and in app domains localhost and it seems to work. Other than creating selfsigned certificate I could not make it work on localhost.
I'm developing a Facebook canvas app. I don't have a SSL certificate so I've been using a plain http:// URL + sandbox mode for the creation and testing process.
Suddenly I realized my Facebook account turned to Secure Browsing mode and I'm unable to turn it off via Account Settings >> Security >> Secure Browsing. There is no "edit" button. None of my co-workers experienced the same problem. Their Secure Browsing option is off, editable and the app is visible. Anyone familiar with the same issue?
If you're testing your app you shouldn't really need to disable HTTPS, nor is that really a representative test if you're using HTTP but almost all your users will be using HTTPS (as is the case with Facebook)
It'd be better to get a free cert from startssl.com or similar free CAs, use OpenSSL to generate an in-house CA or self-signed certs, or accept the certificate warnings from the default cert that ships in your webserver, if any, than to disable the secure browsing option on your Facebook account for this purpose;
As for the option itself in the Facebook setting, that's somewhat off topic for here, and I'm unsure what the exact status is but I believe the option to browse Facebook insecurely is being phased out
Another option for testing is to run a test server with a separate proxy to your production environment (e.g nginx) for test purposes and log all the traffic to that server for debugging
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
I am working on my first app for Facebook and facing (probably) with the SSL problem. If I am testing the app, so it's working well. But then I wanted to test the app by my friend - so I assigned him the role "Tester", he accepted it and I sent him the link to the app.
If he opened the app, he got the error The website is not available - Error 501 (net::ERR_INSECURE_RESPONSE): Unknown error
I started google it and it looks that the cause is the missing SSL certificate on my hosting, where the app is stored.
BUT - how is possible, that the app is working me well without the SSL and to my friend doesn't? If the SSL is required for Facebook apps, why I didn't get the same error?
(I set Secure Canvas URL: to https://example.com/fb-app-directory/, however I don't have at this domain and hosting any SSL certificate).
I never used before SSL. I bought the domain name on Namecheap and hosting on Hostgator. So now, I should buy a SSL certificate from the offer (http://www.namecheap.com/ssl-certificates.aspx) of Namecheap, right?
Would be suitable for the Facebook app the cheapest one?
Look, this SSL problem can only be solved by purchasing a valid SSL certificate or looking for a server which can host your app and is SSL certified such as:
phpfog.com - Provides you with some limited space and database service.
heroku.com - Does not provide any storage space for saving dynamically generated data. To have that service, you have to buy the Amazon buckets service which, again, is a costly affair.
If you don't want to invest any money, I would recommend that you go with phpfog - it is easy and its documentation is pretty good.
You should buy an SSL cert in order for everyone to be able to access your app. Your friend probably has his settings set so that he browses Facebook securely, in this case he is hitting https://example.com/fb-app-directory/, not your actual URL.
The cheapest one isn't the best one, but it should work as long as it's valid. I would suggest using Heroku though, as that way you get everything you need - for free :)
Use a proxy in heroku.com and bring your page in secure domain as https://yourapplication.herokuapp.com/
"Starting October 1, 2011 Facebook will require a valid SSL Certificate for all pages and applications hosted outside of Facebook."
http://www.wpcode.net/fb-ssl.html/
Maybe you are visiting your application with http://apps.facebook.com/... and your friend is visiting with https://apps.facebook.com/....
Another possibility is that your friend has checked "Browse Facebook on a secure connection (https) whenever possible" under "Account Security".
Try ngrok. It exposes a local web server with just one command:
ngrok 80
After this you can access your localhost like this: xxxxxxxx.ngrok.com