viernes, junio 21, 2013

Personalizar autenticación de Google para aplicaciones Meteor

Hola nuevamente,

seguimos son la autenticación de Google en aplicaciones Meteor, esta vez lo que haremos será personalizar el inicio y cierre se sesión, en otras palabras, nosotros decidiremos cómo y cuando iniciar y cerrar sesión, por ende ya no nos hará falta el módulo accounts-ui

Creamos el proyecto y la infraestructura

Crearemos el proyecto:
meteor create loginConGoogleCustom 
loginConGoogleCustom: created. To run your new app: 
 cd loginConGoogleCustom 
 meteor

Eliminamos todos los archivos del proyecto:
cd loginConGoogleCustom
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 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 (este archivo es idéntico que el que utilizamos anteriormente)

Iniciamos Meteor: 
meteor 

[[[[[ ~/loginConGoogleCustom ]]]]] 

Initializing mongo database... this may take a moment. 
=> Meteor server running on: http://localhost:3000/

Creamos la configuración
Abrimos el archivo server/configuracion.js y agregamos el siguiente código (este código es idéntico al del post anterior, solo hay que cambiar el clientId y el secret según los datos de cada cuenta):

//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
});

Creamos la vista (archivo client/index.html)
<head>
  <title>Login con Google</title>
</head>
<body>
  {{> inicial}}
</body>

