E-Mails in JavaScript versenden: Frontend und Backend

Es gibt zwei Möglichkeiten, E-Mails in Ihre App zu integrieren: einen reinen Frontend-Ansatz oder eine Backend-basierte Methode. Der Frontend-Ansatz nutzt das mailto-Protokoll und reines JavaScript, ist jedoch eingeschränkt und gibt sensible Daten preis. Die Backend-Methode mit Node.js und der Mailgun-API bietet Ihnen mehr Kontrolle, Sicherheit und Flexibilität.

Dieser Leitfaden führt Sie durch beide Optionen, damit Sie entscheiden können, was für Ihr Setup am besten geeignet ist.

Das Simple Mail Transfer Protocol (SMTP) ist das Standardprotokoll für den Versand von E-Mails im Internet. Um eine E-Mail vom Frontend aus zu versenden, benötigen Sie eine Verbindung zu einem SMTP-Server. Dafür ist ein Benutzername, ein Passwort oder ein API-Schlüssel erforderlich, der von einem SMTP-Host wie Mailgun zur Authentifizierung bereitgestellt wird. Allerdings legt diese Verbindung auch die Anmeldedaten des SMTP-Hosts offen, sodass sie anfällig für Diebstahl sind.

Als sicherere Alternative können Sie eine eigene serverlose Funktion oder ein einfaches Backend einrichten, das die Mailgun-API zum Versenden von E-Mails nutzt und eine sichere Verbindung zu Ihrem Frontend herstellt. Allerdings ist dieser Ansatz nicht „reines Frontend“, da er Server einbezieht und ohne ein herkömmliches Backend schwierig einzurichten sein kann.

Die praktikabelste und sicherste „Nur-Frontend“-Methode für den E-Mail-Versand nutzt einen Hyperlink. Dieser löst die Standard-E-Mail-App der Nutzer aus und stellt eine vorausgefüllte Vorlage zum Versenden bereit. Für diesen Ansatz sind weder ein SMTP-Server noch Anmeldedaten erforderlich, da die E-Mail über den E-Mail-Client der Nutzer und nicht über Ihre Anwendung gesendet wird. Sie können dies mithilfe des mailto-Protokolls.

 Clientseitiges JavaScript kann E-Mails nicht direkt über SMTP versenden, da Browser aufgrund von Sicherheitsbeschränkungen keine direkten Server-Socket-Verbindungen unterstützen. Die praktikabelste und sicherste reine Frontend-Methode besteht in der Verwendung eines mailto-Hyperlinks , um den Standard-E-Mail-Client des Nutzers mit einer vorausgefüllten Vorlage zu öffnen. Dadurch werden weder SMTP-Server benötigt noch Anmeldedaten offengelegt.

Das mailto-Protokoll ist ein URL-Schema, mit dem Nutzer durch Klicken auf einen Link E-Mails versenden können. Wenn ein Nutzer auf einen mailto-Link klickt, öffnet sich sein Standard-Postfach, wobei der Empfänger der E-Mail bereits vorausgefüllt ist. Zusätzlich zum vorausgefüllten Empfänger können Sie Ihren mailto-Link so anpassen, dass er einen Betreff, einen Textkörper sowie Kopie- (CC) und Blindkopie-Felder (BCC) enthält.

Wenn ein Nutzer auf einen mailto:-Link klickt, öffnet der Browser den Standard-E-Mail-Client (wie Outlook oder Gmail) in einem neuen Fenster oder Tab mit der vorausgefüllten Adresse des Empfängers. Diese Links können auch Parameter enthalten, um Betreff, Text, CC- und BCC-Felder vorauszufüllen. So wird eine anpassbare E-Mail-Vorlage vom Frontend aus getriggert, ohne dass direkt eine E-Mail über JavaScript gesendet wird.

mailto-Links verwenden folgende Syntax:

mailto:sAddress[sHeaders]

Eine mailto:-URL öffnet den Standard-E-Mail-Client des Nutzers mit der vorausgefüllten Empfängeradresse. Sie können sie anpassen, indem Sie über Query-Strings Parameter wie Betreff, Textkörper, CC und BCC anhängen. sAddress bezieht sich auf eine oder mehrere gültige E-Mail-Adressen, die durch ein Semikolon getrennt sind. sHeaders (optional) bezeichnet Abfrageparameter, die Betreff, Textkörper, CC und BCC enthalten.

Um eine E-Mail von Ihrem Frontend über das mailto-Protokoll zu versenden, erstellen Sie ein HTML-Formular. Darin können Nutzer Empfänger, Betreff, Text, CC und BCC eingeben. Sie können diese Eingaben verwenden, um mit JavaScript eine mailto-URL zu generieren. Wenn der Nutzer das Formular absendet, öffnet der Browser das Postfach des Nutzers über den von Ihnen erstellten mailto-Link.

