Home > Uncategorized > Automatically sign in users to your website with Google #YOLO

Automatically sign in users to your website with Google #YOLO

yolo

How often have you been fed-up with having to create yet another account, with a username, and password – that you are going to forget. Your users feel the same way when they visit your website, and you prompt them to enter a new username and password.

Of course systems like Oauth have existed for ages, but you have to manage server side code to exchange auth tokens, and manage token refreshes, which is just a pain. Google have come out with a system called YOLO – which makes it super easy, using client-side code only, to grab the user’s public profile (i.e. name, email and profile pic) as long as they have signed in elsewhere on the same browser.

It makes it really seamless to capture a user’s profile, without any effort from the user.

Google have a great step-by-step guide, and I’d recommend reading their instructions, rather than me replicating them here. But effectively, you set up your Oauth credentials in the Google API console, to get your client ID, then you add a script reference to :

https://smartlock.google.com/client

Then use code such as the following to grab the user’s profile:

window.onGoogleYoloLoad = (googleyolo) => {
console.log(“Yolo loaded!”);
const retrievePromise = googleyolo.retrieve({
supportedAuthMethods: [
https://accounts.google.com”,
“googleyolo://id-and-password”
],
supportedIdTokenProviders: [
{
uri: “https://accounts.google.com”,
clientId: “xxxxxxx.apps.googleusercontent.com”
}
]
});
retrievePromise.then((credential) => {
console.log(“ok!”);
console.log(credential);
if (credential.password) {

alert(credential.id);
} else {
// A Google Account is retrieved. Since Google supports ID token responses,
// you can use the token to sign in instead of initiating the Google sign-in
// flow.
//useGoogleIdTokenForAuth(credential.idToken);
}
}, (error) => {
console.log(“oops!”);
console.log(error);
// Credentials could not be retrieved. In general, if the user does not
// need to be signed in to use the page, you can just fail silently; or,
// you can also examine the error object to handle specific error cases.

// If retrieval failed because there were no credentials available, and
// signing in might be useful or is required to proceed from this page,
// you can call `hint()` to prompt the user to select an account to sign
// in or sign up with.
if (error.type === ‘noCredentialsAvailable’) {
const hintPromise = googleyolo.hint({
supportedAuthMethods: [
https://accounts.google.com”
],
supportedIdTokenProviders: [
{
uri: “https://accounts.google.com”,
clientId: “xxx-xxxx.apps.googleusercontent.com”
}
]
});
hintPromise.then((credential) => {
console.log(“hint worked”);
console.log(credential);
if (credential.idToken) {
// Send the token to your auth backend.
useGoogleIdTokenForAuth(credential.idToken);
}
}, (error) => {
console.log(“hint failed”);
console.log(error);
switch (error.type) {
case “userCanceled”:
// The user closed the hint selector. Depending on the desired UX,
// request manual sign up or do nothing.
break;
case “noCredentialsAvailable”:
// No hint available for the session. Depending on the desired UX,
// request manual sign up or do nothing.
break;
case “requestFailed”:
// The request failed, most likely because of a timeout.
// You can retry another time if necessary.
break;
case “operationCanceled”:
// The operation was programmatically canceled, do nothing.
break;
case “illegalConcurrentRequest”:
// Another operation is pending, this one was aborted.
break;
case “initializationError”:
// Failed to initialize. Refer to error.message for debugging.
break;
case “configurationError”:
// Configuration error. Refer to error.message for debugging.
break;
default:
// Unknown error, do nothing.
}
});
}
});
};

Advertisements
Categories: Uncategorized
  1. Michael Ingli
    March 30, 2018 at 9:42 pm

    fyi you might want to check whichever wp plugin your using for this blog as some of the Right Double Quotation Marks arent showing up properly in the source code section above they show up as ” otherwise great sample code!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: