Enviando e-mail com JavaScript

Os navegadores bloqueiam conexões TCP brutas com servidores de e-mail. Além disso, colocar uma chave API ou uma senha SMTP no código do frontend expõe suas credenciais a qualquer pessoa que abra as ferramentas de desenvolvedor.

Por que o navegador não consegue enviar e-mail?

Os navegadores não expõem sockets TCP brutos ao JavaScript, então o código do lado do cliente não consegue abrir a conexão SMTP que um servidor de e-mail exige. Chamar uma API de e-mail via HTTP diretamente do navegador também expõe sua chave API no código-fonte da página e na aba de rede. O navegador coleta os dados do formulário e os envia ao seu backend; o backend envia o e-mail.

Como enviar a partir de um backend Node com SMTP?

O Nodemailer é a biblioteca padrão para SMTP no Node. Você configura um transporte uma vez e depois chama sendMail:

import nodemailer from "nodemailer";

const transporter = nodemailer.createTransport({
  host: "smtp.example.com",
  port: 587,
  secure: false,
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

await transporter.sendMail({
  from: "you@yourdomain.com",
  to: "recipient@example.org",
  subject: "Your receipt",
  text: "Thanks for your order.",
  html: "<p>Thanks for your order.</p>",
});

Isso funciona bem em um servidor de longa execução. O Nodemailer também oferece suporte a anexos de arquivos e a testes locais de SMTP.

Como enviar com uma API de e-mail via HTTP?

Seu backend também pode enviar e-mail enviando JSON a uma API de e-mail via HTTP com fetch. Como esse método usa HTTPS padrão em vez de sockets TCP brutos, ele funciona tanto em servidores de longa execução quanto em runtimes serverless:

const res = await fetch("https://us1.platform.bird.com/v1/email/messages", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.BIRD_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    from: "onboarding@messagebird.dev",
    to: ["delivered@messagebird.dev"],
    subject: "Hello from JavaScript",
    html: "<p>It works.</p>",
  }),
});

if (!res.ok) {
  throw new Error(`Send failed: ${res.status}`);
}

Use o host correspondente à região do seu espaço de trabalho (us1.platform.bird.com para chaves bk_us1_, eu1.platform.bird.com para chaves bk_eu1_). Guarde a chave API em uma variável de ambiente no servidor, para que ela nunca seja enviada ao cliente.

Envie com Bird

Para enviar a partir de Node.js ou TypeScript com respostas tipadas e novas tentativas automáticas, passe BIRD_API_KEY para o SDK TypeScript do Bird:

import { BirdClient } from "@messagebird/sdk";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const { data, error } = await bird.email
  .send({
    from: "onboarding@messagebird.dev",
    to: ["delivered@messagebird.dev"],
    subject: "Hello from Node",
    html: "<p>It works.</p>",
  })
  .safe();

O remetente onboarding@messagebird.dev e o destinatário sandbox delivered@messagebird.dev permitem verificar sua configuração antes de você configurar um domínio personalizado. Se você cria os corpos dos e-mails como componentes React, o React Email renderiza o componente na string HTML passada em html.