Cada vez es mas importante poder ofrecer una experiencia multicanal y personalizada a nuestros usuarios/clientes. Para ello necesitamos un mecanismo para poder identificarlos dentro de la web, que no requiera de trabajo para registrarse y que sea multicanal.
Para solucionar esto, Google nos ofrece su solución para loguearse mediante su API ofreciendo una solución que le permite al usuario identificarse de manera segura y sin mucho esfuerzo. Para nosotros, una gran herramienta para identificar a nuestros usuarios.
Para conseguir el social login con Google primero:
Crear nuestro proyecto y activar el API en Google Cloud Console
El primer paso será loguearnos en https://console.cloud.google.com(Es totalmente gratuito) y acceder a Menú -> “APIs y servicios” y “credenciales”:
Google Social Login Step 1
El siguiente paso será ir a “Crear credenciales” y “ID de cliente Oauth”:
Google Social Login Step 2
Tendremos que crear un registro con para tipo de aplicación “Web” y asignarle como “Orígenes de JavaScript autorizados” el dominio/s de nuestra aplicación(Por cierto, tendréis que haberlos declarado antes en Menú -> “APIs y servicios” y “Verificación del dominio”):
Google Social Login Step 3
Una vez creados esto nos dará dos datos importantes: El “ID de cliente” necesario para hacer llamadas públicas a Google y el “Secreto de cliente” para poder comunicarnos con Google y validar tokens, etc.
Poner el botón de Sign-in en la web
Ahora ya solo nos queda incrustar el botón en la web(Si, así de fácil). Básicamente, tendremos que insertar lo siguiente en la cabecera de la página:
<script src="https://apis.google.com/js/platform.js" async defer></script> <meta name="google-signin-client_id" content="ID de cliente" />
Y donde queramos que aparezca el botón:
<div class="g-signin2" data-longtitle="true" data-onsuccess="onSignIn"></div>
Interacción vía Javascript
Naturalmente, además de insertar el botón y permitirle al usuario loguearse también querremos interactuar con los datos del usuario.
Si os fijáis, en el div con el botón hemos declarado el atributo ‘data-onsuccess=”onSignIn”‘ que declara la función que se va a llamar en el momento de hacer loguin:
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('Id Profile: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
console.log('Id Token '+googleUser.getAuthResponse().id_token );
}
Para poder verificar los datos de un token desde el backend(Opcional) lo haremos siempre usando el “Id de Token”, nunca el “Id profile” porque esté último parámetro podría inyectarlo un hacker y tendriamos un problema de seguridad. Para verificar el token vía curl:
curl https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=Id de token
Google Sign-out
Naturalmente, los usuarios podrán hacer logout. El link para deloguearse quedaría de la forma siguiente:
<a href='#' onclick='signOut();'>[Sign out]</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
/* Una vez deslogueado... */
});
}
</script>
En fin, como siempre esperando que os resulte útil no os olvidéis de puntuar, comentar y compartir.
