Mengirim email dengan JavaScript

Browser memblokir koneksi TCP mentah ke mail server. Menaruh kunci API atau kata sandi SMTP di kode frontend juga mengekspos kredensial Anda kepada siapa pun yang membuka developer tools.

Mengapa browser tidak bisa mengirim email?

Browser tidak menyediakan socket TCP mentah untuk JavaScript, sehingga kode sisi klien tidak dapat membuka koneksi SMTP yang dibutuhkan mail server. Memanggil API email HTTP langsung dari browser juga mengekspos kunci API Anda di sumber halaman dan tab network. Browser mengumpulkan input form dan mengirimnya ke backend Anda; backend yang mengirim email.

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

Cara ini bekerja dengan baik di server yang berjalan terus-menerus. Nodemailer juga mendukung lampiran file dan pengujian SMTP lokal.

Bagaimana cara mengirim dengan HTTP email API?

Backend Anda juga dapat mengirim email dengan mengirim JSON ke API email HTTP menggunakan fetch. Karena cara ini memakai HTTPS standar, bukan socket TCP mentah, cara ini berfungsi di server yang berjalan terus-menerus maupun di runtime 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}`);
}

Sesuaikan host dengan region workspace Anda (us1.platform.bird.com untuk kunci bk_us1_, eu1.platform.bird.com untuk kunci bk_eu1_). Simpan kunci API di variabel lingkungan sisi server agar tidak pernah terkirim ke klien.

Kirim dengan Bird

Untuk mengirim dari Node.js atau TypeScript dengan respons bertipe dan percobaan ulang otomatis, teruskan BIRD_API_KEY ke SDK TypeScript Bird:

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

Pengirim onboarding@messagebird.dev dan penerima sandbox delivered@messagebird.dev memverifikasi pengaturan Anda sebelum Anda mengonfigurasi domain kustom. Jika Anda membuat isi email sebagai komponen React, React Email merender komponen tersebut menjadi string HTML yang diteruskan di html.