<template name="inicial">
  {{#if currentUser}}
    {{> usuarioAutenticado}}
  {{else}}
    {{> usuarioNoAutenticado}}
  {{/if}}
</template>

<template name="usuarioAutenticado">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container pull-right">
        <span class="text-success">{{currentUser.profile.name}}</span>
        <img class="img-rounded" 
             style="height: 32px; margin-top: 4px;" 
             src="{{currentUser.services.google.picture}}"/>
        <div id="cerrarSesion" class="btn btn-primary">Cerrar Sesión</div>
      </div>
    </div>
  </div>
  {{> contenido}}
</template>

<template name="usuarioNoAutenticado">
  <div class="alert">
    <span class="icon-exclamation-sign"/> Debe Autenticarse!
    <div id="iniciarSesion" class="btn btn-info">Iniciar Sesión</div>
  </div>
</template>

<template name="contenido">
  <iframe width="100%" height="500px" src="http://www.meteor.com"></iframe>
</template>

A diferencia de la implementación anterior, esta es más prolija, la página web se limita al siguiente código:
<head>
  <title>Login con Google</title>
</head>
<body>
  {{> inicial}}
</body>

La plantila {{> inicial}} renderiza contenido en base a si el usuario actual está logueado o no.
  {{#if currentUser}}
    {{> usuarioAutenticado}}
  {{else}}
    {{> usuarioNoAutenticado}}
  {{/if}}

La plantilla {{> usuarioAutenticado}} mostrará una barra de navegación que a la derecha contendrá el nombre del usuario logueado, su avatar y un botón que permitirá cerrar la sesión, luego se mostrará el contenido de la página web. El botón cerrar sesión es nuestro componente personalizado y lo que más nos interesa es su id, ya que lo utilizaremos para programarle la escucha de eventos.
La barra de navegación debería verse más o menos así:



La plantilla {{> usuarioNoAutenticado}} mostrará un alerta que indicará la necesidad de iniciar sesión a la izquierda de la pantalla. El mensaje de alerta contiene además un botón que permite inicar la sesión, este es nuestro componente personalizado y su id es "iniciarSesion". El mensaje de alerta debería verse más o menos así:


Programación de eventos (archivo client/index.js)
Solo nos resta programar la interacción del usuario, en otras palabras, definir lo que ocurrirá cuando el usuario haga click en el botón "iniciar Sesión" o en el botón "Cerrar Sesión". Copiamos el siguiente código:

Template.usuarioAutenticado.events({
  "click #cerrarSesion":function(event,template){
    Meteor.logout(function(err){
      if(err){
        // manejar error
      }else{
        // todo ok
      }
    });
  }
});

Template.usuarioNoAutenticado.events({
  "click #iniciarSesion":function(event,template){
    Meteor.loginWithGoogle({
      requestPermissions: ['profile']
    }, function(err){
      if(err){
        // manejar error
      }else{
        // todo ok
      }
    });
  }
});

La programación o definicion de eventos en Meteor es muy simple y autodescriptiva. Los evenetos se programan en el ámbito de una plantilla, luego se define el evento y luego la regla de búsqueda de componentes a los cuales se les programará el evento.
En nuestro caso, en la plantilla usuarioAutenticado al hacer click en el botón con id cerrarSesion llamamos al método Meteor.logout el cual solo recibe como parámetro una función de retrollamada la cual nos permite manejar el resultado de la operación mediante el parámetro err.

Para el caso de la plantilla usuarioNoAutenticado  al hacer click en el botón con id iniciarSesion llamamos al método Meteor.loginWithGoogle el cual recibe como primer parámetro un arreglo llamado requestPermissions en el cual definimos los permisos que kle requerimos a google, en este caso solo hemos requerido el permiso profile el cual nos permitirá acceder a información básica de la cuenta, como segundo parámetro una función de retrollamada la cual nos permite manejar el resultado de la operación mediante el parámetro err.

Bien, eso es todo, espero les sea de utilidad.

Saludos

Mariano

jueves, junio 20, 2013

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 http://nodejs.org/dist/node-latest.tar.gz tar xzvf node-latest.tar.gz && cd `ls -rd node-v*` ./configure make install  
  • 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 

Creamos los componentes del server: 
touch server/configuracion.js  

Iniciamos Meteor: 
meteor 

[[[[[ ~/loginConGoogle ]]]]] 

Initializing mongo database... this may take a moment. 
=> Meteor server running on: http://localhost:3000/


Iniciamos el navegador en: http://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 http://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 http://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.name}} {{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="http://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

lunes, junio 17, 2013

Cursos taller Meteor.js y Git/Github

Hemos finalizado con mucho éxito el curso taller de Meteor.js y Git/Github en la UNdeC.
Gracias a todos por asistir!





Entrevista

**Especial agradecimiento a Fernanda Carmona y Horacio Martínez del Pezzo por el apoyo y colaboración brindada.**

miércoles, junio 05, 2013

Pivot4J en Pentaho BI Server 5

Hola Gente,

En este breve post veremos como instalar Pivot4J en Pentaho BI Server 5.

Si bien Pentaho 5 aún no está disponible en versión alpha, lo podemos descargar desde el server de integración continua en esta dirección: http://ci.pentaho.com/view/Platform/job/BISERVER-CE/
A la hora de escribir este post el trunk es el 981 y el archivo a descargar es biserver-ce-TRUNK-SNAPSHOT-jenkins-BISERVER-CE-981.zip.

Una vez descargado este archivo utilizando, por ejemplo, el comando:
wget http://ci.pentaho.com/view/Platform/job/BISERVER-CE/lastSuccessfulBuild/artifact/assembly/dist/biserver-ce-TRUNK-SNAPSHOT-jenkins-BISERVER-CE-981.zip
(recomiendo descargar la última versión)

Descomprimimos la carpeta biserver-ce utilizando, por ejemplo, el comando:
unzip biserver-ce-TRUNK-SNAPSHOT-jenkins-BISERVER-CE-981.zip

Una vez descomprimido el BI Server, descargamos el plugin de Pivot4J (http://mysticfall.github.io/pivot4j/download.html) para Pentaho utilizando, por ejemplo, el comando:
wget http://dev.eyeq.co.kr/jenkins/job/Pivot4J/lastSuccessfulBuild/artifact/pivot4j-pentaho/target/pivot4j-pentaho-0.8-SNAPSHOT-plugin.zip
(recomiendo descargar la última versión)

Copiamos el archivo anterior en la carpeta [CARPETA_DE_DESCOMPRESIÓN]/biserver-ce/pentaho-solutions/system utilizando, por ejemplo el comando:
cp pivot4j-pentaho-0.8-SNAPSHOT-plugin.zip [CARPETA_DE_DESCOMPRESIÓN]/biserver-ce/pentaho-solutions/system/

Nos cambiamos a la carpeta system:

cd [CARPETA_DE_DESCOMPRESIÓN]/biserver-ce/pentaho-solutions/system/

Descomprimimos utilizando, por ejemplo, el comando:
unzip pivot4j-pentaho-0.8-SNAPSHOT-plugin.zip

Listo!, eso es todo, ahora iniciamos el BI Server:

cd [CARPETA_DE_DESCOMPRESIÓN]/biserver-ce

./start-pentaho.sh

Iniciamos el navegador en la url: http://localhost:8080, utilizamos admin para el nombre de usuario y la clave es password, luego presionamos el botón "Manage Data Sources" y agregamos uno nuevo de tipo Analisys.



Seleccionamos el archivo: [CARPETA_DE_DESCOMPRESIÓN]/biserver-ce/pentaho-solutions/steel-wheels/analysissteelwheels.mondrian.xml
Y el Data Source SampleData


Obtendremos:

Luego solo tenemos que crear un nuevo análisis:

Seleccionamos el esquema y el cubo:

Y a usar Pivot4J !!

Espero que les sea de utilidad

Saludos

Mariano





Seguirme por email

Etiquetas

pentaho (45) java (35) eclipse (23) jdbc (14) curso (13) tomcat (13) primefaces (12) db2 (11) mondrian (10) review (10) jsf (9) openI (9) pdi (9) prd (9) libro (8) plugin (8) musql (7) struts (7) javascript (6) spring (6) cdf (5) ctools (5) instalar (5) linux (5) mysql (5) data studio (4) hibernate (4) ireport (4) jasper (4) meteor (4) videocurso (4) eglu (3) eglubi (3) elearning (3) graphite (3) grupo eglu (3) jboos tools (3) mexico (3) openbits (3) packt (3) python (3) undec (3) websphere (3) applet (2) cde (2) dao (2) db2university (2) exelearning (2) flexigrid (2) hadoop (2) iua (2) kettle (2) moodle (2) node (2) olap (2) osbi (2) pivot4j (2) scorm (2) sql (2) stpivot (2) actionscript (1) amazon (1) autenticacion (1) avanzado (1) base de datos (1) big data (1) bigdata (1) bodoc (1) cambiar (1) ccc (1) cdc (1) chat (1) cloud (1) coffeescript (1) control de acceso (1) corti (1) csv (1) cuba (1) curso meteor undec (1) dashboard (1) datamart (1) dataptix.tv (1) datasource (1) datatable (1) db2 ExpressC (1) demonio (1) distancia (1) driver (1) driver jdbc (1) eglufiltertwolist (1) encapsulamiento (1) especialización (1) etl (1) excepciones (1) export (1) faces (1) federación (1) filas afectadas (1) filtertwolist (1) filtrado (1) flegrid (1) flex (1) google (1) google viz (1) hostname (1) html (1) i18n (1) ibm (1) identidad (1) indignación (1) instancias (1) inteligencia de negocios (1) jee (1) jpivot (1) l10n (1) la azada (1) la zaga de los confines (1) layout (1) liberado (1) libre (1) libro promoción (1) lob (1) marktplace (1) menu (1) meteor node javascript google oauth autenticacion (1) mobile (1) mongoDB (1) node.js (1) oauth (1) olap4j (1) open source (1) orm (1) persistencia (1) personalizada (1) prd5 (1) psw (1) publicidad (1) rad6 (1) recursividad (1) reporting (1) rock (1) saiku (1) script (1) servicio (1) sessiontimeout (1) sourceforge (1) spinneta (1) sqlserver (1) ssl (1) taller (1) troyanx (1) ubuntu (1) ucc (1) ui (1) web (1) web console (1) xampp (1) xml (1) xpath (1)

Seguidores