Monthly Archives: October 2011

Subir archivos a S3 directo con AJAX

Una gran característica de S3 es que puedes subir directamente a tu bucket a través de una acción post, el flujo es muy simple, solo necesitas generar algunos parámetros de la ubicación donde se almacenará y los permisos/meta-información, con el SDK de Amazon para PHP, puedes hacerlo fácilmente con:

require_once 'sdk.class.php';
	$s3_uploader = new S3BrowserUpload();
	$params = $s3_uploader->generate_upload_parameters($bucket, $expires, array(
		'acl' => AmazonS3::ACL_PUBLIC,
		'key' => $path_file,
		'Content-Type' => $mime,
	));

El resultado de $params contendrá un arreglo cuyo índice $params['input'] necesita ser pasado a valores ocultos de una forma y finalmente necesitas agregar un tipo file donde el usuario seleccionará el archivo (al final de los otros parámetros):

<input type="file" name="file" />

También puedes especificar la dirección URL donde regresará el navegador después que el usuario haya subido el archivo.

Esto trabaja muy bien para subir archivos de “forma tradicional”, pero ¿cómo lo harías si quisieras tomar ventaja de las nuevas API’s de HTML5 como almacenar una cadena en un archivo; o obtener la imagen de un canvas y almacenarlo directo en S3 sin enviarlo primero a un servidor; o hacer una miniatura en el cliente y subirla directo a S3?

El primer problema aquí es que no puedes hacer llamadas crossdomain (interdominio), debido a que S3 no tiene la característica de agregar una cabecera de Access-Control-Origin que permitiría enviar el archivo de forma directa, afortunadamente con postMessage puedes subir un archivo HTML y uno javascript a tu cuenta S3 y funcionará mediante un “proxy”.

El otro problema es que postMessage solo permite tipos que puedan ser clonados, por seguridad File/FileReader no pueden ser clonados por lo que necesitas pasar el contenido del archivo directamente en lugar del objeto.

Este ejemplo te permitirá

  1. Seleccionar una imagen
  2. Reducirla a la mitad de tamaño mediante un canvas
  3. Obtener los datos binarios codificados en base64
  4. Pasar mediante un postMessage el contenido
  5. Decodificar los datos en base64
  6. Pasarlo mediante AJAX a tu cuenta de S3

Esto es simple debido a que se están utilizando características estándar; pero desafortunadamente como HTML5 es un estándar en progreso, muchos navegadores aún no lo soportan, por el momento lo soportan Firefox 4+ and Chrome 11+

Primero revisaremos la parte que será almacenada en tu bucket de S3 y servirá como proxy, tendremos estos tres archivos:

  1. index.html
    Contendrá solo código para cargar el javascript y nada más
  2. base64-binary.js
    Es un archivo útil que permite decodificar la imagen en base64 a un ArrayBuffer que será convertido en un Blob y será enviado como un “archivo” en una acción POST
  3. upload.js
    Este archivo contendrá la lógica que recibirá el mensaje y convertirá la imagen codificada en base64 con parámetros POST y lo convertirá en una petición AJAX

Puedes ver todos los archivos aquí:
https://github.com/danguer/blog-examples/tree/master/html5/s3/direct-upload/s3-files

La parte principal de upload.js es:

window.addEventListener("message", function(event) {
	var data = event.data; //obtener los datos del mensaje

	//subir el archivo mediante blob
	var separator = 'base64,';
	var index = data.content.indexOf(separator);
	if (index != -1) {
		var bb = new BlobBuilder();

		//decodificar los datos de Base64 y convertirlos a un ArrayBuffer
		var barray = Base64Binary.decodeArrayBuffer(data.content.substring(index+separator.length));
	        bb.append(barray); 

	        var blob = bb.getBlob();

	        //pasar los parámetros POST mediante FormData
	        var formdata = new FormData();

		for (var param_key in data.params) {
			formdata.append(param_key, data.params[param_key]);
		}
		formdata.append("file", blob, "myblob.png"); //agregar como Blob

		//finalmente enviar los datos mediante AJAX
		var xhr = new XMLHttpRequest();
		xhr.open("POST", data.url, true);
		xhr.send(formdata);
	}
}, false);

Como puedes ver solamente estamos decodificando el base64 y convirtiéndolo a un Blob, pasando todos los parámetros mediante FormData y enviándolos mediante AJAX.

Como este archivo estará almacenado en S3 no habrá ningún problema de crossdomain, pero necesitas poder crear un Blob y un FormData para que funcione.

 

