Google Save To Drive API v3 stopped working - javascript

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.

Related

Calling API from webpage for Alexa Skill Account Linking using Google OAuth

I have written an interface to use with an Alexa Smart Thermostat skill. I am using Google Oauth for credential checking and I followed the guide here: https://nicogaspa.medium.com/alexa-skill-account-linking-with-google-apis-2cbad07d2cf8 which has also been discussed here: Alexa skill account linking with Google APIs credentials, problem refreshing token
This has worked well for me until recently when I found that the skill had stopped working and I was unable to re-enable it. There are two problems that I am aware of:
The Google API appears to have changed and the Authorization URI now requires a number of mandatory parameters – client_id, redirect_uri, response_type & scope. I have added all of these to the URI specified on the Account Linking page in the Alexa developer console and the account linking now works OK (including the automatic refreshing of the token).
Having added the mandatory parameters, I have tried to get this to work on the HTML page that I used from Nicolo’s blog. I have been unable to get this to work, because Google complains with: “OAuth 2 parameters can only have a single value: client_id” (the reference to client_id is a red-herring as it changes depending on what’s included in the string). From searching around, it would appear that this is caused by having the parameters in the body and the header of the request. However, I can’t find a way to prevent this from happening. My HTML page looks like this:
<html lang="en-us">
<head>
<title>Your Skill</title>
</head>
<body>
<div>
<p>Welcome to the skill</p>
<p>Click on the button to continue</p>
</div>
<script language="javascript" type="text/javascript">
var urlParameter = window.location.search.substr(1);
</script>
<a href="https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&response_type=code&client_id=MYID.apps.googleusercontent.com&redirect_uri=https://layla.amazon.com/api/skill/link/MYURI&scope=https://www.googleapis.com/auth/userinfo.email"
onclick="location.href=this.href+urlParameter;return false;">
Login
</a>
</body>
</html>
Any ideas on how to call the api from the body of a webpage without including the parameters in the header and the body?
Thanks.

Uncaught Failed to get parent origin from URL hash

I am trying to setup google sign in for my web app. Currently, it is In the development state and running on http://localhost:8080/auth. I am using default Sign-In button provided by Google for user sign in. Whenever a new iFrame opens for user authentication, it hangs infinitely. When I checked a console, the following error message was shown there:
Uncaught Failed to get parent origin from URL hash!
Don't know what is the problem. I searched on various platforms but didn't find the solution anywhere, not even a thread discussing the issue. Similar questions are available on SO (1 and 2) but they are unanswered. This is how my simple HTML code looks like:
<html>
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="client-id-prefix.apps.googleusercontent.com">
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>
Can somebody please help? It will help me and probably other 2 guys who had asked this question today itself.
I found the mistake. I had not registered my domain under Credential -> My OAuth Client ID -> Authorized JavaScript origins. By adding, it started working.
Here are your credentials: https://console.developers.google.com/apis/credentials

SecurityError with HTTPS iFrame on Firefox

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.

Basic Google Sign-In for Websites code not working in Internet Explorer 11

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.

Facebook Connect / Graph - problems in Internet Explorer with fb:login dialog (not closing)

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

Categories

Resources