39

How do I get one of the automatic "Sign in with Google" frames on my site? It happens if you're signed into an account and visit Kayak.com for instance. Any documentation I come across is for the older "Sign in with Google" button.

Here's what it looks like just by visiting Kayak.com.

enter image description here

Ciprian
  • 872
  • 1
  • 10
  • 30
Hem
  • 685
  • 1
  • 8
  • 14
  • related: [How to disable pop-ups for Google “YOLO” / “One-Tap Sign-Up”?](https://superuser.com/questions/1414410/how-to-disable-pop-ups-for-google-yolo-one-tap-sign-up-in-chrome/1414942) – pkamb Oct 23 '19 at 21:45
  • Just my opinion: that pop-up ("one tap") is extremely obtrusive, please consider not implementing it on your website. If I want to log-in/sign-up, I will find the button - **I do not want a large pop-up on any/every page**. It's been annoying me for what seems to be more than a year, and finally, I have disabled it using AdBlock. The guide to disable it with the google account settings doesn't seem to work anymore. – Ben Butterworth Jan 22 '23 at 12:56

1 Answers1

25

Edit (October 29, 2020):

The first link is now working again (as pointed out by @ManSamVampire):

https://developers.google.com/identity/one-tap/web

Edit (November 9, 2019):

It seems the links now lead to 404s. I can't find any information about the disappearance of One Tap sign-in.

Original Answer:

I had the same question and found this (I Googled "google automatic login"):

https://developers.google.com/identity/one-tap/web/

The screenshots they have are for mobile, but the popup looks exactly the same as the one you see on other web apps.

If you click on the Guides tab, you should find some docs there including a Getting Started section:

https://developers.google.com/identity/one-tap/web/get-started

That will show you how to get the credentials setup just like you would for any other Google API, like the Maps JavaScript API for example.

Once you have your credentials, you load the library from Google in your main HTML file or wherever you load your other scripts, if you have any:

<script src="https://smartlock.google.com/client"></script>

You should then be able to access the library through the googleyolo Object:

window.onGoogleYoloLoad = (googleyolo) => {
  // The 'googleyolo' object is ready for use.
};

What you are seeing in that screenshot (and what I have seen as well) looks to be a googleyolo.hint() call.

It seems to be dependent on whether the user has already logged into the site or not. If they have or if they have a password saved for the site in their browser, then it should automatically sign them in or at least prompt for it. This API also handles sign-up's in addition to sign-in's which uses the googleyolo.hint() call mentioned before.

More detailed code examples can be found on the Guides page.

You will also need control over the backend for this site to verify the integrity of the ID tokens from a successful googleyolo.hint() or googleyolo.retrieve() call. That is covered at https://developers.google.com/identity/one-tap/web/idtoken-auth.

Chris Gala
  • 283
  • 3
  • 8
  • You might try giving an example of how this works instead of simply posting a link. – Katie.Sun Dec 03 '18 at 21:57
  • 4
    Thanks for the suggestion! I could see how my answer was a bit lazy, so I added more details. But, the best examples can be found in the documentation links provided. OP did not give details on their site's environment and giving an example would not differ too much from the examples in the docs which I thought would be redundant. Also, the way the question was worded made it seem like OP just needed help finding where the API docs were, as I had trouble finding the docs as well. – Chris Gala Dec 05 '18 at 00:29
  • 1
    The first link is now working again. The Getting started page is now removed but the _Guides_ tab now opens the [first page](https://developers.google.com/identity/one-tap/web/guides/get-google-api-clientid) under the _Get started_ section. Also, the ID token verification documentation has now moved to [this page](https://developers.google.com/identity/one-tap/web/guides/verify-google-id-token). Please update the answer accordingly. – ManSamVampire May 19 '20 at 07:25
  • How can I implement it in ASP.NET Core + Identity in a web application? – Sukhdevsinh Zala Oct 20 '20 at 08:22
  • How is the backend implementation though? – Steve Moretz Mar 11 '23 at 22:02