Wysyłanie e-maili za pomocą JavaScriptu

JavaScript wysyła e-maile z serwera, nigdy bezpośrednio z przeglądarki. Kod po stronie klienta nie może otworzyć połączenia SMTP, a umieszczenie danych uwierzytelniających e-mail na stronie udostępniłoby je każdemu, kto otworzy narzędzia deweloperskie. Właściwe pytanie brzmi więc, którą ścieżkę po stronie serwera wybrać: SMTP przez bibliotekę taką jak Nodemailer, czy żądanie HTTP do API e-mail. Ten artykuł pokazuje obie.

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

Dostarczanie e-maili działa po SMTP, protokole TCP. Przeglądarki nie udostępniają surowych gniazd TCP dla JavaScriptu, więc po stronie klienta nie da się komunikować z serwerem pocztowym. Nawet gdyby się dało, dane uwierzytelniające SMTP lub klucz API znajdowałyby się w kodzie dostępnym dla każdego. Przeglądarka zbiera dane z formularza i wysyła je do backendu; backend wysyła e-mail. To rozdzielenie stanowi cały wzorzec.

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 działa dobrze na długo działającym serwerze. Pełny przewodnik, w tym załączniki i lokalne testowanie, znajdziesz w artykule wysyłanie e-maili za pomocą Nodemailera.

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

Druga ścieżka to żądanie HTTP. Backend wywołuje API e-mail z fetch, co eliminuje konieczność prowadzenia serwera pocztowego i działa tak samo niezależnie od tego, czy korzystasz z tradycyjnego hostingu, czy funkcji serverless:

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

Klucz nadal znajduje się na serwerze, w zmiennej środowiskowej, i nigdy nie trafia do klienta.

Wyślij za pomocą Bird

Bird Node SDK opakowuje to samo wywołanie HTTP, dzięki czemu pomijasz ręczne fetch i otrzymujesz typowane wyniki:

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

Adres sandbox delivered@bird.dev zawsze przyjmuje pocztę, więc pierwsze uruchomienie potwierdza poprawność konfiguracji. Jeśli tworzysz treści e-maili jako komponenty React, połącz to z React Email, który renderuje komponent do HTML-a przekazywanego w html.

FAQ

Czy JavaScript po stronie klienta może wysyłać e-maile?

Nie. Przeglądarki nie mogą otwierać połączeń SMTP, a wszelkie dane uwierzytelniające w kodzie klienta są widoczne. Przeglądarka wysyła dane formularza do backendu, a backend wysyła e-mail.

Użyć Nodemailera czy HTTP API?

Nodemailer sprawdza się na długo działającym serwerze, na którym kontrolujesz SMTP. HTTP API jest prostsze, gdy chcesz uniknąć prowadzenia serwera pocztowego, i jest niezawodnym wyborem na platformach serverless, gdzie gniazda SMTP są niedostępne.

Gdzie przechowywać klucz API?

W zmiennej środowiskowej po stronie serwera, odczytywanej w czasie wykonania. Nigdy nie może pojawić się w kodzie front-endu ani w publicznym repozytorium.

Sam JavaScript nie dostarcza poczty; robi to serwer. Aby zgłębić ścieżkę API, zajrzyj do przeglądu produktu e-mail i przewodnika wysyłania e-maili.