Entradas con el tag ‘jquery’

Gestión del proceso de login con tokens

martes 10 de octubre de 2017

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?

 

Uploadify: Subida de archivos con jQuery

jueves 31 de marzo de 2011

La última página web que hemos creado en Uhuru Labs, Navarro y Soler CAD-PLM Software, requería una sección donde los usuarios de la web pudieran mandar a nuestro cliente ficheros de un tamaño considerable. Teniendo este requerimiento empezamos a investigar por la red buscando algún uploader que no fuese el simple formulario de subida de ficheros, sino que proporcionara algo más, aparte de ser fácilmente configurable.

Enamorados como estamos de jQuery y de todo lo que lleva consigo esta potente librería en javascript, buscamos algún uploader que estuviera hecho a partir de jQuery y encontramos Uploadify. Un pequeño vistazo por encima nos hizo darnos cuenta de las grandes posibilidades que tenía este pequeño trozo de código.

Al estar utilizando WordPress como backend primero miramos si había algún plugin hecho ya que nos facilitara las cosas. Encontramos uno, pero no conseguimos hacerlo funcionar, así que lo pusimos a pelo en la plantilla que estábamos creando. Nos basamos en la última versión que tiene uploadify ahora mismo estable, la 2.1.4, ya que la beta 3.0 carecía de documentación y no queríamos embarrarnos las manos con cosas no probadas.

Una vez bajado el archivo comprimido con todos los archivos necesarios, descomprimimos en la carpeta de nuestro tema. Con lo que quedaría todo dentro de una carpeta, en nuestro caso la llamamos uploadify.

Entonces hicimos la carga de los archivos .js necesarios y de la hoja de estilos .css. Nosotros siempre cargamos las hojas de estilo en la etiqueta <head>:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/uploadify/uploadify.css" />

y la carga de los archivos javascript lo hacemos en el footer.php, justo antes del cierre del tag <body>:

<!-- Uploadify -->
<script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/uploadify/swfobject.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/uploadify/jquery.uploadify.v2.1.4.js"></script>

Utilizamos el código php bloginfo(‘template_url’) para poner la dirección absoluta donde se encuentran los archivos.

Queríamos que cada cliente tuviera su propio directorio para subir archivos con lo que necesitábamos el nombre de usuario una vez logueado el cliente. Así que en la página donde queríamos el uploader pusimos este trozo de código:

<script type="text/javascript">
var files = new Array();
var user = '<?php echo $username; ?>';
var $cont = 0;
           jQuery(document).ready(function() {
             jQuery('#file_upload').uploadify({
               'uploader'  : '<?php bloginfo( 'template_url' ); ?>/uploadify/uploadify.swf',
               'script'    : '<?php bloginfo( 'template_url' ); ?>/uploadify/uploadify.php',
               'cancelImg' : '<?php bloginfo( 'template_url' ); ?>/uploadify/cancel.png',
               'folder'    : '<?php echo URI_UPLOADS.'/'.$username.'/'; ?>',
               'auto'      : false,
               'removeCompleted' : false,
               'simUploadLimit' : 3,
               'buttonText' : '<?php _e('SELECCIONAR','nysplm'); ?>',
               'multi' : true,
               'onError' : function (event,ID,fileObj,errorObj) {
                 alert(errorObj.type + ' Error: ' + errorObj.info);
               },
               'onComplete' : function (event, ID, fileObj, response, data) {
                        var json = {"name": fileObj['name'], "size": fileObj['size'], "type": fileObj['type']};
                        files[$cont] = json;
                        $cont++;
                },
               'onAllComplete' : function (event, data) {
                        //alert("Response: "+response);
                        send_confirmation(data);
                        $cont = 0;
                        files = [];
                 }
              });
           });

Donde le decimos a uploadify:

  • uploader: donde está el archivo .swf que contiene el código flash que nos permitirá subir los archivos
  • script: donde está el archivo .php que necesita uploadify para hacer la carga de los archivos
  • cancelImg: donde se encuentra la imagen que se muestra para cancelar la subida de los archivos
  • folder: el directorio donde queremos subir los archivos. En nuestro caso esto es dinámico, así el cliente subirá los archivos a su propio directorio.
  • auto: indica que la subida no será automática, sino que el usuario deberá, una vez cargados los archivos, presionar un enlace para comenzar la carga.
  • removeCompleted: indicamos que no quite de pantalla los archivos subidos.
  • simUploadLimit: establecemos a 3 ficheros el límite de subida simultánea.
  • buttonText: ya que este gran software está en inglés, utilizamos esta opción para cambiar el texto del botón de carga de archivos.
  • multi: indicamos que se pueden subir varios archivos simultáneamente.
  • onError: función que mostrará una alerta js si se produce algún error.
  • onComplete: función que se ejecutará cada vez que se suba correctamente uno de los ficheros
  • onAllComplete: función que se ejecutará cuando se hayan subido todos los ficheros.

Alguien se habrá dado cuenta del comentario que hay en el onAllComplete:

 alert("Response: "+response);

Esto sirve de mucha ayuda cuando estamos desarrollando. Puede ser que el archivo no se suba correctamente por falta de permisos. Esto para uploadify no es un error, ya que no es competencia suya, con lo que el error es devuelto a la función onAllComplete en lugar de lanzar un error la función onError. Por ello, si vemos que no se muestra ningún error pero el archivo no se sube al servidor correctamente, descomentar esta línea puede aclarar que está pasando.

Y por último, y no menos importante, habrá que poner el tag donde se cargará uploadify:

<input id="file_upload" name="file_upload" type="file" />
<a href="javascript:$('#file_upload').uploadifyUpload();"><?php _e('Subir archivos','nysplm'); ?></a>

donde ponemos el input con el identificador que cargará uploadify y un enlace para subir los archivos simultáneamente.

Y hasta aquí, esperamos haber sido de ayuda. Si alguien tiene alguna duda pues a comentar. Ayudaremos en lo que podamos.