Gestión del proceso de login con tokens

martes 10 de octubre de 2017 por Alfredo

El uso de tokens en API REST es un método que proporciona mucha facilidad a la hora de controlar los accesos a diferentes rutas del servidor.

De manera resumida de procedimiento consiste en:

  1. el usuario envía sus credenciales al servidor (usuario/contraseña).
  2. el servidor comprueba la autenticidad y generar un token. La generación es un proceso más o menos complejo que escapa al objeto de este post, pero para el que tenga curiosidad puede seguirlo aquí.
  3. el token generado es enviado al cliente.
  4. en la siguientes peticiones, el cliente envía el token que le identifica y, en el caso de que sea correcto, el servidor manda los datos que se le solicitan.

En principio la forma de enlazar todos estos pasos no requiere de demasiada explicación (si no tenemos en cuenta el proceso de generación y verificación del token), pero se complica en el momento en el que queremos que validación correcta de credenciales redirija a otra página (por ejemplo el tablero de configuración del usuario).

¿Qué problemas aparecen?

La primera opción que se nos plantea es la de utilizar AJAX para enviar las credenciales, redireccionar a la página que nos interese y recibir el token. Desgraciadamente, si la petición es vía AJAX el cliente espera recibir contenido o información para cargar en la misma página (no ambas cosas)  y por lo tanto la redirección no funciona.

Otra opción sería no redireccionar sino enviar el documento html y, vía jQuery, cargar el documento utilizando la función $(“html”) .html. En este caso el problema radica en que se produce fallos en la carga con jQuery y que además no pasamos el token.

Un cambio de enfoque es más funcional aunque produce más acoplamiento y, desde mi punto de vista, es menos elegante: enviar vía AJAX las credenciales, recibir el token y desde el propio cliente redireccionar a la URL que nos interesa. Este sistema necesita que el cliente sepa de la necesidad de cambiar de URL, es decir, requiere tener conocimientos de lo que quiere hacer el servidor.

Al final la opción que más me convence es la de enviar vía POST de manera síncrona (mediante un formulario) los datos de las credenciales y contestar con la página que deseamos que se muestre, pasando en el HEADER de la respuesta (ya sea mediante un campo oculto o mediante una cookie) el token que necesita el cliente.

+Info: Autenticación de aplicaciones con tokens
+Info: ¿qué es la autenticación basada en tokens?

 

Galaga. Paso 03: Incremento de tiempo fijo

jueves 14 de julio de 2016 por Alfredo

Creación de juegos desde cero: C# y SFML

El sistema que hemos visto en el paso anterior funciona bien, sobre todo si la velocidad de las iteraciones es muy rápida (el procesador es muy veloz y hay pocos cálculos a realizar en nuestros procesos de actualización del mundo). Sin embargo, en el caso de que las iteraciones se produzcan cada mucho tiempo o con variaciones muy variables, este sistema falla.

Leer el resto de la entrada »

Galaga Paso 02: Velocidad constante

martes 26 de abril de 2016 por Alfredo

Creación de juegos desde cero: C# y SFML

Con la implementación realizada en el Paso01, ya tenemos un juego muy simple que permite mover a nuestro jugador (una bola azul) por la pantalla. Toda la magia de este movimiento reside en el bucle principal del juego, un bucle infinito (al menos hasta que la ventana se cierre) que se encarga de obtener las entradas, calcular las nuevas posiciones y redibujar la pelota en su nueva ubicación.

El problema surge con la velocidad de la pelota. Independientemente de que podamos hacer que avance más o menos pixeles en cada actualización, lo que está claro es que el número de veces que se ejecutará el bucle en un determinado tiempo va a ser muy variable.

Leer el resto de la entrada »

Galaga. Paso 01: Creación de proyecto básico

martes 15 de marzo de 2016 por Alfredo

Creación de juegos desde cero: C# y SFML

Vamos a entrar ya en materia. El objetivo de esta entrada va a ser obtener el código desde el repositorio de GitHub y conocer la estructura básica del mismo.

Descarga del proyecto desde GitHub