Um das Formular zu erstellen, fügen Sie den folgenden Codeblock in eine neue HTML-Datei ein:

                                

                                    <!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
                                
                            

Das Formular enthält Empfänger-, CC-, BCC-, Betreff- und Textfelder sowie einen Absende-Button. Der Code fügt dem Formular zudem ein grundlegendes Styling hinzu:

Erstellen Sie eine script.js-Datei und fügen Sie den folgenden Code ein, um dem Absende-Button einen click-Event-Listener hinzuzufügen. Dieser triggert die Funktion 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
                                
                            

Die Funktion openMailBox extrahiert die Formularwerte und erstellt einen mailto-Link, indem sie die kodierte Version der Werte verknüpft. So werden Probleme mit Sonderzeichen (Leerzeichen, &, =, ?) in der mailto-URL vermieden. Außerdem wird der mailto-Link in einem neuen Tab geöffnet, um das Postfach des Nutzers zu triggern.

Diese Methode des E-Mail-Versands ist nützlich für kleine Anwendungen und Websites, bei denen ein E-Mail-Backend unnötig ist (wie „Kontakt“-Links, Feedback-Formulare und Support-Tickets). Es gibt jedoch einige erhebliche Nachteile, darunter das Risiko offengelegter Anmeldedaten, fehlendes Tracking der E-Mail-Zustellung sowie Schwierigkeiten bei der Skalierung.

Für komplexere oder sensiblere Szenarien der E-Mail-Verarbeitung bietet der Versand aus dem Backend mehr Sicherheit, da die Anmeldedaten auf dem Server gespeichert werden. Es ist zudem zuverlässiger, da Backend-Systeme Massen-E-Mails und E-Mail-Warteschlangen verwalten können. Das stellt sicher, dass Nachrichten auch bei hohem Traffic zuverlässig gesendet werden.

Sie können einen E-Mail-Dienst wie Mailgun verwenden, um diesen Prozess zu vereinfachen. Mailgun übernimmt die Komplexität von E-Mail-Protokollen (SMTP, HTTP-APIs), Domain-Verifizierung und Spam-Prävention.

Um E-Mails über Node.js und Mailgun zu versenden, müssen Sie zunächst eine Entwicklungsumgebung erstellen. Führen Sie dazu den folgenden Befehl aus:

mkdir email-service && cd email-service && npm init -y

Der obige Befehl erstellt einen email-service-Ordner und initialisiert npm mit den Standardwerten in diesem Ordner.

Installieren Sie die erforderlichen Pakete mit folgendem Befehl:

npm install mailgun.js form-data dotenv

Zu den installierten Abhängigkeiten gehören:

• Mailgun.js (das Node.js-SDK von Mailgun), das Sie benötigen, um über Node.js mit Mailgun zu interagieren. Installieren Sie das Node.js-SDK von Mailgun oder nodemailer (npm install nodemailer), um E-Mails sicher aus Ihrem Backend zu versenden.
• Dotenv, eine Bibliothek, die Umgebungsvariablen in process.env lädt. Sie benötigen diese, um Ihre sensiblen Anmeldedaten sicher zu verwalten.
• Form-Data, eine Bibliothek, die lesbare multipart/form-data-Streams erstellt. Mailgun akzeptiert Daten ausschließlich im multipart/form-data-Format. Sie benötigen diese Bibliothek also, um das SDK zu initialisieren.

Nach der Installation der obigen Abhängigkeiten müssen Sie sich in Ihrem Mailgun-Dashboard einen API-Schlüssel besorgen.

Melden Sie sich zunächst bei Ihrem Mailgun-Konto an, um Ihren API-Schlüssel zu erhalten. Klicken Sie in Ihrem Nutzer-Dashboard oben rechts auf dem Bildschirm auf die Dropdown-Schaltfläche und wählen Sie API Security.

Klicken Sie auf der Seite API Security auf den Button Add new key, um ein Modal mit einem Formular zu öffnen. Füllen Sie die Beschreibung im Pop-up-Modal aus und klicken Sie auf Create Key. Kopieren Sie den angezeigten API-Schlüssel und fügen Sie ihn zu Ihrer .env-Datei hinzu.

Erstellen Sie als Nächstes eine index.js-Datei und eine .env-Datei in Ihrem Projektverzeichnis. Fügen Sie in Ihrer .env-Datei die unten stehenden Variablen ein und ersetzen Sie den Platzhalter durch seinen tatsächlichen Wert:

MAILGUN_API_KEY =

Jetzt, da Sie Ihren API-Schlüssel haben, können Sie Ihr Mailgun-SDK initialisieren. Fügen Sie in Ihrer index.js-Datei die erforderlichen Importe hinzu und initialisieren Sie dotenv mit dem folgenden Code:

                                

                                    // 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
                                
                            

