Envoyer des e-mails avec JavaScript

Les navigateurs bloquent les connexions TCP brutes vers les serveurs de messagerie. Placer une clé API ou un mot de passe SMTP dans le code frontend expose aussi vos identifiants à quiconque ouvre les outils de développement.

Pourquoi le navigateur ne peut-il pas envoyer d'e-mail ?

Les navigateurs n'exposent pas de sockets TCP bruts à JavaScript : le code côté client ne peut donc pas ouvrir la connexion SMTP qu'exige un serveur de messagerie. Appeler une API e-mail HTTP directement depuis le navigateur expose aussi votre clé API dans le code source de la page et dans l'onglet réseau. Le navigateur collecte les données du formulaire et les envoie à votre backend ; le backend envoie l'e-mail.

Comment envoyer depuis un backend Node avec SMTP ?

Nodemailer est la bibliothèque standard pour SMTP dans Node. Vous configurez un transport une fois, puis appelez 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>",
});

Cette approche fonctionne bien sur un serveur persistant. Nodemailer prend aussi en charge les pièces jointes et les tests SMTP en local.

Comment envoyer avec une API e-mail HTTP ?

Votre backend peut aussi envoyer des e-mails en envoyant JSON à une API e-mail HTTP avec fetch. Comme cette méthode utilise le protocole standard HTTPS et non des sockets TCP bruts, elle fonctionne aussi bien sur les serveurs persistants que sur les environnements 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}`);
}

Choisissez l'hôte correspondant à la région de votre espace de travail (us1.platform.bird.com pour les clés bk_us1_, eu1.platform.bird.com pour les clés bk_eu1_). Conservez la clé API dans une variable d'environnement côté serveur afin qu'elle ne soit jamais envoyée au client.

Envoyer avec Bird

Pour envoyer depuis Node.js ou TypeScript avec des réponses typées et des nouvelles tentatives automatiques, passez BIRD_API_KEY au 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();

L'expéditeur onboarding@messagebird.dev et le destinataire sandbox delivered@messagebird.dev permettent de vérifier votre configuration avant de configurer un domaine personnalisé. Si vous construisez vos corps d'e-mails sous forme de composants React, React Email rend le composant en une chaîne HTML à passer dans html.