Mengirim email dengan JavaScript

JavaScript mengirim email dari server, bukan langsung dari browser. Kode sisi klien tidak dapat membuka koneksi SMTP, dan meletakkan kredensial email di halaman berarti menyerahkannya kepada siapa pun yang membuka dev tools. Jadi pertanyaan sebenarnya adalah jalur sisi server mana yang digunakan: SMTP melalui library seperti Nodemailer, atau permintaan HTTP ke API email. Artikel ini menunjukkan keduanya.

Mengapa browser tidak bisa mengirim email?

Pengiriman email berjalan melalui SMTP, sebuah protokol TCP. Browser tidak mengekspos raw TCP socket ke JavaScript, jadi tidak ada cara dari sisi klien untuk berkomunikasi dengan mail server. Bahkan jika bisa, kredensial SMTP atau kunci API akan berada di kode yang bisa dibaca siapa saja. Browser mengumpulkan input form dan mengirimnya ke backend Anda; backend yang mengirim email. Pemisahan itulah keseluruhan polanya.

Bagaimana cara mengirim dari backend Node dengan SMTP?

Nodemailer adalah library standar untuk SMTP di Node. Anda mengonfigurasi transport sekali, lalu memanggil 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>",
});

Ini bekerja dengan baik di server yang berjalan terus-menerus. Panduan lengkapnya, termasuk lampiran dan pengujian lokal, ada di mengirim email dengan Nodemailer.

Bagaimana cara mengirim dengan HTTP email API?

Jalur lainnya adalah permintaan HTTP. Backend Anda memanggil API email dengan fetch, yang menghindari keharusan menjalankan mail server dan berperilaku sama baik Anda menggunakan host tradisional maupun fungsi 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}`);
}

Kunci tetap berada di server, dalam variabel lingkungan, tidak pernah dikirim ke klien.

Kirim dengan Bird

Bird Node SDK membungkus panggilan HTTP yang sama sehingga Anda melewati fetch manual dan mendapatkan hasil bertipe:

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

Alamat sandbox delivered@bird.dev selalu menerima email, jadi pengujian pertama mengonfirmasi pengaturan Anda. Jika Anda membuat isi email sebagai komponen React, padukan dengan React Email, yang merender komponen tersebut menjadi HTML yang Anda masukkan di html.

FAQ

Bisakah JavaScript sisi klien mengirim email?

Tidak. Browser tidak dapat membuka koneksi SMTP, dan kredensial apa pun di kode klien akan terekspos. Browser mengirim data form ke backend Anda, dan backend yang mengirim email.

Haruskah saya menggunakan Nodemailer atau HTTP API?

Nodemailer cocok untuk server yang berjalan terus-menerus di mana Anda mengendalikan SMTP. HTTP API lebih sederhana jika Anda ingin menghindari pengoperasian mail server, dan merupakan pilihan andal di platform serverless di mana socket SMTP tidak tersedia.

Di mana saya menyimpan kunci API?

Di variabel lingkungan sisi server, dibaca saat runtime. Kunci ini tidak boleh muncul di kode front-end atau di repositori publik.

JavaScript sendiri tidak mengirim email; server yang melakukannya. Untuk mendalami jalur API, ikhtisar produk email dan panduan mengirim email membahas bagian-bagiannya.