I am trying to enable users to log into my page using Google Social Sign On.
This worked in development and now I am going to production with it. It is a resume project.
To start the login process I click an anchor tag which redirects me to https://www.example.com/api/auth/google which Nginx sends to my backend endpoint: this.router.get("/google", googleAuth); which performs some magic to redirect the user to a page that formerly showed my 3 Google accounts.
This page fails and says "Access blocked: This app’s request is invalid"
I click to see error details and get
Error 400: redirect_uri_mismatch
You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.
If you're the app developer, register the redirect URI in the Google Cloud Console.
Request details: redirect_uri=http://localhost:8000/auth/google/callback
I am expecting it to redirect to https://www.example.com/api/auth/google/callback
In my Google console for this application I click under OAuth 2.0 Client IDs and see that my "Authorized redirect URIs" lists one singular entry where I expect to look and see "http://localhost:8000/auth/google/callback" : but it says https://www.example.com/api/auth/google/callback
It's like OK why not add the localhost:8000 value to the redirect URIs? Ok let's try it
Now I try clicking the Google button, and get redirected to a list of my available google accounts as I want. But now when I click one of them to be logged in, I get redirected to localhost, which is not what I want, I want my production URL:
This site can’t be reached
localhost refused to connect.
So what I want is for the redirect to the login page to come from my "example.com/api/auth/google" URL, and for the redirect to be sent to "example.com.api/auth/google/callback"
How can I make this happen? I think it requires nginx configured somehow.
edit to include code:
Here are the relevant controller endpoints
this.router.get("/google", googleAuth);
this.router.get("/google/callback", googleAuthCallback, this.grantAccessToken.bind(this));
googleAuth and googleAuthCallback:
export const googleAuth = passport.authenticate("google", { scope: ["email", "profile"], successRedirect: "http://localhost:3000" });
export const googleAuthCallback = passport.authenticate("google", { session: false });
My client side code that starts the redirect:
const GoogleButton: React.FC<{}> = () => {
const startGoogleSignInFlow = getEndpoint("/auth/google");
// the value is https://www.apartmentsneargyms.com/api/auth/google
return (
<a href={startGoogleSignInFlow} className="flex items-center">
<div className="w-full h-12 flex justify-center rounded-lg googleBtn">
<button className="flex items-center mr-4">
<img alt="google icon" src={GoogleIcon} height={24} width={24} className="mr-2" />
Google
</button>
</div>
</a>
);
};
I almost exclusively followed this guide to get here.
My nginx configuration proxies www.example.com/api to the backend server like this:
location /api/ {
proxy_pass http://localhost:8000/;
}
I'm suspicious the problem is that the Google services are hearing from me in the form of a request that starts with localhost:8000 because the redirects come from that location on my remote machine's network.
edit2: I want to say that I had this working on my local machine using localhost. It's deploying to prod that's difficult here.
Found the source of the problem. Linda Lawton - DaImTo was right to tell me to post my code. I found this in my passport config:
const passportConfig = (passport: any) => {
passport.use(
new GoogleStrategy(
{
clientID: googleClientId,
clientSecret: googleClientSecret,
callbackURL: "http://localhost:8000/auth/google/callback",
passReqToCallback: true,
},
// snip
}
On the following line:
export const googleAuth = passport.authenticate("google", { scope: ["email", "profile"], successRedirect: "http://localhost:3000" });
You've your local env URL hardcoded (http://localhost:3000), this value must be different in dev and production.
I have a microservice-based application that implements a dedicated user authentication and authorization service. This service has two API endpoints to login with Google: GET signin and POST callback. If GET signin is called, it will challenge the user by redirecting them to Google login, and after they sign in to Google, Google calls the POST callback API. The POST callback will sign in the user using the ID and access token it receives from Google, creates a local user, and returns its DTO.
I am trying to implement the Sign in with Google button in the UI. I am following Google's documentation on creating this button. Here is what I have so far.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: "...",
login_uri: "https://localhost:1234/signin",
ux_mode: "redirect"
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large", click_listener: onClickHandler }
);
function onClickHandler(){
window.location.replace("https://localhost:1234/signin")
}
google.accounts.id.prompt();
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
This setup works, but not as expected.
The interaction I expect compared to what happens:
User clicks on the Login with Google button;
[expect] A pop-up opens and redirects to https://localhost:1234/signin. [happens] full-page redirect to https://localhost:1234/signin;
https://localhost:1234/signin redirects to Google login;
After the user sign in, https://localhost:1234/callback is called, which will sign in the user and redirects to the page where the Sign in with Google button was clicked.
I expect the redirect to happen in the pop-up, so the callback redirect happens in the pop-up, and user does not experience a full-page refresh. However, using the above code, two full-page refreshes happen: (a) redirect to the login endpoint, then to Google, (b) Google to the callback, then to the page where the login button was clicked.
I have a page using google oauth on an intranet IIS server at: https://intranet/application
The same page is reachable at:
https://intranet.domain.com/application
For some reason, the g-signin2 - button always displays on page load for the non-FQDN link. The user has to click 'Sign In' and the dialog to select their account pops up every time. The FQDN link automatically signs in after first sign in.
I'd like the normal behavior of: after the first sign in, the user is automatically signed in on subsequent visits unless they sign out. Currently the sign in does work except for this issue.
There are no errors displayed. This is using Chrome.
Code as requested:
<script type="text/javascript" src="//apis.google.com/js/platform.js" async defer></script>
...
<div class="google_sign_on"><div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div></div>
...
<script>
function onSignIn(googleUser) {
...
profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId());
console.log("Email: " + profile.getEmail());
};
</script>
I am trying to get my apps script webapp to execute as "user accessing the webapp", but its bigquery should run as me, the developer. (If I run the webapp as me, everything works...) I looked at the documentation at https://developers.google.com/bigquery/docs/authorization. There is no apps script example, so I tried to get the javascript example working.
<html>
<head>
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function auth() {
gapi.auth.authorize(config, function() {
gapi.client.load('bigquery', 'v2');
$('#client_initiated').html('BigQuery client authorized');
$('#auth_button').fadeOut();
$('#dataset_button').fadeIn();
});
}
// User Submitted Variables
var projectNumber = 'XXXXXXXXXX';
var clientId = 'XXXXXXXXXX.apps.googleusercontent.com';
var config = {
'client_id': clientId,
'scope': 'https://www.googleapis.com/auth/bigquery'
};
function listDatasets() {
var request = gapi.client.bigquery.datasets.list({
'projectId':projectNumber
});
request.execute(function(response) {
$('#result_box').html(JSON.stringify(response.result.datasets, null));
});
}
</script>
</head>
<body>
<button id="auth_button" onclick="auth();">Authorize</button>
<div id="client_initiated"></div>
<button id="dataset_button" style="display:none;" onclick="listDatasets();">Show datasets</button>
<div id="result_box"></div>
</body>
</html>
I generated a client id as a browser app with https://script.google.com as the server address. With the code above, I get this error: Cannot read property 'authorize_m___' of undefined.
My question is twofold: 1) Would an apps script webapp authenticate in the same way as the javascript app authenticates? I.e. can I use that code as a guide for my apps script?
And 2) any suggestions about how to debug the javascript sample code? Note that I ran this code as an apps script webapp.... That is probably an error....
The answer... or workaround answer is given here: How to pass parameters from one Google-Apps-Script to another and execute?
I can use two stage authentication in place of direct authentication: the user logs in as him/herself, I get the user's name to find their files, then switch to a webapp that uses BigQuery and execs as me, the developer.
A good workaround for advanced services authentication under apps scripts....
I am in the process of integrating Google+ sign in with my site, which also lets users sign in with Twitter and Facebook. The sign in page of the site therefore has 3 buttons, one for each of the services.
The issue I am having is in the following scenario:
user goes to the sign in page
user signs in successfully with G+
user signs out of my site (but the account is still associated with G+, signing out of the site does not disconnect the G+ account)
user visits the sign in page again
at this stage the Sign in with G+ button is rendered and automatically signs the user into the account associated with G+ without the user having to click the button
The problem is that on revisiting the sign in page, I want the user to have the option of signing in with another service, rather than automatically being signed in with G+. If the user wants to sign in with G+ then they can do so by clicking the button - the user will then be signed in automatically.
Is it possible to prevent this automatic sign in on button render? I can simulate it by using the data-approvalprompt="force" as an attribute on the button, but I don't think this is an ideal solution (the user then has to go through the confirmation process, which I would ideally would like to prevent)
Update
The best supported way to prevent automatic sign-in is to use the API method gapi.auth2.getAuthInstance().signOut() which will prevent automatic sign-in on your site after it has been called. Demo here.
In the demo, the user is signed out when they leave the page as shown in the following code:
window.onbeforeunload = function(e){
gapi.auth2.getAuthInstance().signOut();
};
Now, whenever the user exits the site (e.g. closes the window, navigates away), they will be signed out and the sign in button will not trigger sign-in until the user clicks it.
I don't recommend you do this in your own implementation but instead allow the user to explicitly sign out when they no longer desire want to be signed in. Also, please note that my example is a demo, you probably do not want to sign the user out automatically any time they leave your site.
Original Post
First, you should not be using data-approvalprompt="force" as this will cause extra authorized subtokens to be issued to your application / client and is designed to be used in scenarios where the user needs to be reauthorized after credentials have been lost server-side.
Second, you probably do not want to have the behavior where the user needs to click to sign in because they are already "signed in" to their Google account and it could be confusing to need to sign in (or trigger sign-in) again, separately, for your site.
If you really wanted to do this, you would perform an explicit render for the signin button but would not make the call to gapi.signin.render as documented in the Google+ sign-in documentation until you are aware that the user will not automatically get signed in.
The following code shows how to enable explicit render of the sign-in button:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<script type="text/javascript">
var token = "";
function onSigninCallbackVanilla(authResponse){
// in a typical flow, you show disconnect here and hide the sign-in button
}
The following code shows you how to explicitly render the button:
<span id="signinButton">
<button id = "shim" onclick="gapi.signin.go(); $('#shim').hide();">Show the button</button>
<span
class="g-signin"
data-callback="onSigninCallbackVanilla"
data-clientid="YOUR_CLIENT_ID"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
How you're communicating that the user is signed out of your site is probably going to vary from site to site, but one approach could be to set a cookie indicating the "signed out" state for a user and then using this as the trigger for blocking explicit load. The behavior gets a little trickier when a user visits your site and has disabled cookies or uses a separate, signed-in, browser. To address this, you could do something complicated like querying the user state from your server over XHR on the sign-in callback and pretending not to know the user is signed in to Google+.
Just check for g-auth-window in the callback function:
function google_sign_callback(authResult){
if(authResult['g-oauth-window']){
}else if(authResult['error']) {
}
}
I had this issue and used auth2.disconnect()
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
var auth2 = gapi.auth2.getAuthInstance();
auth2.disconnect();
//do other stuff
}
Edit:
you need to store the token before you disconnect because in some cases id_token will become null after disconnect:
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
var idToken=profile.id_token;
googleUser.disconnect()
//use idToken for server side verification
}
If i'm correct you have your own sign in mechanism for your site and just need google sign in to sign up a user on verified email. in this case you can easily disconnect after you get the profile info.
Next time you load the page you will see "sign in" button instead of "signed in " button.
Unfortunately calling gapi.auth.signOut() made the app to log-in again when I'm requesting user data (neither it is persistent)
So the solution, as suggested by #class is to revoke the token:
$.ajax({
type: 'GET',
url: 'https://accounts.google.com/o/oauth2/revoke?token=' +
gapi.auth.getToken().access_token,
async: false,
contentType: 'application/json',
dataType: 'jsonp',
success: function(result) {
console.log('revoke response: ' + result);
$('#authOps').hide();
$('#profile').empty();
$('#visiblePeople').empty();
$('#authResult').empty();
$('#gConnect').show();
},
error: function(e) {
console.log(e);
}
});
I too has same issue this how i fixed it.I may not sure this is a stander way to do it but still it works fine with me...
add this Google JS from google developer
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function onSuccessG(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
}
function onFailureG(error) {
console.log(error);
}
function renderGmail() {
gapi.signin2.render('my-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 0,
'height': 0,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccessG,
'onfailure': onFailureG
});
}
Now add html link and onClick call this renderGmail() function.
SignUp with Gmail
I hope this works...
I am using https://developers.google.com/identity/sign-in/web/build-button to build the sign in button for my web app which gives the user a choice to log in through either Facebook or Google.
This code is pretty easy for obtaining the Id_token.
However it also came with automatic signing in of the user if the user is already signed in.
Thus, adding the following snippet in the beginning of the script helped me control the signup procedure.
window.onbeforeunload = function(e){
gapi.auth2.getAuthInstance().signOut();
};
Thanks!
Our AngularJS solution was:
$scope.$on('event:google-plus-signin-success', function (event, authResult) {
if( authResult.status.method !== "AUTO"){
onGoogleLogIn(authResult[settings.configKeys.googleResponseToken]);
}
});
I have been struggling with this for a while and could not find a way to prevent automatic sign in to Google using the "easy implementation" of the Sign-in
I ended up using the custom integration which does not attempt to auto sign in (also allowed me to change the appearance in the same time)
The accepted answer no longer works when you start to use both Google Sign In and OAuth access tokens for other Google services. The access tokens expire immediately when the user is signed out. Instead, I would recommend the answer from this SO post, which involves attaching a click event handler to the Google sign in button. Only once the user clicks the sign in button and successfully logs into their Google account will the callbacks events fire.
I solved this by adding a click handler to my Google sign-in button. The click handler sets a global Javascript variable google_sign_in to true. When the onSuccess() handler fires (whether automatically on page load, or manually when the user clicks the sign-in button), it first checks whether google_sign_in == true and only then does it continue signing the user in:
<div id="google-signin2" onclick="return do_click_google_signin();"></div>
<script>
var google_sign_in = false; // assume
function do_click_google_signin() {
google_sign_in = true;
}
function onSuccess( googleUser ) {
if ( google_sign_in ) {
// Process sign-in
}
}
// Other redundant login stuff not shown...
</script>