Demo: app de email en Meteor con geolocalización y seguimiento de UA

En enero anunciamos que nos habíamos asociado con Meteor para potenciar el back-end de email que incluye la plataforma Meteor. Para ver un ejemplo, echa un vistazo a este formulario de registro de eventos sobre el que escribimos hace poco en el blog, pero hoy queremos mostrarte otra demo de la integración de Mailgun con Meteor.

Hace unas semanas lanzamos nuevos parámetros para nuestros webhooks con los que obtener información de geolocalización y del agente de usuario de tus emails sin tener que analizar las cadenas del agente de usuario ni utilizar bibliotecas de búsqueda de IP. Pensamos que sería divertido crear una pequeña app con Meteor para demostrar lo fácil que resulta consumir estos nuevos parámetros.

Haz clic en la siguiente demo para verla en acción y descarga el código fuente de la app desde Github para que puedas experimentar con ella y crear tu propia app o informe. Tras probar la demo, vuelve por aquí para ver con más detalle cómo la construimos.

Puedes enviar emails con Mailgun a través de SMTP estándar o con la API HTTP de Mailgun. Si solo quieres una función de envío SMTP sencilla en tu aplicación de Meteor, empieza añadiendo el paquete de email a tu proyecto.

>> meteor add email

Al ejecutar ese comando, se configurará automáticamente una cuenta de Mailgun predeterminada, y Meteor establecerá la variable de entorno MAIL_URL que almacena la configuración SMTP. (Consulta la documentación de email en el sitio web de Meteor aquí. Como se menciona en el último párrafo, puedes probar el envío incluso sin añadir el paquete de email: por defecto, los emails se mostrarán directamente en la consola).

Para esta demo, vamos a ir más allá del envío básico de email, por lo que usaremos una cuenta de Mailgun directamente junto a la API HTTP (por cierto, con la API, Mailgun ensambla el MIME del lado del servidor, de modo que es un poco más fácil de manejar, incluso en envíos de email sencillos).

Para empezar, obtén tu clave de API en el panel de control de Mailgun, la verás al iniciar sesión.

La API se invocará con una sencilla solicitud HTTP POST. Tendrás que añadir el paquete http de Meteor a tu proyecto.

>> meteor add http

Una vez instalado el paquete http, puedes realizar cualquier solicitud HTTP en tu aplicación: GET, POST, PUT, DELETE, etc.

