E-mail versturen met JavaScript

Browsers blokkeren ruwe TCP-verbindingen met mailservers. Als je een API-sleutel of SMTP-wachtwoord in frontendcode zet, liggen je inloggegevens bovendien open voor iedereen die de ontwikkelaarstools opent.

Waarom kan de browser geen e-mail versturen?

Browsers stellen geen ruwe TCP-sockets beschikbaar aan JavaScript, dus client-side code kan niet de SMTP-verbinding openen die een mailserver vereist. Als je een HTTP e-mail-API rechtstreeks vanuit de browser aanroept, komt je API-sleutel bovendien in de paginabron en het netwerktabblad te staan. De browser verzamelt de formulierinvoer en stuurt die naar je backend; de backend verstuurt de e-mail.

Hoe verstuur je vanuit een Node-backend met SMTP?

Nodemailer is de standaardlibrary voor SMTP in Node. Je configureert een transport eenmalig en roept daarna sendMail aan:

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

Dit werkt goed op een langlopende server. Nodemailer ondersteunt ook bijlagen en lokaal testen van SMTP.

Hoe verstuur je met een HTTP e-mail-API?

Je backend kan ook e-mail versturen door JSON met fetch naar een HTTP e-mail-API te posten. Omdat dit standaard HTTPS gebruikt in plaats van ruwe TCP-sockets, werkt het zowel op langlopende servers als in serverless runtimes:

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

Kies de host die bij de regio van je werkruimte past (us1.platform.bird.com voor bk_us1_-sleutels, eu1.platform.bird.com voor bk_eu1_-sleutels). Bewaar de API-sleutel in een server-side omgevingsvariabele, zodat hij nooit naar de client gaat.

Verstuur het met Bird

Om vanuit Node.js of TypeScript te versturen met getypeerde antwoorden en automatisch opnieuw proberen, geef je BIRD_API_KEY door aan de 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();

Met de onboarding@messagebird.dev-afzender en de delivered@messagebird.dev sandboxontvanger controleer je je setup voordat je een eigen domein configureert. Als je e-mailinhoud als React-componenten bouwt, rendert React Email het component naar de HTML-string die je in html doorgeeft.