I am trying to diagnose why I am getting a blank popup when I attempt to authenticate to facebook when using IE.
To start, I want to make sure my environment is setup correctly. I do not have the xd_receiver.htm in the root of my website.
Q: What is the purpose of the xd_receiver.htm and is it needed for use with the facebook-c#-sdk 5.0.3?
Q: If required, does the xd_receiver.htm file need to be only in root or in multiple locations?
Since my app is simple, I am using the following code snip to login. Once I get logged, I use the facebook-c#-sdk to do some simple POST to me/feed.
<fb:login-button ... />
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({ appId: '<%= System.Configuration.ConfigurationManager.AppSettings["FacebookAppId"] %>', status: true, cookie: true, xfbml: true });
function facebook_onlogin_ready() {
// refresh page
window.location.reload(true);
}
</script>
Any thoughts on why IE is through a blank popup would be appreciated.
Thanks in advance.
Steve
xd_receiver.htm is not required. That was part of the old Javascript SDK. There are a couple of reasons why the popup wouldnt be working in IE. 1) If you are not on port 80 or 443. Facebook's Javascript SDK has a few bugs in IE with non-standard ports. 2) Try setting up your app to run on IIS using a real domain. (You can use local.facebooksdk.net as it points to 127.0.0.1) 3) Make sure your site url match the url you are running your site in exactly. Those config settings are very important.
Related
For my internship project I'm working on, a java webapp, I need to send notifications to a not fully HTTPS website. OneSignal offers the possibility to do so.
At first, to test their service, I hardcoded direclty the client SDK javascript inside some <script> tags in my jsp file and it worked fine.
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "my-app-id",
autoRegister: false,
notifyButton: {
enable: true
}
}]);
</script>
However, I had to move my javascript into a js file as the development rules of my company specify that javascript should not be in a jsp file. So I linked the code to a button to manually activate it using document.querySelector('.id-foo').addEventListener('click', initOneSignal).
The javascript file is then dynamically loaded at the footer of my jsp.
Here is my js file :
(function() {
document.querySelector('.js-initOneSignal').addEventListener('click', initOneSignal);
function initOneSignal() {
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "my-app-id",
autoRegister: false,
notifyButton: {
enable: true
}
}]);
};
})();
However, it's not working anymore (on Firefox only, no problem on Chrome) as I get this message from OneSignalSDK.js which tries to open an iFrame to https://my-app-name.onesignal.com/webPushIframe but is not able to and times out.
SecurityError : The operation is insecure
Apparently this is a bug https://github.com/OneSignal/OneSignal-Website-SDK/issues/95. The issue is marked as closed while I think it should be open again, newer version of Firefox might have changed something. Here is the link to the my github issue : https://github.com/OneSignal/OneSignal-Website-SDK/issues/359
Did someone encountered the issue and found a workaround?
Thanks in advance for any help !
PS : I'm using Firefox 60
PPS : The iFrame OneSignal tries to open :
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js"></script>
<script>OneSignal._initHttp({
appId: "myappid",
subdomainName: "mysubdomainname",
origin: "http://my-website"
});</script>
<link rel="manifest" href="manifest_json">
</head>
<body>
</body>
</html>
EDIT :
Still no response from OneSignal. Their "Support" link is not working.
I've found the solution ! and it was kind of obvious. I just needed to reset Firefox and it's working fine now. Thanks to this page which gave my the hint.
This issue was related to the fact I'm switching between HTTP and HTTPS configurations in order to test differents webpsuh solutions/service. To do so, I have to use a custom SSL certificate to fake being on a fully HTTPS website and add a security expection in Firefox. When coming back to HTTP, my Firefox configuration was sill affected by this exception somehow and therefore Firefox was throwing a Security Error.
I'm using Soundclouds JS sample code for client side JS apps to connect with the Soundcloud API, as a start. The only difference between their code and mine is I've put in my own client_id and redirect_uri. (I also copied their callback.html, put it on my server, put its address in the soundcloud page for my app).
After ok-ing with my popup blocker, the auth popup comes up and asks permission to access my account, I give it permission, then the popup clears all previous content and simply informs: 'This popup should automatically close in a few seconds' - but it doesn't, and the rest of the code that shows its past authorization never displays.
Here is Soundclouds sample that I'm using. I've tried it while using a server on localhost and also deploying it and changing redirect_uri appropriately with the exact same results.
SC.initialize({
client_id: 'YOUR_CLIENT_ID', // changed it to mine
redirect_uri: 'http://example.com/callback'
});
SC.connect().then(function() {
return SC.get('/me');
}).then(function(me) {
alert('Hello, ' + me.username);
});
Looking in the dev console on both Chrome and Firefox, I dont see any errors. I've also made sure the protocol for my redirect_uri file matches between my account settings and the code.
Does the 'Website of your app' field on the Soundcloud page for my app make a difference? I tried setting it, it didnt fix it. What does client secret do?
The closest to an answer I've found so far is from this SO page where it seems he found out that you can't use an url that doesn't start with 'www.' ??? Its hard for me to believe that this is the problem and unfortunately for me neither localhost or my domain start with www.
Thanks in advance for any help.
In your callback.html, change the line:
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
to:
<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">
In your application setup page at soundcloud.com, ensure your website setting and callback uri are on the same domain (whether that is localhost or the production domain) and all should work.
Note: for debugging, comment out this line to leave the popup there deliberately, then console can be used to interrogate other code in the callback.html page.
I am attempting to use Google Sign-In for Websites (https://developers.google.com/identity/sign-in/web/) and noticed that my solution is not working in Internet Explorer 11. To try to eliminate as many factors as possible, I created a simple test case based on the sample code provided by Google.
I've tested it in Chrome on my Windows 7 PC, Chrome on my Mac, Safari on my Mac, Firefox on my Mac and Safari on my iPhone. It works on all of these (e.g., when I click the sign in button and select/enter my Google account, it returns to the page and the button says, "Signed in").
It does not, however, work on Internet Explorer 11 on PC or, strangely enough, Chrome for iOS. When the button is clicked, a window opens to allow me to select my Google account, but after making a selection, the window closes and returns to the page with a button that still says, "Sign In."
Here is the sample code:
<html>
<head>
<meta name="google-signin-client_id" content="61023618497-vqfbod57f26ncjl9d6firk3t09ve4tt3.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2"></div>
</body>
</html>
Any ideas as to what might be going on? I've searched around and have not found any solutions.
One idea was to add "accounts.google.com" to IE's Trusted Sites. This didn't work. I also tried accessing the page via https instead of http. That didn't make a difference either. Anything else I should try?
I ran into the same problem now, a few months later.
If you look at:
https://developers.google.com/identity/sign-in/web/build-button
and try a signin with their demo button, it does not work with IE11 (but it works with other browsers I am using at different OS). I could not find any solution.
I am leaving the comment for a future reader, who searches for the same problem in the future. If the demo button at Google does not work, she can at least rest assured that the problem is probably not in her code. :)
Be sure that you don't have IE 11 configured to block all third party cookies.
Third party cookies are required, and the user experience that occurs when third party cookies are blocked--as you've discovered--leaves much to be desired. There is no warning or error message presented to the user.
You could try to catch the error before it happens. It is possible to detect whether or not third party cookies are blocked by trying to set a cookie on a second domain (that you control) and then making a second request to ensure the cookie is set. You'll need a script or something on your server that can set and check for the cookie (it can't be done using only JavaScript because of the browser security model).
I've had success doing the following:
Loading the script to initiate the Google button rendering etc. from $document.ready. (i.e.Whatever you have in the apis.google.com/js/client:platform.js?onload= x )
e.g.
<script src="https://apis.google.com/js/client:platform.js?onload=startApp" async defer></script>
Move startApp() to here:
$(document).ready(function () {
startApp();
Where startApp() looks something like this:
function startApp() {
gapi.load('auth2', function () {
gapi.client.load('plus', 'v1').then(function () {
gapi.signin2.render('signin-button', {
scope: 'https://www.googleapis.com/auth/plus.login',
fetch_basic_profile: false
});
gapi.auth2.init({
fetch_basic_profile: false,
scope: 'https://www.googleapis.com/auth/plus.login'
}).then(
function () {
console.log('init');
auth2 = gapi.auth2.getAuthInstance();
auth2.isSignedIn.listen(updateSignIn);
auth2.then(updateSignIn());
});
});
});
}
I struggled to get the example to work on localhost, but as soon as I deployed it to the real URL, it worked.
Me an my team are currently working on a software project at university and my present task is to bind our desktop javafx application with Facebook.
Basically I have an fxml method in a controller that is called when the user hits a "Share" button in my GUI. In the method I'd like to simply open up my .html file using a WebView:
#FXML
public void shareFacebookClicked() throws Exception{
// Setting up the webview
WebView webView = new WebView();
final WebEngine webEngine = webView.getEngine();
webEngine.setJavaScriptEnabled(true);
// Read the html file and let the web engine load it.
File file = new File(getClass().getClassLoader().getResource("facebook.html").toURI().getPath());
webEngine.load(file.toURI().toURL().toString());
Stage stage = new Stage();
stage.initOwner(this.stage);
stage.setScene(new Scene(webView, 1000, 800));
stage.show();
}
There is no problem with it, my "facebook.html" file is loaded and displayed correctly (well, almost correctly) in a web view.
The actual problem is that I'm constantly getting the 191 Facebook error saying that the link is not owned by the application. Since there are tons of posts and questions on this around the Internet (and yes I checked and read all of them) here are the things that I'm already aware of:
I registered my application on the Facebook Developer site. I know about the AppID and Secret
I know that this error mainly comes from the fact that people forget to set their website URL and domain in the Settings. The problem is that I don't have a website. I just have a simple .html file which I'd like to use in a web view inside of javafx. However, I tried all possible combinations advised on stackoverflow, facebook help centre and other forums which include: Setting website URL to http://localhost/, domain to localhost, enabling Embedded browser OAuth Login, setting the redirect URI to localhost too, etc.
I assume that my goal could be achieved by using RESTfb, Facebook4j or Graph API. When I tried those I had to stop because I faced problems with the user authentication plus I thought this current option would be the easiest way (considering this feature has LOW-priority in our software).
None of this solved my problem therefore I've given up researching the answer and decided to post my very own personal question.
In my opinion there must be some error in the .html file and/or I completely misunderstand something in the way this works. The .html file:
<html>
<head>
<title> Share on Facebook </title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js"></script>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#shareonfacebook').click(function (e) {
FB.ui({
appId: 'MY_APP_ID',
display: "popup",
method: "feed",
name: "Test",
link:"",
caption:"Test",
description: "Test",
});
});
});
</script>
</head>
<body>
<div id="fb-root"></div>
<button id="shareonfacebook" >Share</button>
<script>
FB.init({
appId : 'MY_APP_ID'
});
</script>
</body>
</html>
Partially I have this code from a tutorial site. Theoretically it should work. All I want is a dialog to come up where the user can publish the results of the workout he/she completed using our software. Currently when the .html file is opened up there is a simple button to click. This and all the "Test" strings inside of the javascript are only for testing. I just want to achieve that I can post something on my wall. The next step would be of course to somehow set the posting text dynamically etc.
Please tell me what I'm doing wrong or how I should approach the whole thing. Like I said, the task is minimal therefore it shouldn't be that difficult but I've been sitting in front of my laptop for 2 days without any success. I'm ready to post more code or give more information if it's needed.
Thank you for the help in advance!
I want to use the facebook share plugin for the web app I am working on, I only need the basic share button. The app uses requirejs for loading javascript, so I followed the how-to and changed the facebook api url to the one found in code snippets on facebook docs. This doesn't work and the sdk throws error invalid version specified. This is how my files look.
main.js
require.config({
shim: {
'facebookshare' : {
exports: 'FB'
}
},
paths: {
'facebookshare': "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0"
}
});
require(['fb']);
fb.js
define(['facebookshare'], function(facebook) {
document.body.innerHTML += '<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button"></div>';
});
What is the best way of including only the facebook share plugin with requirejs?
I referred following questions, but none of them provide a concrete solution. Uncaught error: no version specified and wrong version error.
I was also getting the following error even when using the standard embed code that Facebook provides.
Uncaught Error: invalid version specified in sdk.js
The first thing to check is that you're including the version number in your FB.init call:
FB.init({
appId: 'your-app-id',
xfbml: true,
version: 'v2.8'
});
The now-outdated fix...
...was to make a simple tweak and changed the path:
From: //connect.facebook.net/en_GB/sdk.js
To: //connect.facebook.net/en_GB/all.js
And this fixed the error. Unfortunately I have no idea why. :-(
Consider including a version parameter to the src property as shown below:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"
The default template on Like button for Web is incomplete; upon clicking on the "Get Code" button Facebook will generate you a complete template with the version parameter included.
Minor heads up, I had to change
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
to
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
I ran into this problem when I was changing my file from HTTP to HTTPS. The reason was the lack of specific "HTTP:" or "HTTPS:" in the following code:
<div class="fb-comments" data-width="100%" data-href="//amazingjokes.com/image/2017-03-17/A_good_sign_for_St__Patricks_day" data-num-posts="5"
data-colorscheme="light">
</div>
normally the '//domain.com' copies the scheme we're on, so when you're on htts://example.com a link to '//example2.com' will seen as 'https://example2.com'. For the 'fb-comments' you'll need to specifically state HTTP or HTTPS for the data-href.
Also note that 'https://example.com' according to facebook is another page than 'http://example.com'. So if you upgrade your site for SSL you will lose all past comments if you change the URL in the social plugins from HTTP to HTTPS... The solution I chose was to use HTTP for all older posts, and HTTPS for everything recent
There is (or was) an error in the source code on the Facebook Share Button Configurator! page. If you use the Share Configurator on the page, it should work fine. However there is a code example on the page that says 'Copy & paste the code example to your website...', which is bad code and will result in the button not being visible on your page. The javascript console will show 'Error: invalid version specified'.
I opened a ticket with Facebook in June of 2018 regarding this issue. They have acknowledged that it's a problem with the code and promised to fix the code example, but as of June 17, 2018 the bad code is still there on the site.
Hope this helps.
I changed the original sdk.js to all.js that resolved my problem :
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/all.js"></script>
And carefully change your language for me it's french 'fr_FR'
I took my original script from here : https://developers.facebook.com/docs/plugins/page-plugin/