Los pasos son muy sencillos:

  1. Arranca una Shell de git (Windows) o un Terminal (en Linux o MacOS)
  2. Mediante el comando cd  desplázate hasta la carpeta en la cual quieras que esté la carpeta del proyecto.
  3. Ejecuta el comando git clone https://github.com/aoltra/Galaga-SFML.Net.git Este comando clona el contenido actual del repositorio en la carpeta en la que e encuentres [1]

Leer el resto de la entrada »

Galaga. Paso 00: Herramientas

jueves 10 de marzo de 2016 por Alfredo

Creación de juegos desde cero: C# y SFML

Antes de empezar a entrar en materia hay que definir cuáles van a ser las herramientas con las que vamos a trabajar y como instalarlas. Nuestras herramientas fundamentales de trabajo van a ser el Visual Studio en caso de trabajar con C# o NetBeans en caso de usar Java y, por otra parte, git.

Es posible trabajar tanto en Windows como en Linux como en MacOS si bien en estos dos últimos lo más sencillo es trabajar con el desarrollo en Java [1].

Leer el resto de la entrada »

Creación de juegos desde cero con SFML y C#

sábado 27 de febrero de 2016 por Alfredo

Creación de juegos desde cero: C# y SFML

 

Sin duda, una de las facetas que más interés suscita a los estudiantes que empiezan en el mundo de la programación, es la creación de videojuegos. Desgraciadamente (o afortunadamente nunca lo tendré claro del todo :)),  el desarrollo de videojuegos es una de las especialidades más complejas de la programación,  no solamente por la necesidad de conocimientos de computación sino también de matemáticas, física, diseño gráfico, etc.

Durante estos últimos meses ha surgido la necesidad de crear un curso que permitiera a los alumnos con conocimientos medios de programación introducirse en este mundo.  En estos casos, la solución más  habitual suele ser la de recurrir al uso de algún motor como AndEngine o de más alto nivel como Unity. Sin embargo, la idea en este caso era hacer algo diferente:  el objetivo no tendría que ser únicamente la creación de un juego, si no utilizar el desarrollo del mismo como vehículo para el aprendizaje de técnicas y conceptos de programación.

Leer el resto de la entrada »

Instalación Cordova/PhoneGap

lunes 28 de julio de 2014 por Alfredo

Apache_Cordova1

En general la instalación de Cordova no resulta muy complicada, pero si es verdad que con la aparición de la versión 3.x resulta un poco más compleja que las anteriores. Es posible encontrar por la red tutoriales sobre la instalación en MacOS y Windows, pero cuesta más encontrarlos sobre Linux.

Los pasos se han realizado en un Linux Mint, pero debería ser posible realizarlos sin problemas en cualquier distribución basada en Debian.

1. Instalación del entorno de desarrollo. Al trabajar con Linux tenemos la posibilidad de poder instalar los SDK de Amazon, Android, Blackberry10, Firefox OS y Ubuntu, aunque nosotros nos vamos a centrar en la instalación de Android. Puedes seguir los pasos de la instalación desde aquí. En caso de que el SDK ya esté instalado es conveniente actualizar a la última versión del SDK y del SDK-tools

Desde MacOS tenemos también la opción de instalación del SDK de iOS, para lo cual es necesario instalar XCode.

2. Instalación de Node.js. En principio puede ser instalado directamente desde el propio gestor de paquetes que la distribución tenga (synaptic o similar), pero es importante tener en cuenta dos cosas.

  • La primera es la versión a instalar. Normalmente en el gestor puede haber una versión antigua, por lo que es interesante incluir el ppa correspondiente para estar al día.
  • Lo siguiente es que hay que tener en cuenta que el paquete npm (el instalador de paquetes de Node) se encuentra en un paquete distinto a Nodejs, por lo que hay que recordar instalarlo.

En MacOS la instalación simplemente consiste en descargar el paquete desde la web de nodejs e instalarlo.

3. Instalación de phonegap. Simplemente

sudo npm install -g cordova

Una vez completada la instalación lo mejor es comprobar que todo el sistema funciona correctamente. Para ello lo primero es crear un proyecto.

  • Desde un terminal vamos a la carpeta en la que queremos alojar el proyecto. En caso de estar con MacOS podemos arrastrar desde el finder el icono de la carpeta a un terminal.

cordova create hello com.ejemplo.hello HelloWorld

