Google Sign-in is not working - google-api

I tried to use Google Sign-in for my website, however, it keeps giving me 400 error.
I referenced this article: https://developers.google.com/identity/sign-in/web/sign-in, and my code is really simple:
<html>
<head>
<title>Test Google Login</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="<CHANGE IT>">
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
}
</script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>
When I click Sign-in button, it popups a window, and after logged in, it gave me 400 error as below:
400. That’s an error.
The requested URL was not found on this server. That’s all we know.
I guess it's redirect issue, but I don't know how to configure it. So I checked url it returned to me:
https://accounts.google.com/o/oauth2/auth?fetch_basic_profile=true&scope=email+profile+openid&response_type=permission&e=3100087&redirect_uri=storagerelay://http/127.0.0.1:8000?id%3Dauth867179&ss_domain=http://127.0.0.1:8000&client_id=378468243311-9dt7m9ufa9mee305j1b12815put5betb.apps.googleusercontent.com&openid.realm&hl=en&from_login=1&as=1b5f0a407ea58e11&pli=1&authuser=0
Why is redirect_uri "storagerelay://http/127.0.0.1:8000?id%3Dauth867179"?

Your code should work now.
Google fixed this issue. Origins with a trailing slash are also accepted now (Origin can be set in Google Developers Console > APIs & auth > Credentials).

Redirect URIs
http://localhost:8000/ this **/** at end solve my problem
JavaScript origins
http://localhost:8000
NOTE: localhost and 127.0.0.1 conflicts can create problems for you sometime

Hi I faced exactly same problem.
Regarding my case, the problem is that OAuth try to redirect to url of "127.0.0.1?id=authxxxxx" where xxxxx is random 5 digits.
Thus I added following four urls at Redirect URI Google Developers Console.
I am not sure which one hits the rule, but I could workaround with this
(1) http://127.0.0.1/*
(2) https of (1)
(3) http://127.0.0.1
(4) https of (3)
Hope it also works for you.

To test on localhost environment, here's things we should to do:
Add "http://localhost:8000" to "JavaScript origins"
Remove everything from "Redirect URIs", because JavaScript API doesn't need any redirect URIs
[1] https://developers.google.com/identity/sign-in/web/devconsole-project

I'm also having the same problem, and was able to get past it by using "localhost" instead of the ip address. It's not a great solution, but it was sufficient for me to continue debugging in dev, so I just thought I'd mention it.
edit: keep in mind that you will have to add http://localhost to your Google Oauth Javascript Origins.

I had the same problem yesterday. I had OAuth credentials with localhost and my-server.com. So, I fixed this problem creating a new OAuth credentials only for my-server.com, without localhost. Obviusly, my app uses these new credentials.

I found out that error disappears after clearing ACCOUNT_CHOOSER accounts.google.com cookie.

Replace everywherehttp://127.0.0.1:8000/ to HTTP://localhost:8000/even in your browser too. The Problem comes when you use http://127.0.0.1:8000/ either in the developer console or a browser.

Related

Recaptcha api gives internal server error [duplicate]

I'm using the new Google reCaptcha API for a contact form inside a page on my wordpress instance, but the API returns a 500 Internal Server Error message when using the script given by Google.
So, I'm using this code to make it work
$siteKey = "sitekey";
$secret = "secretkey";
$lang = "it";
$resp = null;
$error = null;
$reCaptcha = new ReCaptcha($secret);
if ($_POST["g-recaptcha-response"]) {
$resp = $reCaptcha->verifyResponse(
$_SERVER["REMOTE_ADDR"],
$_POST["g-recaptcha-response"]
);
}
and, on the HTML:
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="<?php echo siteKey; ?>"></div>
But, when i open that page, the only thing I see is this:
An error occurred:
An internal error occurred: 50C0C9A3E5F28.AB460A3.4C003672
By the way, on Google Chrome console i can click on the URL generated by the API's script, and, when I open it, I see a blank page with the reCaptcha I needed.
Could it be a conflict between Google reCaptcha API and Wordpress or is it just an API's error?
you got this error because you didn't put in your domain into Key Settings in recaptcha admin site or basically wrong domain.
I've solved the problem, but the funny thing is that I don't know how, I've just re-copied the code from Google Documentation, maybe there was a mistyping.
Anyway, problem solved.

Ajax Request gets blocked in Firebug but works in Genymotion. Why?

I am trying to build an "app version" of my website (a social network).
I am using PhoneGap + jQuery Mobile (i started learning them today).
The app simply needs to retrieve new posts from the website and show them to the user. Therefore I thought a simple Ajax Request would do the job.
So, i created a php test file on the server (URL: http://www.racebooking.net/it/moto/app/get_post_test.php), which simply Echoes Alien contact SUCCESS!
I've made a simple html page in localhost (on my PC) called index.html with a div called #post-container and an AJAX request:
var root = "http://www.racebooking.net/it/moto"
$.get(root + "/app/get_post_test.php", function(data){
$("#posts-container").html(data);
});
If everything is correct, i expect to see Alien contact SUCCESS! in the post-content div.
What happens looks strange:
If i run the app from eclipse using Genymotion, everything works fine
and i see the message Alien contact SUCCESS! -> the AJAX request
went fine
If i open the index.html file on firefox, i don't see anything
and FireBug informs me that the cross-origin request was blocked.
He also tells me to activate CORS.
1) Why is that happening and how can i make FireBug work (which is better and faster for debugging)?
2) Am i following the right procedure or i am missing something?
I found the solution from this post.
I just needed to add header('Access-Control-Allow-Origin: *'); at the top of my php file.

