En este segundo post veremos como agregar la autenticación de Google+ en tu sitio web, anteriormente vimos como trabaja el Facebook SDK para JavaScript. El funcionamiento es bastante parecido, comencemos:
Requisitos:
- Un Client Id, este identificador se generará automáticamente al crear una aplicación en Google Develpers.
- Un lugar donde hospedar tus archivos HTML, es necesario que tus archivos puedan ser accesibles desde una url, por lo que tendrás que utilizar un servidor web.
Teniendo esto resuelto, podemos comenzar a codificar:
Paso 1: Agregar/Cargar el API de Google+
<head>
<script src=”https://apis.google.com/js/client:plusone.js”></script >
</head>
Paso 2: Agregar referencia a JQuery API
<script src=http://code.jquery.com/jquery-1.10.1.min.js></script>
Paso 3: Agregar el botón de login
A diferencia de Facebook, el API de Google+ puede inicializarse desde la creación del botón, es decir, no se necesita un método en particular para inicializarlo.
<div id=”signin-button”>
<div class=”g-signin” data-callback=”GoogleLogin” data-approvalprompt=”force” data-clientid=”AQUI TU CLIENT ID” data-scope=”https://www.googleapis.com/auth/plus.login” data-cookiepolicy=”single_host_origin”></div>
</div>
Paso 4: Implementar el callback GoogleLogin
Aquí podemos tener cuatro posibles escenarios de estatus:
- Loguado (signed_in), si el usuario esta logueado a Google y autorizó tu aplicación.
- No Logueado (user_signed_out), si el usuario no esta logueado a Google.
- Acceso denegado (access_denied), si el usuario se logueó a Google, pero no autorizó tu aplicación.
- Fallo inmediato (immediate_failed), si el usuario no se pudo autenticar automáticamente.
Una vez logueado, podemos acceder a la información del usuario mediante gapi.client.load para cargar la api y gapi.client.plus.people.get para obtener la información.
function GoogleLogin(respuesta)
{
if(respuesta[‘status’][‘signed_in’])
{
gapi.client.load(‘plus’,’v1′,function(){
var request=gapi.client.plus.people.get({‘userId’:’me’}).execute(function(info){
$(‘Nombre’).html(info.displayName);
$(‘#URL’).html(info.url);
});
});
}
}
Cutomizar el botón de Login
Si se desea modificar estilos del botón, Google nos da el código que podemos utilizar.
Customizar botón login
Saludos