Dev Life
Cómo enviar emails en JavaScript: frontend y backend
Hay dos formas de integrar el email en tu aplicación: un enfoque exclusivo de frontend o un método impulsado por backend. El enfoque de frontend utiliza el protocolo mailto y JavaScript puro, pero es limitado y expone información sensible. El método de backend, mediante Node.js y la API de Mailgun, te ofrece un mayor control, seguridad y flexibilidad.
Esta guía te muestra ambas opciones para que puedas decidir qué funciona mejor en tu entorno.
Enviar emails desde el frontend
El Protocolo simple de transferencia de correo (SMTP) es el protocolo estándar para enviar emails en internet. Para enviar un email desde el frontend, necesitas conectarte a un servidor SMTP, lo cual requiere un nombre de usuario, una contraseña o una clave de API proporcionada por un host SMTP como Mailgun para la autenticación. Sin embargo, esta conexión también expondrá las credenciales del host SMTP y las dejará vulnerables a robos.
Como alternativa más segura, puedes configurar una función “serverless” dedicada o un backend sencillo que utilice la API de Mailgun para enviar emails y se conecte de forma segura con tu frontend. Sin embargo, este enfoque no es “exclusivo de frontend”, ya que implica servidores y puede ser difícil de configurar sin un backend tradicional.
El método “exclusivo de frontend” más viable y seguro para enviar emails consiste en usar un hipervínculo como disparador de la aplicación de email predeterminada con una plantilla rellenada lista para enviar. Este enfoque no necesita un servidor SMTP ni credenciales porque el email se envía a través del cliente de email del usuario en lugar de tu aplicación. Puedes configurarlo usando el protocolo mailto.
El JavaScript del lado del cliente no puede enviar emails directamente a través de SMTP porque los navegadores no admiten conexiones de socket directas al servidor debido a restricciones de seguridad. El método exclusivo de frontend más viable y seguro consiste en usar un hipervínculo mailto para abrir el cliente de email predeterminado con una plantilla rellenada, lo que evita la necesidad de usar servidores SMTP o exponer credenciales.
Enviar emails desde el frontend mediante el protocolo mailto
El protocolo mailto es un esquema de URL que permite enviar emails al hacer clic en un enlace. Al hacer clic en un enlace mailto, se abre el buzón predeterminado con el destinatario del email rellenado. Además de rellenar el destinatario del email, también puedes personalizar tu enlace mailto para que incluya un asunto, un cuerpo, copias carbón (cc) y copias carbón ocultas (bcc).
Al hacer clic en un enlace mailto:, el navegador abre el cliente de email predeterminado (como Outlook o Gmail) en una ventana o pestaña nueva con la dirección del destinatario rellenada. Estos enlaces también pueden incluir parámetros para rellenar los campos de asunto, cuerpo, cc y bcc, lo que permite usar una plantilla de email personalizable que funciona como un disparador desde el frontend sin enviar un email directamente desde JavaScript.
Los enlaces mailto utilizan la siguiente sintaxis:
mailto:sAddress[sHeaders]
Una URL mailto: abre el cliente de email predeterminado con la dirección del destinatario rellenada, y puedes personalizarla añadiendo parámetros como asunto, cuerpo, cc y bcc mediante cadenas de consulta. sAddress hace referencia a una o varias direcciones de email válidas separadas por un punto y coma, y sHeaders (opcional) indica los parámetros de consulta que contienen el asunto, el cuerpo, cc y bcc.
Para enviar un email desde el frontend usando el protocolo mailto, crea un formulario HTML que permita introducir el destinatario (o destinatarios), el asunto, el cuerpo, cc y bcc. Puedes usar estas entradas para generar una URL mailto con JavaScript. Al enviar el formulario, el navegador abre el buzón predeterminado con el enlace mailto que has creado.
Para crear el formulario, añade el siguiente bloque de código a un archivo HTML nuevo:
<!DOCTYPE html>rn<html lang="en">rn <head>rn <meta charset="UTF-8" />rn <meta name="viewport" content="width=device-width, initial-scale=1.0" />rn <title>Emails</title>rn <script defer src="./script.js"></script>rn </head>rn <body>rn <form method="post">rn <!-- Add recipient field -->rn <inputrn id="recipient"rn type="text"rn name="recipient"rn placeholder="Recipient"rn />rn <!-- Add subject field -->rn <input id="subject" type="text" name="subject" placeholder="Subject" />rn <!-- Add message field -->rn <textarea id="message" name="message" placeholder="Email Body"></textarea>rn <!-- Add optional cc & bcc fields -->rn <input id="cc" type="text" name="cc" placeholder="CC" />rn <input id="bcc" type="text" name="bcc" placeholder="BCC" />rnrn <input id="send" type="button" value="Open Mail" />rn </form>rnrn <!-- Basic styles -->rn <style>rn body {rn display: flex;rn justify-content: center;rn align-items: center;rn height: 100vh;rn margin: 0;rn }rn form {rn display: flex;rn flex-direction: column;rn gap: 1rem;rn }rn input,rn textarea {rn padding: 0.5rem;rn border: 1px solid #ccc;rn border-radius: 0.25rem;rn }rn input[type="button"] {rn background-color: #007bff;rn color: white;rn border: none;rn border-radius: 0.25rem;rn padding: 0.5rem 1rem;rn cursor: pointer;rn }rn </style>rn </body>rn</html>rn
El formulario incluye un destinatario, un cc, un bcc, un asunto, un campo de cuerpo y un botón de envío. El código también añade algo de estilo básico al formulario:
Crea un archivo script.js y pega el siguiente código para añadir un receptor de eventos click al botón de envío, el cual actúa como disparador de la función openMailBox:
// script.jsrnconst submitButton = document.getElementById("send");rnrnsubmitButton?.addEventListener("click", openMailBox);rnrnfunction openMailBox(e) {rn e.preventDefault();rnrn // Get valuesrn const recipient = document.getElementById("recipient").value;rn const subject = document.getElementById("subject").value;rn const message = document.getElementById("message").value;rn const cc = document.getElementById("cc").valuern const bcc = document.getElementById("bcc").valuernrn // Create a mailto link and encode the valuesrn const mailtoLink = `mailto:${encodeURIComponent(rn recipientrn )}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(rn messagern )}&cc=${encodeURIComponent(cc)}&bcc=${encodeURIComponent(bcc)}`;rnrn // Open user's mailbox with prefilled contentrn window.open(mailtoLink, "_blank");rn}rn
La función openMailBox extrae los valores del formulario y crea un enlace mailto al concatenar la versión codificada de los valores para evitar problemas con caracteres especiales (espacios, &, =, ?) en la URL mailto. También abre el enlace mailto en una pestaña nueva para usarlo como disparador del buzón.
Este método de enviar emails es útil para aplicaciones y sitios web a pequeña escala donde no es necesario un backend de email (como enlaces de contacto, formularios de opinión e incidencias de asistencia). Sin embargo, tiene algunas desventajas importantes, como el riesgo de exponer credenciales, la falta de seguimiento de la entrega de emails y los problemas a la hora de escalar.
Enviar emails desde el backend
En situaciones de gestión de emails más complejas o sensibles, enviar emails desde un backend ofrece mayor seguridad, ya que las credenciales se almacenan en el servidor. También es más fiable porque los sistemas backend pueden gestionar el envío masivo de emails y las colas de email, lo que garantiza que los mensajes se envíen de forma fiable incluso durante picos de tráfico.
Puedes usar un servicio de correo como Mailgun para simplificar este proceso. Mailgun gestiona las complejidades de los protocolos de email (SMTP, API HTTP), la verificación de dominio y la prevención del spam.
Configurar tu entorno de desarrollo
Para enviar emails con Node.js y Mailgun, primero debes crear un entorno de desarrollo ejecutando el siguiente comando:
mkdir email-service && cd email-service && npm init -y
El comando anterior crea una carpeta email-service e inicializa npm con sus valores predeterminados en la carpeta.
Instala los paquetes necesarios con el siguiente comando:
npm install mailgun.js form-data dotenv
Las dependencias instaladas incluyen las siguientes:
Mailgun.js(el SDK de Node.js de Mailgun), que necesitas para interactuar con Mailgun mediante Node.js. Instala el SDK de Node.js de Mailgun o nodemailer (npm install nodemailer) para enviar emails de forma segura desde tu backend.Dotenv, una biblioteca que carga variables de entorno enprocess.env. Lo necesitarás para gestionar tus credenciales sensibles de forma segura.Form-Data, una biblioteca que crea flujosmultipart/form-datalegibles. Mailgun solo acepta datos en formatomultipart/form-data, por lo que necesitas esta biblioteca para inicializar el SDK.
Tras instalar las dependencias anteriores, necesitas conseguir una clave de API desde el panel de control de Mailgun.
Recuperar la clave de API de Mailgun
Para conseguir tu clave de API, primero inicia sesión en tu cuenta de Mailgun. En tu panel de control, haz clic en el botón desplegable de la parte superior derecha de la pantalla y pulsa el botón API Security.
En la página API Security, haz clic en el botón Add new key para que se abra un modal con un formulario. Rellena la descripción en el modal emergente y haz clic en el botón Create Key. Luego, copia la clave de API que se muestra y añádela a tu archivo .env.
A continuación, crea un archivo index.js y un archivo .env en el directorio de tu proyecto. En tu archivo .env, añade las variables que aparecen a continuación y sustituye el valor del marcador de posición por el valor real:
MAILGUN_API_KEY =
Enviar emails usando el SDK de Node.js de Mailgun
Ahora que ya tienes tu clave de API, puedes inicializar tu SDK de Mailgun. En tu archivo index.js, añade las importaciones necesarias e inicializa dotenv añadiendo el siguiente código:
// index.jsrnconst formData = require("form-data");rnconst Mailgun = require("mailgun.js");rnconst dotenv = require("dotenv");rnrndotenv.config();rnInitialize the Mailgun SDK with the formData package and connect to the Mailgun client using your credentials:rn// index.jsrnconst mailgun = new Mailgun(formData);rnrnconst mg = mailgun.client({rn username: "api",rn key: process.env.MAILGUN_API_KEY,rn});rn
Puedes enviar emails utilizando la función messages.create del SDK de Mailgun. Toma como argumentos un dominio de email y un objeto que contiene detalles sobre el email que deseas enviar. El dominio de email debe añadirse a tu cuenta de Mailgun y estar verificado. Sigue esta guía para añadir y verificar un dominio de email personalizado. Como alternativa, puedes usar el dominio sandbox predeterminado que proporciona Mailgun.
Los detalles del objeto incluyen los siguientes (entre otros):
fromindica al destinatario quién envía el email. Esta propiedad debe ser tu dominio registrado.toes la dirección de email del destinatario (o destinatarios).subjectes el asunto del email.textes el contenido del email.htmles el contenido del email en HTML. Una llamada de función no puede tener las propiedadestextyhtmla la vez; una de las dos se descartaría.
Puedes explorar más opciones disponibles en la documentación oficial del SDK de Node.js.
Por ejemplo, añade el bloque de código siguiente a tu archivo index.js para implementar una función que envíe un email:
// index.jsrnasync function sendEmail(domain, from, to, subject, text) {rn try {rn const response = await mg.messages.create(domain, {rn from,rn to,rn subject,rn text,rn });rnrn console.log(response);rn } catch (error) {rn console.log(error);rn }rn}
Puedes llamar a la función de la siguiente manera:
// index.jsrnsendEmail(rn "<MAILGUN_DOMAIN>",rn "<SENDER_NAME> <SENDER_EMAIL>",rn "<RECIPIENT_EMAIL>",rn "<EMAIL_SUBJECT>",rn "<EMAIL_BODY>"rn);
Ejecuta la función con el siguiente comando:
node index
Debería registrarse una respuesta similar a esta en la consola:
{
status: 200,
id: '',
message: 'Queued. Thank you.'
}
El email ya debería haberse entregado en el buzón del destinatario.
Mejores prácticas para enviar emails desde el backend
Sin la configuración adecuada, los emails enviados desde tu backend podrían marcarse como spam, no llegar a los destinatarios o ser bloqueados por los proveedores. Para mejorar la entregabilidad, sigue estas mejores prácticas:
- Utiliza un ESP de confianza: a la hora de enviar emails desde el backend, es importante usar un proveedor de servicios de envío de emails (ESP) de confianza como Mailgun para gestionar las complejidades de la entrega de los emails. Esto incluye garantizar que tus emails no se marquen como spam al aplicar la autenticación de dominio (SPF, DKIM, DMARC).
- Almacena las claves de API de forma segura: otra consideración importante es almacenar de forma segura tus claves de API mediante el uso de variables de entorno, lo que garantiza que no se roben ni utilicen con fines maliciosos, algo que afectaría a tu reputación como remitente. Mailgun ofrece claves de API con alcance limitado, lo que te permite otorgar permisos específicos (como “solo envío”) para minimizar el riesgo de abuso.
- Supervisa las analíticas de los emails: también debes hacer un seguimiento de las tasas de entrega, los rebotes y los emails fallidos para poder tomar medidas correctivas. El panel de control de Mailgun proporciona información sobre las tasas de rebote, las tasas de entrega y las métricas de interacción que te ayudarán a optimizar las campañas de email. Mailgun también ofrece una API para validar direcciones de email, lo que garantiza que solo envías emails a destinatarios válidos y, por tanto, reduces tus tasas de rebote.
Seguir estas mejores prácticas te ayudará a garantizar una entrega de emails fiable y a minimizar los filtros de spam.
En resumen
En este artículo, has visto cómo enviar emails mediante un enfoque exclusivo de frontend y un enfoque de backend. El enfoque exclusivo de frontend es fácil de configurar, pero no es ideal para las funciones de email complejas debido a sus limitaciones. El enfoque de backend ofrece una solución con más funciones para la integración de email que resulta más sencilla gracias a los proveedores de servicios de envío de emails como Mailgun.
Con Mailgun, puedes enviar emails de forma segura, optimizar tu entregabilidad del email y gestionar y validar tus listas de correo.