En el script para cargar el archivo tendremos un poco más de código, primero necesitamos código para generar los parámtros de S3, esto se puede hacer fácilmente en PHP con::

<?php
	//iniciar aws-sdk
	require_once 'sdk.class.php';

	//la respuesta será en JSON
	header('Content-Type: application/json');	

	$bucket = 'danguer-blog'; //tu bucket en s3
	$bucket_path = 'upload-html5/tmp'; //"directorio" donde se guardarán los archivos
	$filename = isset($_POST['name'])?$_POST['name']:null;
	$filemime = isset($_POST['mime'])?$_POST['mime']:null;

	//manejar errores
	if (empty($filename)) {
		print json_encode(array(
			'error' => 'debe enviar el nombre',
		));
		return;
	}

	if (empty($filemime)) {
		print json_encode(array(
			'error' => 'debe enviar el mime',
		));
		return;
	}

	if (strpos($filename, '..') !== false) {
		print json_encode(array(
			'error' => 'no se aceptan rutas relativas',
		));
		return;
	}

	$expires = '+15 minutes'; //el token solo será válido por 15 minutos
	$path_file = "{$bucket_path}/{$filename}";
	$mime = $filemime; //mandar el contenido mime para ayudar a los navegadores

	//obtener los parámetros de S3 para subir directamente
	$s3_uploader = new S3BrowserUpload();
	$params = $s3_uploader->generate_upload_parameters($bucket, $expires, array(
		'acl' => AmazonS3::ACL_PUBLIC,
		'key' => $path_file,
		'Content-Type' => $mime,
	));

	print json_encode(array(
		'error' => '',
		'url' => "http://{$params['form']['action']}",
		'params' => $params['inputs']
	));
	return;

 

Después necesitamos presentar la entrada del archivo y crear un iframe que cargue los archivos S3 que hemos subido:

	<!-- hiden frame -->
	<iframe id="postMessageFrame" src="<?=$url_iframe?>">
	</iframe>

	<h3>Subir archivos</h3>
	<input type="file" accept="image/*" onchange="uploadFile(this.files)">

Y el código javascript es un poco más, debido a que una vez que el usuario seleccione un archivo, necesitamos cambiarle el tamaño

function resizeImage(file, mime) {
	var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var canvasCopy = document.createElement("canvas");
        var ctxCopy = canvasCopy.getContext("2d");

	var reader = new FileReader();
        reader.onload = function() {
	    var image = new Image();
	    image.onload = function() {
                //escalar la imagen a la mitad
		canvasCopy.width = image.width;
	        canvasCopy.height = image.height;
	        ctxCopy.drawImage(image, 0, 0);

	        canvas.width = image.width * 0.5;
	        canvas.height = image.height * 0.5;
	        ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);

	        //convertirlo en imagen y obtener el binario codificado en base64
	        //para enviarlo mediante postMessage
	        var url = canvas.toDataURL(mime, 0.80);
	        uploadImage(file, url)
	    }

        image.src = reader.result;
    };

	//leer contenidos
	reader.readAsDataURL(file);
}

Como puedes ver estamos abriendo el archivo seleccionado, lo dibujamos en un canvas, lo copiamos en otro canvas a la mitad de su tamaño y obtenemos su representación binaria en base64 con el mismo mimetype del original, finalmente llamaremos para subir la imagen:

function uploadImage(file, dataURL) {
	//cargar firma para S3
	var signature_params = {
		mime: file.type,
		name: file.name
	};

	$.post(url_ajax_signature, signature_params, function(response) {
		//enviar mediante postMessage
		var windowFrame = document.getElementById('postMessageFrame').contentWindow ;
		var data = {
			params: response.params,
			url: response.url,
			content: dataURL
		}

		//enviar los datos de la firma de S3 y los datos binarios en base64
		windowFrame.postMessage(data, 'http://<?=$url_iframe_host?>');
	}, 'json');
}

Primero obtenemos los parámetros POST para S3 mediante AJAX del archivo PHP y después enviamos esos datos mediante postMessage al iframe en S3 para que pueda procesarlo y cargarlo a S3 sin necesidad de primero enviar el archivo al servidor y de ahi cargarlo a S3, con esto podemos cargar directamente a S3 desde el navegador del cliente y si es necesario podemos verificar los contenidos para evitar que se suba archivos maliciosos.

Todo el código se puede ver aquí:

https://github.com/danguer/blog-examples/tree/master/html5/s3/direct-upload

Decodificando Base64 Binario en Javascript