Angular JS $http request does not reach the server in ie8

I'm having issues with using $http on ie8. The request does not reach the server, until I hit a refresh. Coming back to the same link still has the same problem until I hit refresh again.
The weird thing is if the web server is on LAN and the request is made to a server in LAN, it works fine. But if the webserver is hosted remotely, it does not work!
Here is the code:
Index.html
{{test}}
Controller
app.controller(
"TestController",
function( $scope, $http) {
var url = '/test/get_data';
$http.get(url).success(function(data) {
$scope.test = data;
});
}
);
I got this error: TypeError: Object doesn't support this property or methodundefined
I prepared a JSFiddle earlier but JSFiddle is broken in ie8 so I don't provide it here.
Unfortunately I don't have a remote server that I can share with you.
Edit
Previously I used an external url which gave me 'Access Denied' error in ie because of Same Origin Policy as mentioned by one answer below. But this was not my original problem. I still have the issue above when request is from the same origin
This is a cross domain request, which is not allowed in ajax because of Same Origin Policy.
There are two solutions for this
1. JSONP: It is a cross browser way to handle cross domain ajax requests using javascript callback mechanism
2. CORS: It is a HTML5 standard, it is implemented by most of the modern browsers except IE
Mongodb lab is not supporting jsonp since it has support for CORS, that is why your request is failing in IE and works in Chrome and other browsers.
As per this post they do not have any plan to support jsonp, so I don't thick there is a way to make this work in IE.
So I found the fix... Hope this helps anyone out there that experience this problem
Angular script needs to be loaded after jQuery. I didn't have this because Yii framework that I use autoloads jQuery and the angular was not included after the jQuery.
All the controller functions need to be at the end of body section (just before the closing )
Updating to angular 1.0.5 seems to fix the problem. The problem occurred in 1.0.4 with all the above tricks. I think is related to fix 791804bd

Hitting timeout using Recaptcha in ASP.NET Options

need some advice/help here.
I just started using the Recaptcha library of ASP.NET from this link
I've followed the simple guide on that page and it worked well with localhost deployment and development.
However, after I moved the same simple page with Recaptcha to my company's server to test the page out, I hit the below exception when trying to validate the recaptcha word.
The operation has timed out
I suspect it has something to do with SSL but my company's website
that I browse, isn't using https, it is just http. I have tried both
methods, having the recaptcha to set OverrideSecureMode to "true" - it
didn't work, set it to false, it didn't work as well (such as below)
<recaptcha:RecaptchaControl
ID="recaptchaControl1" runat="server"
OverrideSecureMode="True"
PublicKey="My_Public_Key"
PrivateKey="My_Private_Key"
/>
My code behind, I'm just using a simple button to invoke and display a
text which work on localhost in Visual Studio:-
if (Page.IsValid)
{
// do the stuff
}
else
// show the error message from recaptcha
What can I do to fix this issue?? Please help.
Sounds like a problem with firewall settings on your company servers. reCAPTCHA requires port 80 outbound (not inbound) to Google servers.

Can XDomainRequest be made to work with SSL?

I have code that uses Microsoft's XDomainRequest object in IE8. The code looks like this:
var url = "http://<host>/api/acquire?<query string>";
var xdr = new XDomainRequest();
xdr.onload = function(){
$.("#identifier").text(xdr.responseText);
};
xdr.open("GET", url);
xdr.send();
When the scheme in "url" is "http://" the command works fine. However, when the scheme is "https://" IE8 gives me an "Access denied" JavaScript error. Both schemes work fine in FF 3.6.3, where I am, of course, using XmlHttpRequest. With both browsers I am complying with W3C Access Control. "http://" works cross origin for both browsers. So the problem is with IE8, XDomainRequest, and SSL.
The SSL certificate is not the problem. If I type https://<host>/ into the address bar of IE8, where <host> is the same as in "url" above, the page loads fine.
So we have the following:
- hitting https://<host>/ directly from the browser works fine;
- hitting https://<host>/api/acquire?<query string> via XDomainRequest is not allowed.
Can it be done? Am I leaving something out?
Apparently, the answer is here: Link
Point 7 on this page says, "Requests must be targeted to the same scheme as the hosting page."
Here is some of the supporting text for point 7:
"It was definitely our intent to prevent HTTPS pages from making
XDomainRequests for HTTP-based resources, as that scenario presents a
Mixed Content Security Threat which many developers and most users do
not understand.
However, this restriction is overly broad, because it prevents HTTP
pages from issuing XDomainRequests targeted to HTTPS pages. While it’s
true that the HTTP page itself may have been compromised, there’s no
reason that it should be forbidden from receiving public resources
securely."
It would appear at present that the answer to my original question is: YES, if the hosting page can use the "https://" scheme; NO, if it cannot.

Resources