Inviare email con JavaScript

I browser bloccano le connessioni TCP dirette verso i mail server. Inoltre, inserire una chiave API o una password SMTP nel codice frontend espone le tue credenziali a chiunque apra gli strumenti per sviluppatori.

Perché il browser non può inviare email?

I browser non espongono socket TCP grezzi a JavaScript, quindi il codice lato client non può aprire la connessione SMTP richiesta da un mail server. Anche chiamare un API email HTTP direttamente dal browser espone la tua chiave API nel sorgente della pagina e nella scheda di rete. Il browser raccoglie i dati del form e li invia al tuo backend; il backend invia l'email.

Come si invia da un backend Node con SMTP?

Nodemailer è la libreria standard per SMTP in Node. Configuri un transport una volta, poi chiami 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>",
});

Questo approccio funziona bene su un server a lunga esecuzione. Nodemailer supporta anche gli allegati e i test SMTP in locale.

Come si invia con un API email HTTP?

Il tuo backend può anche inviare email inviando JSON a un API email HTTP con fetch. Poiché usa lo standard HTTPS invece dei socket TCP grezzi, funziona sia sui server a lunga esecuzione sia sui runtime 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}`);
}

Scegli l'host in base alla regione del tuo spazio di lavoro (us1.platform.bird.com per le chiavi bk_us1_, eu1.platform.bird.com per le chiavi bk_eu1_). Conserva la chiave API in una variabile d'ambiente lato server, così non arriva mai al client.

Inviare con Bird

Per inviare da Node.js o TypeScript con risposte tipizzate e nuovi tentativi automatici, passa BIRD_API_KEY all'SDK TypeScript di 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();

Il mittente onboarding@messagebird.dev e il destinatario sandbox delivered@messagebird.dev verificano la tua configurazione prima che tu configuri un dominio personalizzato. Se costruisci il corpo delle email come componenti React, React Email renderizza il componente nella stringa HTML passata in html.