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.
Related
I hope someone can help.
We have been using Google's Save to Drive button API, version 3 for quite a while to save documents generated by our system to a user's Drive. This stopped working some time last week.
The error that is thrown in the JS console is:
Uncaught ReferenceError: _createSaveToDriveWidgetApplication is not defined
at https://drive.google.com/savetodrivebutton?usegapi=1&src=(redacted URL)&filename=My%20Statement.pdf&sitename=My%20Company%20Name&origin=https%3A%2F%2F(redacted URL)&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.sedaY3Dv4HE.O%2Fam%3DwQE%2Fd%3D1%2Fct%3Dzgms%2Frs%3DAGLTcCO2t4glYwUJ-eH43TAA_offcn6l6Q%2Fm%3D__features__
So I set it up from scratch using the demo source found here on google's API docs.
My test source code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Render</title>
<link rel="canonical" href="https://(redacted)">
<script src="https://apis.google.com/js/platform.js"></script>
<script>
window.___gcfg = {
parsetags: 'explicit'
};
</script>
</head>
<body>
Render the Save to Drive button
<div id="savetodrive-div"></div>
<script>
function renderSaveToDrive() {
gapi.savetodrive.render('savetodrive-div', {
src: 'https://(redacted)/go.php',
filename: 'My Statement.pdf',
sitename: 'My Company Name'
});
}
document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
</script>
</body>
</html>
The redacted text are URLS, both exactly the same protocol, host, domain and port. Further, the content being retrieved is begin served with the following response headers:
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range
even though I don't need the Origin header as CORS is not used or necessary here.
I have tried Chrome, Safari, Firefox on MAC and Windows and the result is always the same - when calling gapi.savetodrive.render, it stops with the error:
Uncaught ReferenceError: _createSaveToDriveWidgetApplication is not defined
I really do not know what else to do, thus my query here. I Have Googled that error message and there is really absolutely NOTHING about it to be found.
This seems to be a bug.
Save to Drive button is not getting displayed when added to an HTML document. Instead, the following error is displayed in the console:
Uncaught ReferenceError: _createSaveToDriveWidgetApplication is not defined
This has been reported at least twice in Issue Tracker during the last days:
Google Drive - "Save To Drive" - Widget button not loading or displaying correctly
Bug with "save to drive " button
The first of these issues has been getting some traction: currently 3 people have starred it, and it has been reported internally by Google (see comment #4):
Thank you for filing this report, I was able to reproduce the behaviour so have forwarded it internally.
To anyone affected by this, I'd suggest starring this issue in order to give it more visibility.
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 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.
I am trying to get the facebook connect stuff working on my localhost. In FireFox and Chrome it works perfectly. In Internet Explorer:
an error appears in the connect dialog. This is:
Invalid Argument
The Facebook Connect cross-domain receiver URL (http://static.ak.fbcdn.net/connect/xd_proxy.php#?=&cb=f1e33405f2824e9&origin=http%3A%2F%2Flocalhost%2Ff78888c44d2c37&relation=opener&transport=flash&frame=f144cb110fc0cc&result=xxRESULTTOKENxx) must have the application's Connect URL (http://localhost:8080/) as a prefix. You can configure the Connect URL in the Application Settings Editor.
when the authentication succeeds Internet Explorer redirects in the popup to a page on localhost i.e. my facebook connect URL. With Chrome and Firefox it closes the popup and allows the handler to reload the page.
This is very frustrating, as the behaviour in Chrome and Firefox is perfect. Please can you provide some advice - I really am stuck with this. My HTML code is below:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml"
xml:lang="en" lang="en">
<fb:login-button></fb:login-button>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'MY_APP_ID', status: true, cookie: true,xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
Thank you.
I think this is a bug in the facebook javascript (details in the forum post).
I found a workaround: Using http://127.0.0.1:8080/ in the browser instead of http://localhost:8080/ appears to work in all three of Internet Explorer, Firefox and Chrome.
Just in case other people stumble here and don't catch this in OP's code, this worked after I added the xmlns:fb attribute to my html open node:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
Thanks to the Facebook developer forum, I have my answer. This strange behaviour is caused by using a port number in the Facebook Connect URL i.e. not the standard port 80 which doesn't need specifying in your URL.
The full answer is here:
http://forum.developers.facebook.com/viewtopic.php?pid=232589
Also, make sure this tag is right after your body tag: <div id="fb-root">
As Saxon Druce pointed out, the answer marked correct no longer works. I was able to solve my issues with the Fb.login() popup window in IE11 running on localhost by doing two things (I am using visual studio 2013):
1) Run VS 2013 as an Admin and, in solution properties, change the project url to: http://localhost/
2) Reflect the url change in your Facebook app settings in the developer portal