Usar autenticación de Google para aplicaciones Meteor.js (utilizando accounts-ui)

Hola estimad@s,

 

este post está dedicado a una tecnología con la cual vengo "jugando" hace un tiempo, se trata de Meteor.js, en pocas palabras se trata de un framework creado para Node.js que nos permite crear aplicaciones web de muy alto nivel en tiempos record.

Esta definición se acerca a la que pude verse en la página oficial, pero está basada en mi experiencia, con esto quiero decir que no me cabe ninguna duda de que realmente "hace lo que dicen sus creadores".

 

El post no es una introducción a Meteor ni mucho menos, es una solución puntual a un problema rutinario en nuestras aplicaciones web y es el de utilizar mecanismos de autenticación externos, en este caso el de Google. Dicho esto pondremos manos a la obra:

 

Debemos contar con Node y Meteor instalados:

  • Instalación de Node en Ubuntu: 
    sudo apt-get install python-software-properties 
    sudo add-apt-repository ppa:chris-lea/node.js 
    sudo apt-get update 
    sudo apt-get install nodejs npm
  • Instalación de Node en Debian:
    apt-get install python g++ make
    mkdir ~/nodejs && cd $_
    wget -N https://nodejs.org/dist/node-latest.tar.gz
    tar xzvf node-latest.tar.gz && cd `ls -rd node-v*`
    ./configure
    
  • Instalación de Meteor:
    curl https://install.meteor.com | /bin/sh

 
Comenzamos con el proyecto

 

Ahora crearemos el proyecto:

meteor create loginConGoogle 
loginConGoogle: created. To run your new app:   cd loginConGoogle   meteor

 

Eliminamos todos los archivos del proyecto:

cd loginConGoogle
rm *.js *.css *.html

 

Creamos la estructura de directorios para componentes de nuestra aplicación:

mkdir client 
mkdir server

 

Instalamos el módulo de contiene los widgets para trabajar con cuentas:

meteor add accounts-ui  accounts-ui: Simple templates to add login widgets to an app.

 

Instalamos el módulo de contiene la lógica para trabajar con cuentas de google:

meteor add accounts-google accounts-google: Login service for Google accounts

Instalamos el módulo que contiene bootstrap: 

meteor add bootstrap bootstrap: Front-end framework from Twitter 

 

Creamos los componentes del cliente: 

touch client/index.html  touch client/index.js 

 

Creamos los componentes del server: 

touch server/configuracion.js  touch server/cuentas.js 

 

Iniciamos Meteor: 

meteor 
[[[[[ ~/loginConGoogle ]]]]] 
Initializing mongo database... this may take a moment.  => Meteor server running on: 'https://localhost:3000/

 

Iniciamos el navegador en:`' https://localhost:3000' (no veremos nada inicialmente)

  

Creando los token de autenticación de Google

 

Utilizando un navegador, accedemos a: https://code.google.com/apis/console/, luego seleccionamos API Access y luego Create an OAuth 2.0 client ID...

 

Luego en la primera parte del asistente colocamos nuestros datos según corresponda: 

 

Luego configuramos los datos de nuestra aplicación web particular:

 

La URL 'https://localhost:3000/'_oauth/google?close es la función de retrollamada, una vez que google nos autentique la llamará y esta función cierra la ventana de login actual en la aplicación Meteor.La URL 'https://localhost:3000' es la que será autorizada.

 

Los datos que se generan son:

Y los que nos interesan son Client ID y Client Secret

 

Configurando la cuenta de Google en nuestra aplicación

Abrimos el archivo server/configuracion.js y agregamos el siguiente código:

 

//Quitamos cualquier configuración para 

//cuentas de Google 

Accounts.loginServiceConfiguration.remove({ 

  service: "google" 

}); 

//Agregamos la configuración con los datos que obtubimos de Google 

//campo clientId <-- Client ID 

//campo secret <-- Client Secret 

Accounts.loginServiceConfiguration.insert({ 

  service: "google", 

  clientId: "441624260670-5p0k5et2ns9pnlm8cgtp8bsdf.apps.googleusercontent.com",   secret: "3LMwasdfIOXfPqGhyeH4asdf3h" 

});

 

Abrimos el archivo client/index.hml y agregamos el siguiente código:

<head>

  <title>Login con Google</title>

</head>

<body>

  {{#if currentUser}}

    <div class="alert">

      <img class="img-rounded" 

           style="height: 32px; margin-top: 4px;" 

           src="{{currentUser.services.google.picture}}"/>

      {{currentUser.profile.login}} {{loginButtons}}

    </div>

    {{> contenido}}

  {{else}}

    <div class="alert">

      <span class="icon-exclamation-sign"/> Debe Autenticarse! {{loginButtons}}

    </div>

  {{/if}}

</body>

<template name="contenido">

  <iframe width="100%" height="500px" src="https://www.meteor.com"></iframe>

</template>>

 

Breve explicación:

{{#if currentUser}} indica si el usuario está logueado ya que currentUser contiene el id del usuario logueado actualmente.

 

Ahora nos logueamos usando el browser:

 

Autorizamos manualmente la aplicación por única vez:

 

Y veremos... 

 

Lo que sigue es solo para Google Chrome, en otros navegadores se realiza de otra forma (en Firefox se puede utilizar Firebug).

 

Presionamos botón derecho en la página (en la parte del botón de login) y seleccionamos Inspeccionar elemento

Luego seleccionamos Console y en el prompt ">" escribimos Meteor.user(), podremos ver:

La siguiente figura pone un poco de luz al contenido de {{currentUser.profile.name}} y {{currentUser.services.google.picture}}

 

{{> contenido}} será reemplazado por el contenido generado por el template name="contenido"

{{loginButtons}} es parte del módulo accounts-ui, aparecerán los botones adecuados según el estado de autenticación y cuentas disponibles.

 

Eso es todo, espero les haya sido de utilidad.

En breve más material sobre este tema.

 

Saludos

 

Mariano