siendo hello la carpeta que crearemos, HelloWorld el nombre del proyecto y com.ejemplo.hello el paquete

  • Creamos las plataformas, es decir las estructuras de los proyectos para cada una de las plataformas en la que queremos crear la aplicación. En este caso sólo hemos instalado los SDK de Android, luego sólo podremos generar para esa plataforma. Entramos dentro de la carpeta creada (en nuestro caso hello) y desde allí:

cordova platform add android

En MacOS podríamos crear también para iOS.

cordova platform add ios

 Al añadir el proyecto en Android es posible que aparezca algún error. Casi seguro que es porque o no se ha instalado el SDK o no está en el path. Si has hecho el paso 1, el problema será el path. Para añadirlo:

export ANDROID_HOME=/carpeta/donde/esta/instalado/sdk
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/platform-tools:$PATH

  • Construimos las plataformas:

cordova build android

A partir de ese momento ya podemos ejecutar la aplicación, ya sea en un emulador o en un dispositivo. Por eficiencia lo mejor es conectar un dispositivo Android y ejecutar :

cordova run android

En el caso que quisiéramos probar con el emulador el comando sería:

cordova emulate android



PhoneGap/Cordova: desarrollo de aplicaciones móviles multiplataforma

martes 8 de julio de 2014 por Alfredo

Apache_Cordova1

 

Con toda seguridad el requisito más importante de VisualDomo sea la necesidad de que corra en varias plataformas móviles sin ser necesario la creación desde cero de una nueva aplicación. La clave está en el uso de PhoneGap/Cordova.

¿Qué es PhoneGap?

De manera resumida, PhoneGap es un framework para la creación de aplicaciones móviles multiplataforma. Es decir su objetivo es crear un único código y que este pueda funcionar en distintas plataformas móviles como iOS, Android, Blackberry, FirefoxOS, Windows Phone… Suena bien, ¿verdad?

En general para conseguir un objetivo así, la idea es crear aplicaciones web con HTML5, CSS3 y javascript que corran sobre un navegador. Evidentemente este método proporciona multiplataforma, pero por contra hace las aplicaciones más lentas (necesitan al navegador entre ellas y el SO) y, por motivos obvios de seguridad, limita el acceso a varios recursos como la cámara, el acelerómetro, etc.

Para solucionar en parte este problema PhoneGap permite la creación de aplicaciones híbridas, es decir, añadir ciertos componentes (que llama plugins) que conectan de manera nativa con esos recursos. Lógicamente esto hace que la aplicación pierda la posibilidad de ser multiplataforma, pero la manera de migrar a otras plataformas queda únicamente reducida a crear los plugins en ellas. Estos accesos se desarrollan en javascript, que si permite la llamada a código nativo (ya sea Java, C, C++…)

De esta manera una aplicación desarrollada con PhoneGap no es una simple página web, sino que que es una aplicación nativa (un apk si hablamos en sistemas Android) que en su interior lleva un componente visualizador Web (WebView), las páginas web creadas y los plugins de acceso a los recursos.

Por otra parte, para entender el concepto de framework podemos relacionarlo con Java o .NET. Este concepto incluye herramientas que ayudan al proceso de compilación, API’s, etc. y que generalmente se ejecutan sobre una máquina virtual. En este caso podríamos hacer la relación de máquina virtual/webView. Para entenderlo mejor podemos ver el esquema de bloques de una aplicación PhoneGap.

Esquema phonegap

El bloque UI framework no es necesario. Obviamente podemos desarrollar las aplicaciones desde cero con CSS3 y Javascript, pero es obvio que si ya hay diferencias entre distintos navegadores más las puede haber ahora que entra además el factor plataforma. Es por ello que resulta muy interesante el uso de algún tipo de librería como JQuery mobile que ayude de a la creación sencilla del interfaz.

Por último queda otro pequeña confusión a aclarar: ¿qué es Apache Cordova y que tiene que ver con PhoneGap? Durante todo el post he hablado de PhoneGap, pero realmente tendría que haberlo hecho de Apache Cordova. PhoneGap fue desarrollado por Nitobi, empresa que al poco tiempo fue comprada por Adobe. Adobe ha cedido la licencia a la Fundación Apache para liberar el código y asegurar que ese tipo de licencia se mantenga. De esta manera el producto pasó a denominarse Apache Cordova y PhoneGap a ser una distribución del él. No puedo asegurarlo, pero la única diferencia es el servicio de compilación en la nube que PhoneGap ofrece.