Über die Funktion messages.create im Mailgun-SDK können Sie E-Mails versenden. Sie erfordert eine E-Mail-Domain sowie ein Objekt mit den Details zur zu sendenden E-Mail als Argumente. Die E-Mail-Domain muss zu Ihrem Mailgun-Konto hinzugefügt und verifiziert werden. Folgen Sie diesen Leitfaden , um eine benutzerdefinierte E-Mail-Domain hinzuzufügen und zu verifizieren. Alternativ können Sie die von Mailgun bereitgestellte Standard-Sandbox-Domain verwenden.

Zu den Details im Objekt gehören unter anderem:

• from zeigt dem Empfänger, von wem die E-Mail stammt. Diese Eigenschaft sollte Ihre registrierte Domain sein.
• to ist die E-Mail-Adresse (oder sind die E-Mail-Adressen) der Empfänger.
• subject ist der Betreff der E-Mail.
• text ist der Inhalt der E-Mail.
• html ist der Inhalt der E-Mail als HTML. Ein Funktionsaufruf kann nicht gleichzeitig die Eigenschaften text und html aufweisen, andernfalls wird eine davon verworfen.

Weitere verfügbare Optionen finden Sie in den offiziellen Dokumentation des Node.js-SDKs.

Fügen Sie beispielsweise den folgenden Codeblock zu Ihrer index.js-Datei hinzu, um eine Funktion zum Versenden einer E-Mail zu implementieren:

                                

                                    // 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}
                                
                            

Sie können die Funktion wie folgt aufrufen:

                                

                                    // index.jsrnsendEmail(rn  "<MAILGUN_DOMAIN>",rn  "<SENDER_NAME> <SENDER_EMAIL>",rn  "<RECIPIENT_EMAIL>",rn  "<EMAIL_SUBJECT>",rn  "<EMAIL_BODY>"rn);
                                
                            

Führen Sie die Funktion aus, indem Sie den folgenden Befehl eingeben:

node index

Eine Antwort ähnlich der folgenden sollte in der Konsole protokolliert werden:

{
status: 200,
id: '',
message: 'Queued. Thank you.'
}

Die E-Mail sollte nun im Postfach des Empfängers zugestellt werden.

Ohne die richtige Einrichtung könnten vom Backend gesendete E-Mails als Spam markiert werden, Empfänger nicht erreichen oder von Anbietern blockiert werden. Um die Zustellbarkeit zu verbessern, befolgen Sie diese Best Practices:

• Einen renommierten ESP nutzen: Beim E-Mail-Versand aus dem Backend ist es wichtig, einen angesehenen E-Mail-Service-Provider (ESP) wie Mailgun zu nutzen. Er übernimmt die Komplexität der E-Mail-Zustellung und stellt durch die Durchsetzung der E-Mail-Domain-Authentifizierung (SPF, DKIM, DMARC) sicher, dass Ihre E-Mails nicht als Spam markiert werden.
• API-Schlüssel sicher speichern: Ein weiterer wichtiger Punkt ist die sichere Speicherung Ihrer API-Schlüssel mithilfe von Umgebungsvariablen. So wird verhindert, dass sie gestohlen und für böswillige Zwecke verwendet werden, was sich auf Ihre Absenderreputation auswirken würde. Mailgun bietet API-Schlüssel mit begrenztem Geltungsbereich, mit denen Sie spezifische Berechtigungen (wie z. B. „nur senden“) erteilen können, um das Missbrauchsrisiko zu minimieren.
• E-Mail-Analysen überwachen: Sie müssen außerdem Zustellraten, Bounces und fehlgeschlagene E-Mails tracken, um Korrekturmaßnahmen ergreifen zu können. Das Dashboard von Mailgun bietet Einblicke in Bounce-Raten, Zustellraten und Engagement-Metriken, die Ihnen helfen, E-Mail-Kampagnen zu optimieren. Mailgun bietet zudem eine API für die E-Mail-Adressen validieren, sodass Sie E-Mails nur an gültige Empfänger versenden und so Ihre Bounce-Raten reduzieren.

Die Einhaltung dieser Best Practices hilft dabei, eine zuverlässige E-Mail-Zustellung sicherzustellen und das Spam-Filtern zu minimieren.

In diesem Artikel haben Sie erfahren, wie man E-Mails über einen reinen Frontend-Ansatz und einen Backend-Ansatz versendet. Der reine Frontend-Ansatz ist einfach einzurichten, aufgrund seiner Einschränkungen jedoch nicht optimal für komplexe E-Mail-Funktionen. Der Backend-Ansatz bietet eine funktionsreichere Lösung für die E-Mail-Integration, die durch E-Mail-Service-Provider wie Mailgun vereinfacht wird.

Mit Mailgun können Sie E-Mails sicher versenden, Ihre E-Mail-Zustellbarkeit optimieren sowie Ihre Mailinglisten verwalten und validieren.

Autor: David Ekete Software developer, technical writer, and JavaScript / TypeScript developer with a growing interest in exploring and contributing to emerging technology.