Vamos al grano: a continuación tienes un ejemplo de cómo enviar un email con Mailgun mediante la API:

                                

                                    Meteor.http.post('https://api.mailgun.net/v2/your-api-domain/messages',  
    {auth:"api:" + process.env.MAILGUN_API_KEY,
    params: {"from":"Dev McCool  ",
                     "to":[to],
                      "subject":"Behold: the power of Meteor and Mailgun",
                      "html":”A <b>bold</b> greeting goes here”,
                      "h:X-Mailgun-Variables":JSON.stringify({tracking_id:my_tracking_var}),
                      "o:tracking":'True’ }}, function(error, result) {
                      //handle error, result (should be 200 OK)
                     }
           }
                                
                            

Vamos a repasar algunos detalles aquí.

Puedes ver que establecemos un encabezado de autenticación con esta solicitud mediante una variable de entorno llamada MAILGUN_API_KEY. Aún no se pueden configurar variables de entorno en la plataforma de alojamiento de Meteor (p. ej., meteor deploy), pero si tu app de Meteor se ejecuta en Heroku o en tu propia configuración, seguramente sea buena idea mantener las credenciales, como tu clave de API, guardadas a buen recaudo en una variable de entorno. Si quieres establecer una variable de entorno con Meteor, solo tienes que hacer esto:

process.env['MAILGUN_API_KEY'] = "my-mailgun-key";

Ten en cuenta que también añadimos algunos valores de seguimiento personalizados.

• Establecer la opción de seguimiento en “true” para indicar a Mailgun que envíe el webhook al abrir el email.
• Asignar un valor JSON al campo del encabezado X-Mailgun-Variable. Esto demuestra la potencia de los webhooks: podemos guardar algunos detalles importantes o valores únicos en este campo del encabezado y recuperarlos cuando Mailgun envíe el webhook a nuestro servidor.

En este ejemplo en concreto, el envío del email se acciona mediante un sencillo botón HTML desde el lado del cliente. Envolvimos la función de envío de email en un método de Meteor para que pueda accederse a ella desde el cliente. Ver el código de envío de email aquí.

Recuerda mantener los elementos importantes, como las credenciales de la API, en la carpeta del servidor de tu aplicación de Meteor. Los archivos de la carpeta del servidor no se envían al cliente. Sin embargo, otros archivos, ya estén en la carpeta del cliente o en la raíz de la aplicación, sí pueden llegar al navegador del cliente.

Cuando Mailgun detecte que nuestro email se ha abierto, nos enviará una solicitud POST. Como con cualquier visita, queremos que el webhook se sienta como en casa y sepa que ha llegado al destino correcto: ¡aquí no hay errores 404! El enrutamiento del lado del servidor no está integrado en Meteor todavía, pero no te preocupes: gracias a la flexibilidad de la plataforma, podemos añadir una ruta sencilla para el webhook de Mailgun sin tener que desmontar nada. Hay que escribir un poco más de código para configurar una ruta del lado del servidor:

                                

                                    if (Meteor.isServer) {

  var app = __meteor_bootstrap__.app
  var connect = Npm.require('connect');
  var Fiber = Npm.require('fibers');
  var crypto = Npm.require('crypto');

  var router = connect.middleware.router(function(route)
  {
    route.post('/mailgun/receive', function(req, res)
    {
      var raw_post_body = "";
      var post_data = [];

      req.on('data', function (chunk) {
        raw_post_body += chunk.toString();
      });

      req.on('end', function () {
          pairs = raw_post_body.split('&');
          for(var i = 0; i < pairs.length; i++) {
            kv = pairs[i].split('=');
            post_data[kv[0]]=decodeURIComponent((kv[1]+'').replace(/+/g, '%20'));
          }

          //Verify sender is Mailgun
          var sig = crypto.createHmac('sha256', process.env.MAILGUN_API_KEY).update(post_data['timestamp']+post_data['token']).digest('hex');
          if(sig !== post_data['signature']) {
            res.writeHead(403);
            res.end();
          }
          else {
            Fiber(function() {
                Meteor.call("publishGeo", post_data);
                res.writeHead(200);
                res.end();
            }).run();
          }
      });
    });
  });

  app.use(router);

                                
                            

Hacia la mitad, verás dónde realizamos un cálculo rápido de HMAC para confirmar la identidad del remitente. Mailgun incluye un token de firma en cada webhook y podemos verificar su validez aplicando una función hash al token proporcionado y a la marca de tiempo con nuestra clave de API. No es un requisito, sino una recomendación para cualquier aplicación orientada al público. Esto es muy fácil de hacer con el método HMAC que se encuentra en la biblioteca “crypto”.

Con esta ruta lista y activada en nuestro servidor, podemos preparar el entorno de Mailgun para nuestros webhooks.

Si inicias sesión en Mailgun, verás la pestaña de seguimiento en la parte superior de tu panel de control. En la parte inferior de la página de seguimiento, verás un campo para introducir el destino de las solicitudes POST que Mailgun enviará cada vez que se abra un email.

En esta app de demostración, vamos a asignar un ID único a cada sesión del navegador, el cual incluiremos en la llamada de la API de Mailgun (en ese encabezado HTTP X-Mailgun-Variables que enviamos antes). Cuando el webhook de apertura regrese, podremos analizar no solo los detalles de geolocalización, sino también ese código de ID de sesión único. Así sabremos a qué sesión de navegador pertenece el webhook, y podremos mostrar la ubicación correcta en el mapa.

Gracias a la potencia del marco de Meteor, el navegador (el cliente) puede observar los cambios en el conjunto de datos de los webhooks recibidos. Al utilizar el evento de colección añadido en el cliente, este se actualiza inmediatamente tras añadir otro evento de webhook en nuestra base de datos. Dentro del evento añadido, solo tenemos que generar un marcador de ubicación de Google Maps utilizando los valores de ciudad, región y país incluidos en el webhook. Aquí también es donde comprobaremos el ID único con nuestro ID de sesión actual: si coinciden, el marcador se colocará al frente del mapa (con z-index) con un icono rojo.

El último fragmento de código del lado del cliente consiste en garantizar que cada marcador del mapa tenga una ventana emergente con algunos detalles adicionales del navegador que Mailgun también incluye en los datos del webhook. Los webhooks de seguimiento de Mailgun también incluyen datos muy útiles, como el sistema operativo, qué cliente de email se utilizó para abrir/leer el mensaje o el tipo de dispositivo (ideal para comparar el uso en dispositivos móviles frente a equipos de escritorio).

Y ya está: tu aplicación de Meteor está lista para recibir webhooks de seguimiento y de apertura por parte de Mailgun, de forma segura y fiable.

Para ver todo esto en acción, visita el sitio web de la demo y el código fuente en Github.

Autor: The Sinch Mailgun team The Sinch Mailgun team shares news, best practices, and strategies to take your products and apps to the next level using email. Subscribe to our newsletter to get all the articles in your inbox!