Actualmente todo los decodificadores de base64 en javascript son para cadenas, no funcionan para datos binarios; el ejemplo es cuando usas un elemento canvas y obtienes su representación base64 ( canvas.toDataURL() ) usualmente enviarás la cadena al servidor y ahí harás la decodificación en base64, si quieres procesar los datos en javascript encontrarás que fallará debido a que lo procesará como cadena.

Este script está usando los nuevos “array typed” (supongo que traducido como Arreglos con Tipo) de javascript, el uso básico es para decodificar una cadena base64 en un Uint8Array lo puedes utilizar como:

var uintArray = Base64Binary.decode(base64_string);

La otra llamada es cambiar el Uint8Array en un ArrayBuffer, esto es muy útil por ejemplo para subir un archivo mediante FormData ( formdata.append("file", arraybuffer, "test.png") ), puedes usarlo como:

var byteArray = Base64Binary.decodeArrayBuffer(base64_string);

Puedes checar el código aqui:
https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

Obtener video webm de Youtube (antes FLV) en PHP

Hace tiempo había publicado el código para obtener el código de FLV de Youtube (http://vida.danguer.com/2009/01/09/obtener-video-flv-de-youtube/), esto ya no funciona debido a que el archivo cambió y que Youtube ya no proporciona ahora un archivo FLV, ahora proporciona un archivo webm que es una extensión de un archivo Matroska, esto es debido a su iniciativa de soportar HTML5 para reproducir sus video.

El código para descargar el archivo webm es igual de fácil, pero no se puede reproducir con los reproductores “tradicionales” de flash, después de descargar el archivo pueden utilizar VLC o para web pueden utilizar el jwplayer (para reproducirlo deben cambiar la extensión a .webm)

Más información de webm: http://www.webmproject.org/

<?php
//video id by default
$video_id = 'v6xU96KLBL4';

if (isset($_REQUEST['video_id']))
        $video_id = trim($_REQUEST['video_id']);

//get vars from video
$url_info = 'http://www.youtube.com/get_video_info?video_id='.$video_id;
$info = file_get_contents($url_info);

$vars = array();
parse_str($info, $vars);

if ($vars['status'] == 'ok') {
	$vars_fmt = array();
	parse_str($vars['url_encoded_fmt_stream_map'], $vars_fmt);

	print "WEBM: {$vars_fmt['url']}";
} else
	print "Error: {$vars['reason']}";

Puedes descargar el código en github: https://github.com/danguer/blog-examples/blob/master/php/youtube/get-flv.php

Iniciando sesión con Google+ y OAuth

Un escenario común es iniciar una sesión mediante una cuenta externa como Google+, Twitter o Facebook.
En este código mostraré como hacerlo con Google+ API

Primero necesitas registrar el API en https://code.google.com/apis/console/, registrar el servicio de Google+ API y crear una nueva aplicación, en el campo de “Redirect URI” necesitas escribir la ruta del script y lo siguiente: “googleplus.php?op=redirect“, comentaré el porqué después; después que veas el código podrás separarlo en rutas o scripts más elegantes.

En la aplicación generada, necesitarás los campos de Redirection URI y Client ID

Google OAuth funciona de la siguiente manera:

  1. Generar una URL usando los parámetros de los servicios que quieres acceder (scope) y tu Client ID y Redirection URI
  2. Necesitas redireccionar al usuario a esta URL
  3. Después que el usuario ha ingresado, el sistema te redireccionará a la URL que proporcionaste con parametros hash (googleplus.php?op=redirect#access_token=....), así que no verás esto en el servidor; puedes pasarlo a tu servidor mediante AJAX o en este caso mediante una petición GET

En el código el parámetro “?op=redirect” mostrará una página blanca con un código en javascript para convertir el hash en una petición GET; esto pemitirá obtener en el servidor el parámetro access_token que usarás para verificar mediante Google+ si es válido.

Esta parte del código lo hace:

<?php
        $access_token = $_GET['access_token'];

	//verificar si es real
	$data = @file_get_contents("https://www.googleapis.com/plus/v1/people/me?access_token={$access_token}");
	if ($data) {
		print $data;
	} else {
		print "Token no valido!";
	}

El código no está preparado para manejar errores (lo mostrará como un parámetro $_GET['error']) así que necesitas manejar eso en tu caso.

Ligas:

Usando php para analizar logs de apache

Apache tiene una característica especial que es enviar la salida de sus logs a través de una tubería (pipe). Esto evita configurar syslog para reenviar los registros a un servidor en php.

Los cambios en apache son realmente simples, solo necesitas colocar algo así en la configuración:

LogFormat "%v %A %D \"%r\" %>s %O \"%{Referer}i\" \"%{User-Agent}i\"" milog
CustomLog "|/usr/bin/php5 [PATH_TO_SCRIPT]/apache-stdin.php log" milog
ErrorLog "|/usr/bin/php5 [PATH_TO_SCRIPT]/apache-stdin.php error"

En apache-stdin.php el código es realmente simple, solo necesitas hacer:

<?php
$fp = fopen('php://stdin', 'r');
do {
	//leer una línea de apache, si no tiene datos se bloqueará hasta obtenerla
	$data = fgets($fp);
	$data = trim($data); //quitar espacios y "enters" del mensaje

	if (empty($data)) {
		break; //no envia más datos, así que terminar el script
	}

	//procesar el mensaje
} while(true);

fclose($fp);

Como puedes ver es simplemente leer una línea y procesarla.

He escrito un script de ayuda para esto, que puedes descargar aqui:
https://github.com/danguer/blog-examples/blob/master/php/syslog/apache-stdin.php

A este script le puedes pasar un parámetro adicional para especificar si es un registro normal o un registro de error; será igual que en la configuración de apache que puse anteriormente.

También puedes configurar el script para especificar el format de registro que estás usando en apache para obtener una descripción simple; el formato debe ser literal como:

<?php
$format = '%v %A %D \"%r\" %>s %O \"%{Referer}i\" \"%{User-Agent}i\"';

Con esto, el script generará un arreglo como:

array(
'hostname' => 'danguer.com',
'local_ip' => 127.0.0.1,
'time_ms' => 0.0002,
'first_line_request' => 'GET / HTTP/1.1',
'status_last' => 200,
'bytes_sent' => 2048
);

Con esto puedes usarlo para almacenarlo en un archivo (es lo que hace sin cambios el script), insertarlo a una base de datos, usar simpledb, etc.

Instalando php-fpm y apache2

He leído muchos tutoriales sobre como instalar nginx y php-fpm.
Sigo usando apache2 más que nada debido por la facilidad del archivo .htaccess que permite hacer uso de mod_rewrite y proteger las rutas con un password (así como usar otros módulos como mod_svn, etc)

No he encontrado una manera 100% transparente como ngninx, pero detallo lo que uso para trabajar con php-fpm y apache2. Pasos en debian:

  • echo "deb http://packages.dotdeb.org stable all" >> /etc/apt/sources.list
  • apt-get update
  • apt-get install libapache2-mod-fastcgi apache2-mpm-worker php5-fpm php5-common php5-cli
  • hacer todo los apt-get de todos los módulos php5-* que quieras
  • Agregar lo siguiente a un nuevo archivo: /etc/apache2/mods-enabled/fpm.load
    AddType application/x-httpd-fastphp5 .php .phtml
    Action application/x-httpd-fastphp5 /fast-cgi-fake-handler
  • en /etc/php5/fpm/pool.d/www.conf cambiar:
    listen = 127.0.0.1:9000

    por:

    ; listen = 127.0.0.1:9000
     listen = /var/run/php-fpm.socket

    Esto habilitará el socket de unix que debe ser más eficiente

  • /etc/init.d/php-fpm restart
  • /etc/init.d/apache2 restart

 

Con esto podrás usar php-fpm a través de una url “ficticia”: /fast-cgi-fake-handler si quieres cambiar tu archivo /etc/apache2/sites-enabled/000-default se vería de esta manera:

FastCGIExternalServer /var/www/fast-cgi-fake-handler -socket /var/run/php-fpm.socket
DocumentRoot /var/www

El sistema cambiará la url /index.php por: /fast-cgi-fake-handler/index.php que será enviada a php-fpm mediante fastcgi

Esto tiene dos problemas:

  1. Necesitas especificar FastCGIExternalServer de la forma ${DOCUMENT_ROOT}/fast-cgi-fake-handler en todos tus hosts virtuales para que funcione
  2. Zend framework y otros que utilicen el patron de consumir cualquier url y pasársela a un script index.php no funcionarán porque generarán un ciclo infinito; pero hay una solución sencilla en tu código .htaccess escribe después de RewriteEngine On:
    RewriteRule ^fast-cgi-fake-handler/ - [L,NC]

    Esto evitará procesar todas las ligas que contengan “fast-cgi-fake-handler” como su inicio; o claro puedes usar RewriteCond para evitar esto.