E-Mail senden mit JavaScript

Browser blockieren rohe TCP-Verbindungen zu Mailservern. Wenn Sie einen API-Schlüssel oder ein SMTP-Passwort in Frontend-Code ablegen, werden Ihre Zugangsdaten außerdem für jeden sichtbar, der die Entwicklertools öffnet.

Warum kann der Browser keine E-Mails senden?

Browser stellen JavaScript keine rohen TCP-Sockets zur Verfügung, daher kann clientseitiger Code nicht die SMTP-Verbindung öffnen, die ein Mailserver verlangt. Wenn Sie einen HTTP-E-Mail-API direkt aus dem Browser aufrufen, steht Ihr API-Schlüssel außerdem im Seitenquelltext und im Netzwerk-Tab. Der Browser sammelt die Formulareingabe und sendet sie an Ihr Backend; das Backend verschickt die E-Mail.

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. Nodemailer unterstützt außerdem Dateianhänge und lokales Testen von SMTP.

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

Ihr Backend kann E-Mails auch senden, indem es JSON mit fetch an einen HTTP-E-Mail-API sendet. Da dabei Standard-HTTPS statt roher TCP-Sockets zum Einsatz kommt, funktioniert das sowohl auf dauerhaft laufenden Servern als auch in Serverless-Laufzeitumgebungen:

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}`);
}

Wählen Sie den Host passend zur Region Ihres Workspace (us1.platform.bird.com für bk_us1_-Schlüssel, eu1.platform.bird.com für bk_eu1_-Schlüssel). Bewahren Sie den API-Schlüssel in einer serverseitigen Umgebungsvariable auf, damit er nie an den Client ausgeliefert wird.

Senden mit Bird

Um aus Node.js oder TypeScript mit typisierten Antworten und automatischen erneuten Versuchen zu senden, übergeben Sie BIRD_API_KEY an das Bird TypeScript-SDK:

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();

Mit dem Absender onboarding@messagebird.dev und dem Sandbox-Empfänger delivered@messagebird.dev prüfen Sie Ihr Setup, bevor Sie eine eigene Domain konfigurieren. Wenn Sie E-Mail-Inhalte als React-Komponenten erstellen, rendert React Email die Komponente in den HTML-String, den Sie in html übergeben.