Search code examples
google-smartlockpasswords

Adding Google smart lock to a website only

Google Smart Lock on a website

I just visited Pinterest and it has a cool feature. Somehow when I visit the site Chrome can "see" that I have an account. And instead of passively waiting it informs me pro-actively: you do have an account here: would you like to login with 1 click? yes/No

https://support.google.com/accounts/answer/6160273?hl=en

Question: I see a lot of json code examples for apps. But how can we proactively add this to a website that a user has a stored uname/passwd for?

Example image

thanks, Sean

Solution

  • Here's an article describing how to add Smart Lock sign-in to your website: https://developers.google.com/web/updates/2016/04/credential-management-api

    Basically, add a bit of code to the (https) website like this (you can try it in the JavaScript console:

    navigator.credentials.get({  
  password: true, // `true` to obtain password credentials  
}).then(function(cred) {  
  // continuation which submits the credential and signs the user in 
  ...

    Here is a complete sample website: https://credential-management-sample.appspot.com/

    Once the user has used this credential or you have saved it with navigator.credentials.store(), then in the future, it can retrieved automatically (without a user click).

    For more information about this, check out this talk from Google I/O (details on the credential management API start at about 8 minutes).