CodeTips

Blog sobre tips de desarrollo

Menu
Widgets
Search
Skip to content
  • HTML
  • CSS
  • ASP.NET
  • JQuery
  • JavaScript
  • IIS
  • PhoneGap

Google+ API

Autenticación con Google+ API para Javascript

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

diciembre 2, 2013chuyrdz Autenticación, CSS Google Login, Google+ API, HTML, Javascript, Jquery 4 Comments

Entradas recientes

  • LocalStorage
  • [Arreglos] en JS
  • Efectos en imágenes con FadeIn y FadeOut
  • Tabla de Pendientes con JS/JQuery
  • CSS Media Query

Categorías

  • Ajax
  • ASP.NET
  • CSS
  • HTML
  • IIS
  • JavaScript
  • JQuery
  • MySQL
  • Novedades
  • Oracle
  • PhoneGap
  • PHP
  • PostgreSQL
  • Presentacion
  • SharePoint
  • Silverlight
  • SQL
  • Uncategorized
  • Windows Phone
  • WPF
Proudly powered by WordPress | Theme: Sorbet by WordPress.com.