Login using Google authentication without opening new window/tab

Question

I want to implement Google login in my site like is done in Stack Exchange, Stack Overflow and more. Meaning that when the user choose Login using Google authentication, the site redirects to a page where he can choose which Google account to use and without opening a new window/tab and redirect to the site Can you help me with links/documentation how to do it Very important not to open new tab/window.

I'm using this: https://developers.google.com/identity/sign-in/web/build-button

You can see that when you click on the button a new window is open, I wand to prevent this.

Thanks in advance

There are browsers that block them, in mobile browser this scenario is more problematic or not supported. — Boba Fett likes JS, Jun 16 '16 at 06:12
What I see is Chrome in IPhone, its not blocking but doesn't open a new window/tab. So it will be better to have this availability for all browser. Thanks — Boba Fett likes JS, Jun 16 '16 at 18:07
I don't know Chrome is different on iPhone, but Chrome does open on new window for me. you can try on this web site, like google login. https://meta.discourse.org/ — YOU, Jun 17 '16 at 01:15
Thanks for your response, but even if you find a scenario that the pop-up is opened, I have a requirement removing the use of the pop-up. I found this:http://stackoverflow.com/questions/27905780/google-sign-in-using-javascript-api-without-triggering-popup but don't recommend hacking it.Any thoughs? — Boba Fett likes JS, Jun 17 '16 at 18:21
Pop-ups are blocked by default on Chrome 63 on Andriod. Just wondering if you found a way around this? — Kareem, Nov 12 '17 at 06:32

Maxime Asselin · Answer 1 · 2018-04-10T17:53:33.640

3

You could try to switch to the JavaScript client authentication and pass the ux_mode option to the signIn() function options.

ux_mode: "redirect"

Documentation here: https://developers.google.com/identity/sign-in/web/reference#googleauthsigninoptions

Then you can get the user profile like so:

let googleUser = window.gapi.auth2.getAuthInstance().currentUser.get();

if (googleUser) {
    let profile = googleUser.getBasicProfile();

    if (profile) {
        this.state.google.firstname = profile.getGivenName();
        this.state.google.lastname = profile.getFamilyName();
        this.state.google.email = profile.getEmail();
    }
}

This is all documented here and there: https://developers.google.com/identity/sign-in/web/people

edited Apr 10 '18 at 17:53

answered Feb 08 '18 at 17:44

Maxime Asselin

484
1
6
14

This is correct solution. This doesn't open a popup window, but it also come with several limitations: you must provide a way/link when sign in process was successful. And you can't get user name, email or picture – DennyHiu Apr 08 '18 at 08:26
You can but you need a second transaction. I will edit the answer. – Maxime Asselin Apr 09 '18 at 12:10
@Maxine: I tried to use that method a while ago, but ultimately reverted back to popup method, since I can't get user name and picture. I will be glad if you can show to me how. – DennyHiu Apr 09 '18 at 13:00
Edited my answer and added a link to the documentation. – Maxime Asselin Apr 10 '18 at 17:54

score 2 · Answer 2 · answered May 16 '19 at 13:21

2

Just add data-ux_mode="redirect" to the sign-in div from the Google's example (or to the .render call if you're rendering the login-button programmatically)

<div class="g-signin2" data-onsuccess="onSignIn" data-ux_mode="redirect"></div>

answered May 16 '19 at 13:21

Alex from Jitbit

53,710
19
160
149

score 0 · Answer 3 · answered Sep 19 '22 at 19:47

GAPI is now being discontinued, and Google is transitioning to Google Identity Services (GIS). The new method is similar to that which was suggested by @AlexfromJitbit, with some small modifications:

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-ux_mode="redirect"
         data-login_uri="https://www.example.com/your_login_endpoint">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

This code is pulled from the new GIS example, and is recommended for all new applications as the old API will be retired as of 31 March 2023.

Login using Google authentication without opening new window/tab

3 Answers3