Wysyłanie e-maili za pomocą JavaScriptu

Przeglądarki blokują surowe połączenia TCP z serwerami pocztowymi. Umieszczenie klucza API lub hasła SMTP w kodzie frontendu ujawnia też Twoje dane uwierzytelniające każdemu, kto otworzy narzędzia deweloperskie.

Dlaczego przeglądarka nie może wysłać e-maila?

Przeglądarki nie udostępniają JavaScriptowi surowych gniazd TCP, więc kod po stronie klienta nie może otworzyć połączenia SMTP, którego wymaga serwer pocztowy. Wywołanie HTTP e-mail API bezpośrednio z przeglądarki ujawnia też klucz API w źródle strony i na karcie sieci. Przeglądarka zbiera dane z formularza i wysyła je do backendu; backend wysyła e-mail.

Jak wysłać e-mail z backendu Node za pomocą SMTP?

Nodemailer to standardowa biblioteka do SMTP w Node. Konfigurujesz transport raz, a potem wywołujesz 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>",
});

To rozwiązanie dobrze sprawdza się na długo działającym serwerze. Nodemailer obsługuje też załączniki plików i lokalne testowanie SMTP.

Jak wysłać e-mail przez HTTP API?

Backend może też wysyłać e-maile, przesyłając JSON do HTTP e-mail API za pomocą fetch. Ponieważ korzysta to ze standardowego HTTPS zamiast surowych gniazd TCP, działa zarówno na długo działających serwerach, jak i w środowiskach 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}`);
}

Dopasuj host do regionu obszaru roboczego (us1.platform.bird.com dla kluczy bk_us1_, eu1.platform.bird.com dla kluczy bk_eu1_). Przechowuj klucz API w zmiennej środowiskowej po stronie serwera, aby nigdy nie trafił do klienta.

Wyślij za pomocą Bird

Aby wysyłać z Node.js lub TypeScriptu z typowanymi odpowiedziami i automatycznymi ponownymi próbami, przekaż BIRD_API_KEY do 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();

Nadawca onboarding@messagebird.dev i delivered@messagebird.dev odbiorca sandbox pozwalają sprawdzić konfigurację, zanim skonfigurujesz własną domenę. Jeśli tworzysz treści e-maili jako komponenty React, React Email renderuje komponent do ciągu HTML przekazywanego w html.