E-Mail senden mit JavaScript

JavaScript sendet E-Mails von einem Server, niemals direkt aus dem Browser. Clientseitiger Code kann keine SMTP-Verbindung öffnen, und E-Mail-Zugangsdaten in einer Seite abzulegen würde sie jedem zugänglich machen, der die Entwicklertools öffnet. Die eigentliche Frage ist also, welchen serverseitigen Weg Sie nutzen: SMTP über eine Bibliothek wie Nodemailer oder eine HTTP-Anfrage an einen E-Mail-API. Dieser Beitrag zeigt beide.

Warum kann der Browser keine E-Mails senden?

E-Mail-Zustellung läuft über SMTP, ein TCP-Protokoll. Browser stellen JavaScript keine rohen TCP-Sockets zur Verfügung, es gibt also clientseitig keine Möglichkeit, mit einem Mailserver zu kommunizieren. Selbst wenn es sie gäbe, würden die SMTP-Zugangsdaten oder der API-Schlüssel in Code stehen, den jeder lesen kann. Der Browser sammelt die Formulareingabe und sendet sie an Ihr Backend; das Backend verschickt die E-Mail. Diese Trennung ist das gesamte Muster.

Wie senden Sie von einem Node-Backend mit SMTP?

Nodemailer ist die Standardbibliothek für SMTP in Node. Sie konfigurieren einen Transport einmal und rufen dann sendMail auf:

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>",
});

Das funktioniert gut auf einem dauerhaft laufenden Server. Die vollständige Anleitung, einschließlich Anhänge und lokales Testen, finden Sie unter E-Mails senden mit Nodemailer.

Wie senden Sie mit einem HTTP-E-Mail-API?

Der andere Weg ist eine HTTP-Anfrage. Ihr Backend ruft einen E-Mail-API mit fetch auf. Das erspart Ihnen den Betrieb eines Mailservers und verhält sich gleich, egal ob Sie auf einem klassischen Host oder einer Serverless-Funktion laufen:

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

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

Der Schlüssel liegt weiterhin auf dem Server, in einer Umgebungsvariable, und wird niemals an den Client ausgeliefert.

Senden mit Bird

Das Bird Node SDK kapselt denselben HTTP-Aufruf, sodass Sie das manuelle fetch überspringen und typisierte Ergebnisse erhalten:

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

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

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

Die delivered@bird.dev-Sandbox-Adresse nimmt immer E-Mails an, sodass der erste Lauf Ihr Setup bestätigt. Wenn Sie Ihre E-Mail-Bodys als React-Komponenten erstellen, kombinieren Sie das mit React Email, das die Komponente in das HTML rendert, das Sie in html übergeben.

FAQ

Kann clientseitiges JavaScript E-Mails senden?

Nein. Browser können keine SMTP-Verbindungen öffnen, und alle Zugangsdaten im Clientcode sind einsehbar. Der Browser sendet Formulardaten an Ihr Backend, und das Backend verschickt die E-Mail.

Sollte ich Nodemailer oder einen HTTP-API verwenden?

Nodemailer eignet sich gut für einen dauerhaft laufenden Server, auf dem Sie SMTP kontrollieren. Ein HTTP-API ist einfacher, wenn Sie keinen Mailserver betreiben möchten, und ist die zuverlässige Wahl auf Serverless-Plattformen, auf denen SMTP-Sockets nicht verfügbar sind.

Wo bewahre ich den API-Schlüssel auf?

In einer serverseitigen Umgebungsvariable, die zur Laufzeit gelesen wird. Er darf niemals in Frontend-Code oder in einem öffentlichen Repository auftauchen.

JavaScript allein stellt keine E-Mails zu; das erledigt ein Server. Für den API-Weg im Detail behandeln die E-Mail-Produktübersicht und die Anleitung zum E-Mail-Versand die einzelnen Bestandteile.