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
Related
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.
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 making a simple login page with JavaScript and Firebase except I keep coming across this error
Untaught TypeError: Firebase.database is not a function
After searching the internet and trying everything, I still have no results. The problem persists on the signUp page when signing up for an account.
I have got to the point where the account will be made and can be seen, but in my real-time database in Firebase console nothing shows up where I am trying to write in the database that I want the inputted ‘firstName’ there.
I have attached the code below:
—Login
https://jsfiddle.net/jLf5q34o/
—SignUp
https://jsfiddle.net/dq8o1tLv/
—I also have the full project online at:
https://inputgeo.com/experiment/
I would appreciate any help from anyone. If I haven’t explained this very well please let me know and I will try to explain this again.
Checking the script requests, you haven't imported firebase-database
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-database.js"></script>
I'm trying to embed "Authentication via Google" to a simple web app I am working on. I used following code to do this.
<html>
<head>
<title> Home </title>
<script src = "https://apis.google.com/js/platform.js?onload=onLoadCallback" ></script>
<script>
function changePage() {
if (!gapi.auth2.getAuthInstance().isSignedIn.get()) {
window.location.href = "login.jsp";
}
}
</script>
<script>
gapi.load('auth2', function () {
gapi.auth2.init().then(changePage);
});
</script>
<script>
</script>
<script>
var user;
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
user = auth2.signOut().then(changePage);
}
;
</script>
<meta name="google-signin-client_id" content="xxxxxxxxxxxx">
</head>
<body style="background-color:azure;">
<div class="vertcal-center">
<div class="myclass">
<h1>Welcome to home page
</h1>
<button type="button" class="button" onclick="signOut()">Log Out</button>
</div>
</div>
</body>
</html>
However, when I ran ZAP analysis on my code, it gives me a Low Risk alert saying "The page includes one or more script files from a third-party domain" . It points to following line as the line with the issue.
<script src = "https://apis.google.com/js/platform.js?onload=onLoadCallback" ></script>
I refer OWASP tutorial which describes about this issue, and I understand that this can introduce the 3 risks they have mentioned which are
The loss of control over changes to the client application.
The execution of arbitrary code on client systems.
The disclosure or leakage of sensitive information to 3rd parties.
However, I also understand that if I am going to use Google authentication, I'll have to trust Google and assume that they won't do anything bad here.
Is there any better way to do this in my code so that ZAP will not warn me?
Is it okay to ignore this alert?
What ZAP looks at is the hostname of your web page and the hostname of the embedded javascripts.
Since your website hostname will not be google.com anyway, ZAP will always complain.
Only thing is we are trusting the external JS.
But you can download the external JS file and host it within your web app.
That way you are calling your own JS file and then ZAP will ignore it.
However, if google modifies the JS file after that, your local JS file won't get the new modifications. So my opinion is you can justify this and ignore the issue in ZAP report.
When you are using external javascripts, make sure to check if they have any reported known vulnerabilities. You can refer [1] to know more information for a similar topic.
[1] https://medium.com/#PrakhashS/using-retire-js-with-zap-to-identify-vulnerabilities-in-javascript-libraries-7baad56690aa#.cotei58mk
The way this rule works is described in the help that comes with ZAP, which is also available online: https://github.com/zaproxy/zap-core-help/wiki/HelpAddonsPscanrulesPscanrules#cross-domain-script-inclusion :
Cross Domain Script Inclusion
Validates whether or not scripts are included from domains other than the domain hosting the content. By looking at the "src" attributes of "script" tags in the response. Allowed Cross-Domain scripts:
Any script with a non-empty "integrity" attribute is ignored - the
integrity value is not checked as this will be checked by the browser
At MEDIUM and HIGH thresholds if a script URL falls within a context that also includes the URL of the base message no alerts will
be raised.
So you can either specify an 'integrity' attribute or create a context and include in it all of the domains you trust.
I am seeing ReferenceError:gapi is not defined error when accessing the Google+ APIs from my HTML code.
My code is very simple, but not sure what is wrong with it.
Any inputs would be highly appreciated.
Please see my code below:
<html>
<head>
<title> Some title here </title>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
function handleClientLoad(){
gapi.client.setApiKey('MY API KEY HERE')};
</script>
<script src="https://apis.google.com/js/client.js? onload=handleClientLoad"></script>
</head>
<body>
</body>
</html>
Error is
Execution failed: ReferenceError: "gapi" is not defined
I'm not sure if this is the answer, but I notice that there is a space between "client.js?" and "onload=". This might not be in your original code, but it does cause the client.js request to return different code.
I was able to fix the issue. I should have added more details to the question but didnt thought that the issue could be somewhere else. Sorry for the same.
When we create a Web App project in Google Drive, the javascript code which runs on the server and the code which runs on the client(a browser) should be specified in different files. These files are Code.gs and JavaScript.html respectively. "gapi" is a client code (defined in client.js) and I was referencing to it in the server file. Since server code is running in the Google servers, it has no clue about our client.js and platform.js libraries. Hence the error. When I moved the error causing code to JavaScript.html, it worked fine.
Thanks.,