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).
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
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
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.
