Sebastian Durandeu Blog

  • Visitantes

Archive for October, 2013

LESS en Node.js y Express

Posted by sebastiandurandeu on October 14, 2013

Rima, no? Bueno, si quieren ir directo al código, vayán a ‘Lo Importante‘.

Como escribir en wordpress es gratis, quería tomarme la libertad de dar una opinión primero. Cuando lees la documentación de los módulos de Node.js, TODOS te la venden de que si querés hacer ‘cosa-nueva‘, tenés que hacer:

  1. npm install cosa-nueva
  2. var cosaNueva = require('cosa-nueva');
  3. app.use(cosaNueva({...}));
  4. Leesto, ya está!

Fácil, no? Bueno, MINGA! (para los amigos de Latam es una expresión de lunfardo Argentino que representa incredulidad). O sea tampoco es que sea mucho mas difícil, pero siempre aparece ‘ese detalle’ que te la complica. Por eso no se pierdan mis aclaraciones abajo 🙂

Lo Importante

Muy resumidamente LESS extiende la sintaxis de CSS para facilitar la organización y mantenimiento del código. Lo que sigue son los pasos para usar LESS en una app Node.js que usa Express, usando el módulo less-middleware.

1. Como siempre:

npm install less-middleware

2. En el server.js de la app:

var lessMiddleware = require('less-middleware');
...
var app = express(); // express app initialization
...
app.use(lessMiddleware({
    src : __dirname + "/static/less",
    dest : __dirname + "/static/css",
    prefix : "/css",
    force : true,
    compress : 'auto'
}));
app.use(express.static(__dirname + '/static')); // static-middleware de express
app.use(app.router); // router de express

3. La organización que propone el código de arriba es tener una carpeta ‘static’ en el root de la app con el siguiente contenido:

less-folder-structure

4. Si tengo un archivo ‘styles.less en la carpeta ‘less’, Los estilos los puedo incluir ahora desde HTML de la siguiente manera. Notesé que apuntamos al archivo con extensión CSS directamente.

<link rel='stylesheet' href='/css/styles.css' type='text/css' />

Aclaraciones

El código de arriba tiene varias lineas de más, expresamente, para aclarar algunas cosas:

  • express.static() tiene que estar SI o SI después de app.use(lessMiddleware(...)). Esto se debe a que less-middleware utiliza el express.static() middleware para servir los archivos compilados.
  • src es la ruta a donde less-middleware va ir a buscar los archivos LESS para compilarlos. No necesariamente tiene que estar dentro de la ruta de express.static() (o sea, ‘/static’).
  • dest es la ruta donde less-middleware va dejar los archivos CSS compilados. Tiene que estar dentro de la ruta de express.static() (e.g. si express.static() apunta a la carpeta ‘/static’, dest tiene que estar dentro de esta carpeta).
  • prefix Aún no entiendo bien para que sirve. Pero la regla práctica es que si src y dest son distintos, tiene que tener el valor de la porción distinta del path, en este caso ‘/css’. Esta mejor explicado en el post que menciono al final.
  • compress Setearlo en auto hace que si utilizamos las extensiones ‘.min.css’, o ‘-min.css’ al referenciar los archivos CSS, less-middleware va generar el archivo minificado.
  • force En true hace que se recompilen los archivos LESS en cada request. Útil durante desarrollo, desactivar para producción.
  • app.use(app.router). OJO QUE NO es lo mismo configurar el router de express, antes que después de de express.static(). Sobre todo si tienen configurada una ruta del tipo app.get('/*',...). Depende si está antes o después, less-middleware puede funcionar o no. Inclusive puede tener impacto el la performance. No me voy a meter en detalle porque un genio lo explica muy bien acá: http://stackoverflow.com/questions/12695591/node-js-express-js-how-does-app-router-work

El siguiente artículo explica bastante bien varias cosas de estas: http://blog.dylants.com/2013/03/16/less-middleware-using-less-with-node-js/

Feedback abajo 🙂

Posted in Node.js | Leave a Comment »

Node.js: OAuth 2.0 con la API de MercadoLibre

Posted by sebastiandurandeu on October 2, 2013

Estuve haciendo unas pruebas con la API de MercadoLibre desde Node.js. En particular, quise probar como autenticar contra la API usando OAuth 2.0, siguiendo los pasos descriptos acá.

Los módulos de Node que voy a utilizar en este código son:

1) El primer paso es definir una ruta para comenzar el flow de OAuth (en este caso ‘/auth/mercadolibre’) y obtener el authorization code. En este paso tengo que hacer un redirect al authorization endpoint de la API enviando los siguientes datos:

  • client_id: El app id de mi aplicación,que puedo obtener acá.
  • redirect_uri: Una URL a donde mi app va a recibir el authorization code y procesarlo (AKA redirection endpoint). En este caso es ‘/auth/mercadolibre/callback’.

En este paso el usuario va a ver el dialogo de login de Mercado Libre y va a autorizar a nuestra app a acceder a sus datos.

app.get('/auth/mercadolibre', function (req,res) {
    var authCallback = GetBaseUrl() + '/auth/mercadolibre/callback';
    var redirectUrl = util.format('https://auth.mercadolibre.com.ar/authorization?response_type=code&client_id=%s&redirect_uri=%s',
    config.clientId, authCallback);
    res.redirect(redirectUrl);
});

2) El segundo paso es utilizar el access code del paso anterior para obtener un access token que finalmente me va a permitir realizar requests a la API. Para esto tengo que hacer un HTTP POST al Token Endpoint de la API (‘/oauth/token’) para finalmente obtener el access token. Los parámetros de este request son:

  • client_id: El app id de mi aplicación, que puedo obtener acá
  • client_secret: El app secret de mi aplicación, idem
  • code: El access code obtenido en el paso 2
  • redirect_uri: La misma redirect_uri que pasamos en el paso 2
app.get('/auth/mercadolibre/callback', function (req,res) {
    var code = req.query.code;
    var authcallback = GetBaseUrl() + '/auth/mercadolibre/callback';
    var accessTokenUrl = util.format('https://api.mercadolibre.com/oauth/token?grant_type=authorization_code&client_id=%s&client_secret=%s&code=%s&redirect_uri=%s',
    config.clientId, config.clientSecret, code, authcallback);
    request.post(accessTokenUrl, function(error, response, body) {
        res.send(body);
    });
});

Bien, ahora si corro mi app y browseo a ‘/auth/mercadolibre’, pasado el login y los redirects, debería obtener un JSON con el access token. Algo parecido a lo siguiente.

authComplete

3) Para mantener la explicación simple, el siguiente código muestra como se puede usar manualmente en un request el access token obtenido para obtener la dirección de un usuario de mercado libre.

app.get('/:user/address', function (req, res) {
    var userId = req.params.user;
    var apiUrl = util.format('https://api.mercadolibre.com/users/%s/addresses?access_token=%s', userId, '{copiar_el_access_token_acá}');
    request.get(apiUrl, function(error, response, body) {
        res.send(body);
    });
});

Tengan en cuenta que no toda la funcionalidad de la API requiere que estemos autenticados. Por ejemplo las búsquedas, se pueden realizar sin necesidad de autenticación.

LA MAGIA

Por algún motivo desconocido aún por mi (y un poco de vago) nada de esto anda si no configuro el módulo HTTPS de la siguiente manera:

https.globalAgent.options.secureProtocol = 'SSLv3_method';

Para mas info de OAuth 2, me gustó el diagrama que tiene la RFC acá. Como siempre el feedback es bienvenido 🙂

Posted in Node.js | 2 Comments »