VisualDomo: Requisitos

martes 1 de julio de 2014 por Alfredo

VisualDomo logo_com7

Antes de empezar a diseñar conviene dejar bien definidos los requerimientos del proyecto, tanto los mínimos como los opcionales

Mínimos

  • No será posible acceder a un ODControl que no esté en la red a la que se encuentre conectado VisualDomo. Dicho de otro modo, no es posible controlar dispositivos externos a la red local. Aún así se preverá un posible acceso futuro a dicha funcionalidad.
  • Posibilidad de trabajar con varios ODControl de una misma red (mínimo 10)
  • El protocolo de comunicación entre VisualDomo y los ODControl será HTTP autenticado (no seguro)
  • En una primera fase, VisualDomo debe correr en plataformas Android. Los cambios entre plataformas deben ser mínimos.
  • Se debe permitir la configuración de localizaciones con varias plantas.
  • La definición de los planos se hará mediante la carga de algún formato gráfico (png, jpg, etc…)
  • La configuración de la localización podrá realizarse off-line.
  • VisualDomo debe guardar las configuraciones de cada localización (puertos, planos, ubicaciones,…) para facilitar una posterior conexión.
  • Identificación sencilla por iconos del tipo y estado de cada puerto.
  • Control de errores con notificaciones en caso de problemas en los ODControl.
  • Los estados serán actualizados de manera automática a los ODControl, aunque también se podrán solicitar de manera manual.

Opcionales

  • La aplicación permitirá trabajar con varias localizaciones si bien al mismo tiempo únicamente con una de ellas. Aplicación SDI (Single Document Interface).
  • Modo multivista en tabletas que permitan visualizar varias plantas de manera simultánea.

Por cierto, en la cabecera ya utilizo el logo de la aplicación, muy inspirado en el logo oficial de OpenDomo. Espero que os guste.

VisualDomo. Entendiendo el problema (II). Objetivos

lunes 23 de junio de 2014 por Alfredo

ODControl-logo

 

Después del post anterior donde se presentaba ODControl, el siguiente paso es definir los objetivos a los que se pretende llegar con el proyecto:

El objetivo principal es la creación de una aplicación de código abierto para el control visual de una localización domotizada controlada por uno o varios ODControl. Dicha aplicación debe ser compatible con la gran mayoría de dispositivos móviles independientemente de su plataforma o modelo. Específicamente la aplicación debe:

  • Localizar o permitir configurar los posibles ODControl existentes.
  • Permitir cargar planos de la localización a controlar.
  • Ubicar en los planos los distintos dispositivos a controlar.
  • Guardar las configuraciones para simplificar futuros accesos.
  • Visualizar el estado de los puertos de entrada, ya sean digitales o analógicos.
  • Modificar el estado de los puertos de salida.

En otro ámbito más transversal:

  • Es de desear que la aplicación pueda trabajar en varios idiomas (al menos español e inglés).
  • Diseño responsable. Dentro de las limitaciones de diseño indicadas por los fabricantes de los sistemas se pretende que el diseño de la aplicación se adapte al entorno hardware en el que está siendo ejecutado (móvil, tableta o navegador en equipo de sobremesa).
  • Se tendrá especial cuidado en conseguir alta usabilidad.

Existen otros objetivos relacionados con la visibilidad del proyecto:

  • El código del proyecto será publicado en alguna comunidad virtual, en este caso GitHub.
  • Documentar el código de tal manera que simplifique la continuidad del trabajo por parte de otros usuarios. Para facilitar la internacionalización de esta labor dicha documentación se hará en inglés.
  • Se pretende realizar un seguimiento del proyecto mediante el desarrollo de un blog que muestre tanto el proceso de diseño como el de programación. Dado el carácter abierto de VisualDomo se espera que, junto con la publicación del código, el blog facilite la labor de hacer crecer el desarrollo inicial del mismo.
  •  Publicación en las principales tiendas electrónicas de aplicaciones (Google Play, App Store...)