Dev Life
Como enviar e-mails em JavaScript: frontend e backend
Existem duas maneiras de integrar o e-mail ao seu aplicativo: uma abordagem exclusiva de frontend ou um método focado no backend. A abordagem de frontend usa o protocolo mailto e JavaScript puro, mas é limitada e expõe informações confidenciais. O método de backend, usando Node.js e a API do Mailgun, oferece melhor controle, segurança e flexibilidade.
Este guia apresenta as duas opções, para que você decida qual funciona melhor para a sua configuração.
Como enviar e-mails pelo frontend
O Simple Mail Transfer Protocol (SMTP) é o protocolo padrão para o envio de e-mails na internet. Para enviar um e-mail pelo frontend, você precisa de uma conexão com um servidor SMTP, o que exige um nome de usuário, uma senha ou uma chave de API fornecida por um host SMTP, como o Mailgun, para autenticação. No entanto, essa conexão também expõe as credenciais do host SMTP, deixando-as vulneráveis a roubos.
Como uma alternativa mais segura, você pode configurar uma função serverless dedicada ou um backend simples que use a API do Mailgun para enviar e-mails e se conecte com segurança ao seu frontend. Contudo, essa abordagem não é “exclusiva de frontend”, pois envolve servidores e pode ser difícil de configurar sem um backend tradicional.
O método “exclusivo de frontend” mais viável e seguro para o envio de e-mails envolve usar um hiperlink para acionar o aplicativo de e-mail padrão da pessoa com um modelo preenchido pronto para envio. Essa abordagem não precisa de um servidor SMTP ou credenciais, pois o e-mail é enviado por meio do cliente de e-mail da pessoa, em vez do seu aplicativo. Você pode configurar isso usando o protocolo mailto.
O JavaScript do lado do cliente não pode enviar e-mails diretamente via SMTP porque os navegadores não oferecem suporte a conexões de soquete diretas com o servidor devido a restrições de segurança. O método exclusivo de frontend mais viável e seguro envolve o uso de um hiperlink mailto para abrir o cliente de e-mail padrão da pessoa com um modelo preenchido, evitando a necessidade de servidores SMTP ou a exposição de credenciais.
Como enviar e-mails do frontend com o protocolo mailto
O protocolo mailto é um esquema de URL que permite o envio de e-mails por meio de um clique em um link. Quando alguém clica em um link mailto, ele abre a caixa de correio padrão dessa pessoa com o destinatário do e-mail já preenchido. Além do preenchimento do destinatário, você também pode personalizar seu link mailto para incluir um assunto, um corpo, cópia (cc) e cópia oculta (bcc).
Quando alguém clica em um link mailto:, o navegador abre o cliente de e-mail padrão (como Outlook ou Gmail) em uma nova janela ou aba com o endereço do destinatário já preenchido. Esses links também podem incluir parâmetros para preencher os campos de assunto, corpo, cc e bcc, ativando um modelo de e-mail personalizável acionado pelo frontend sem enviar um e-mail diretamente pelo JavaScript.
Os links mailto usam a seguinte sintaxe:
mailto:sAddress[sHeaders]
Uma URL mailto: abre o cliente de e-mail padrão da pessoa com o endereço do destinatário preenchido, e é possível personalizá-la anexando parâmetros como assunto, corpo, cc e bcc usando query strings. sAddress refere-se a um ou mais endereços de e-mail válidos separados por ponto e vírgula, e sHeaders (opcional) refere-se aos parâmetros de consulta com assunto, corpo, cc e bcc.
Para enviar um e-mail pelo seu frontend usando o protocolo mailto, crie um formulário HTML para que as pessoas insiram o(s) destinatário(s), o assunto, o corpo, cc e bcc. É possível usar essas entradas para gerar uma URL mailto com JavaScript. Ao enviar o formulário, o navegador abre a caixa de correio da pessoa usando o link mailto que você criou.
Para criar o formulário, adicione o seguinte bloco de código a um novo arquivo HTML:
<!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
O formulário inclui um destinatário, cc, bcc, assunto, um campo de corpo e um botão de envio. O código também adiciona um estilo básico ao formulário:
Crie um arquivo script.js e cole o código a seguir para adicionar um ouvinte de evento de click ao botão de envio, o qual aciona a função 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
A função openMailBox extrai os valores do formulário e cria um link mailto ao concatenar a versão codificada dos valores para evitar problemas com caracteres especiais (espaços, &, =, ?) na URL mailto. Ela também abre o link mailto em uma nova aba para acionar a caixa de correio da pessoa.
Esse método de envio de e-mails é útil para aplicativos e sites de pequena escala em que um backend de e-mail é desnecessário (como links de “Fale conosco”, formulários de feedback e tickets de suporte). Contudo, ele apresenta algumas desvantagens significativas, incluindo o risco de expor credenciais, a falta de rastreamento de entrega de e-mails e desafios de escalabilidade.
Como enviar e-mails pelo backend
Em cenários mais complexos ou sensíveis de tratamento de e-mail, enviar e-mails por um backend oferece segurança aprimorada, pois as credenciais ficam armazenadas no servidor. Também é mais confiável, já que sistemas de backend podem gerenciar e-mails em massa e filas de e-mail, garantindo o envio seguro de mensagens, mesmo durante picos de tráfego.
Você pode usar um serviço de envio como o Mailgun para simplificar esse processo. O Mailgun lida com as complexidades dos protocolos de e-mail (SMTP, APIs HTTP), verificação de domínio e prevenção contra spam.
Configure seu ambiente de desenvolvimento
Para enviar e-mails com o Node.js e o Mailgun, primeiro você precisará criar um ambiente de desenvolvimento rodando o seguinte comando:
mkdir email-service && cd email-service && npm init -y
O comando acima cria uma pasta email-service e inicializa o npm com as configurações padrão na pasta.
Instale os pacotes necessários com o seguinte comando:
npm install mailgun.js form-data dotenv
As dependências instaladas incluem:
Mailgun.js(SDK para Node.js do Mailgun), que você precisa para interagir com o Mailgun usando o Node.js. Instale o SDK para Node.js do Mailgun ou o nodemailer (npm install nodemailer) para enviar e-mails com segurança pelo seu backend.Dotenv, uma biblioteca que carrega variáveis de ambiente paraprocess.env. Você precisará dela para gerenciar com segurança suas credenciais confidenciais.Form-Data, uma biblioteca que cria streams demultipart/form-datalegíveis. O Mailgun aceita apenas dados emmultipart/form-data, portanto, essa biblioteca é necessária para inicializar o SDK.
Depois de instalar as dependências acima, você precisa obter uma chave de API do seu painel do Mailgun.
Obtenha sua chave de API do Mailgun
Para obter sua chave de API, primeiro faça login na sua conta do Mailgun. No seu painel de usuário, clique no botão suspenso no canto superior direito da tela e, em seguida, clique no botão API Security.
Na página API Security, clique no botão Add new key para revelar um modal com um formulário. Preencha a descrição no modal pop-up, clique no botão Create Key, copie a chave de API exibida e adicione-a ao seu arquivo .env.
Em seguida, crie um arquivo index.js e um arquivo .env no diretório do seu projeto. No seu arquivo .env, adicione as variáveis abaixo e substitua o valor do placeholder por seu valor real:
MAILGUN_API_KEY =
Envie e-mails usando o SDK para Node.js do Mailgun
Agora que tem a sua chave de API, você já pode inicializar o SDK do Mailgun. No seu arquivo index.js, adicione as importações necessárias e inicialize o dotenv incluindo o código a seguir:
// 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
É possível enviar e-mails por meio da função messages.create do SDK do Mailgun. Ela recebe como argumentos um domínio de e-mail e um objeto que contém detalhes sobre o e-mail que você deseja enviar. O domínio de e-mail precisa ser adicionado e verificado na sua conta do Mailgun. Siga este guia para adicionar e verificar um domínio de e-mail personalizado. Como alternativa, você pode usar o domínio sandbox padrão fornecido pelo Mailgun.
Os detalhes do objeto incluem (entre outros):
frommostra ao destinatário quem enviou o e-mail. Essa propriedade deve ser o seu domínio registrado.toé o(s) endereço(s) de e-mail do(s) destinatário(s).subjecté o assunto do e-mail.texté o conteúdo do e-mail.htmlé o conteúdo do e-mail em HTML. Uma chamada de função não pode ter as propriedadestextehtmlao mesmo tempo; uma delas seria descartada.
Você pode explorar mais opções disponíveis na documentação oficial do SDK do Node.js.
Por exemplo, adicione o bloco de código abaixo ao seu arquivo index.js para implementar uma função que envia um e-mail:
// 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}
Você pode chamar a função assim:
// index.jsrnsendEmail(rn "<MAILGUN_DOMAIN>",rn "<SENDER_NAME> <SENDER_EMAIL>",rn "<RECIPIENT_EMAIL>",rn "<EMAIL_SUBJECT>",rn "<EMAIL_BODY>"rn);
Execute a função rodando o seguinte comando:
node index
Uma resposta parecida com esta deve ser registrada no console:
{
status: 200,
id: '',
message: 'Queued. Thank you.'
}
O e-mail já deve ter sido entregue na caixa de correio do destinatário.
Práticas recomendadas para o envio de e-mails do back-end
Sem a configuração adequada, os e-mails enviados do seu back-end podem ser sinalizados como spam, não chegar aos destinatários ou acabar bloqueados pelos provedores. Para melhorar a entregabilidade, siga estas práticas recomendadas:
- Use um ESP confiável: ao enviar e-mails do back-end, é importante usar um provedor de serviços de e-mail (ESP) renomado, como o Mailgun, para lidar com as complexidades da entrega de e-mail. Isso inclui garantir que seus e-mails não sejam marcados como spam por meio da imposição da autenticação de domínio de e-mail (SPF, DKIM, DMARC).
- Armazene as chaves de API com segurança: outra consideração importante é armazenar suas chaves de API de forma segura usando variáveis de ambiente para garantir que não sejam roubadas e usadas para fins maliciosos, afetando, assim, a reputação do remetente. O Mailgun oferece chaves de API com escopo, permitindo que você conceda permissões específicas (como “apenas envio”) para minimizar o risco de abuso.
- Monitore as análises de e-mail: você também precisa rastrear as taxas de entrega, devoluções e e-mails com falha para tomar ações corretivas. O painel do Mailgun fornece insights sobre taxas de devolução, taxas de entrega e métricas de engajamento que ajudam você a otimizar as campanhas de e-mail. O Mailgun também oferece uma API para validar endereços de e-mail, garantindo que você envie e-mails apenas para destinatários válidos, reduzindo, assim, suas taxas de devolução.
Seguir essas práticas recomendadas ajudará a garantir uma entrega de e-mail confiável e a minimizar a filtragem de spam.
Conclusão
Neste artigo, você explorou como enviar e-mails usando uma abordagem apenas de front-end e uma abordagem de back-end. A abordagem apenas de front-end é simples de configurar, mas não é a ideal para funções de e-mail complexas devido às suas limitações. A abordagem de back-end oferece uma solução com mais recursos para a integração de e-mail, o que se torna mais simples com provedores de serviços de e-mail como o Mailgun.
Com o Mailgun, você pode enviar e-mails de forma segura, otimizar sua entregabilidade de e-mail, além de gerenciar e validar suas listas de e-mails.
