Dev Life
Comment envoyer des emails en JavaScript : frontend et backend
Il existe deux manières d’intégrer l’email à votre application : une approche uniquement frontend ou une méthode basée sur le backend. L’approche frontend utilise le protocole mailto et du JavaScript natif, mais elle est limitée et expose des informations sensibles. La méthode backend, utilisant Node.js et l’API de Mailgun, vous offre un meilleur contrôle, plus de sécurité et une plus grande flexibilité.
Ce guide vous présente les deux options, afin que vous puissiez décider ce qui convient le mieux à votre configuration.
Envoyer des emails depuis le frontend
Le Simple Mail Transfer Protocol (SMTP) est le protocole standard pour envoyer des emails sur Internet. Pour envoyer un email depuis le frontend, vous avez besoin d’une connexion à un serveur SMTP, ce qui nécessite un nom d’utilisateur, un mot de passe ou une clé API fournis par un hôte SMTP comme Mailgun pour l’authentification. Cependant, cette connexion exposera également les identifiants de l’hôte SMTP, les rendant vulnérables au vol.
Comme alternative plus sécurisée, vous pouvez configurer une fonction serverless dédiée ou un simple backend qui utilise l’API de Mailgun pour envoyer des emails et se connecte de manière sécurisée à votre frontend. Toutefois, cette approche n’est pas « uniquement frontend », car elle implique des serveurs et peut être difficile à mettre en place sans un backend traditionnel.
La méthode « uniquement frontend » la plus réalisable et sécurisée pour envoyer des emails implique l’utilisation d’un lien hypertexte pour déclencher l’application de messagerie par défaut de l’utilisateur avec un modèle prérempli à envoyer. Cette approche ne nécessite pas de serveur SMTP ou d’identifiants, car l’email est envoyé via le client de messagerie de l’utilisateur plutôt que par votre application. Vous pouvez configurer cela en utilisant le protocole mailto.
Le JavaScript côté client ne peut pas envoyer d’emails directement via SMTP car les navigateurs ne prennent pas en charge les connexions directes par socket au serveur en raison de restrictions de sécurité. La méthode uniquement frontend la plus réalisable et sécurisée implique l’utilisation d’un lien hypertexte mailto pour ouvrir le client de messagerie par défaut de l’utilisateur avec un modèle prérempli, évitant ainsi le besoin de serveurs SMTP ou l’exposition des identifiants.
Envoyer des emails depuis le frontend à l’aide du protocole mailto
Le protocole mailto est un schéma d’URL qui permet aux utilisateurs d’envoyer des emails en cliquant sur un lien. Lorsqu’un utilisateur clique sur un lien mailto, cela ouvre sa messagerie par défaut avec le destinataire de l’email prérempli. En plus du destinataire de l’email prérempli, vous pouvez également personnaliser votre lien mailto pour inclure un objet, un corps de message, ainsi qu’une copie carbone (cc) et une copie carbone invisible (cci).
Lorsqu’un utilisateur clique sur un lien mailto:, son navigateur ouvre le client de messagerie par défaut (comme Outlook ou Gmail) dans une nouvelle fenêtre ou un nouvel onglet avec l’adresse du destinataire préremplie. Ces liens peuvent également inclure des paramètres pour préremplir les champs objet, corps, cc et cci, permettant ainsi d’obtenir un modèle d’email personnalisable déclenché depuis le frontend sans envoyer d’email directement via JavaScript.
Les liens mailto utilisent la syntaxe suivante :
mailto:sAddress[sHeaders]
Une URL mailto: ouvre le client de messagerie par défaut de l’utilisateur avec l’adresse du destinataire préremplie, et vous pouvez la personnaliser en ajoutant des paramètres tels que l’objet, le corps, les champs cc et cci à l’aide de chaînes de requête. sAddress fait référence à une ou plusieurs adresses email valides séparées par un point-virgule, et sHeaders (facultatif) fait référence aux paramètres de requête contenant l’objet, le corps, les champs cc et cci.
Pour envoyer un email depuis votre frontend à l’aide du protocole mailto, créez un formulaire HTML qui permet aux utilisateurs de saisir le(s) destinataire(s), l’objet, le corps, les champs cc et cci. Vous pouvez utiliser ces entrées pour générer une URL mailto avec JavaScript. Lorsque l’utilisateur soumet le formulaire, le navigateur ouvre sa messagerie à l’aide du lien mailto que vous avez créé.
Pour créer le formulaire, ajoutez le bloc de code suivant à un nouveau fichier HTML :
<!DOCTYPE html>rn<html lang="en">rn <head>rn <meta charset="UTF-8" />rn <meta name="viewport" content="width=device-width, initial-scale=1.0" />rn <title>Emails</title>rn <script defer src="./script.js"></script>rn </head>rn <body>rn <form method="post">rn <!-- Add recipient field -->rn <inputrn id="recipient"rn type="text"rn name="recipient"rn placeholder="Recipient"rn />rn <!-- Add subject field -->rn <input id="subject" type="text" name="subject" placeholder="Subject" />rn <!-- Add message field -->rn <textarea id="message" name="message" placeholder="Email Body"></textarea>rn <!-- Add optional cc & bcc fields -->rn <input id="cc" type="text" name="cc" placeholder="CC" />rn <input id="bcc" type="text" name="bcc" placeholder="BCC" />rnrn <input id="send" type="button" value="Open Mail" />rn </form>rnrn <!-- Basic styles -->rn <style>rn body {rn display: flex;rn justify-content: center;rn align-items: center;rn height: 100vh;rn margin: 0;rn }rn form {rn display: flex;rn flex-direction: column;rn gap: 1rem;rn }rn input,rn textarea {rn padding: 0.5rem;rn border: 1px solid #ccc;rn border-radius: 0.25rem;rn }rn input[type="button"] {rn background-color: #007bff;rn color: white;rn border: none;rn border-radius: 0.25rem;rn padding: 0.5rem 1rem;rn cursor: pointer;rn }rn </style>rn </body>rn</html>rn
Le formulaire comprend un destinataire, un cc, un cci, un objet, un champ de corps de message et un bouton de soumission. Le code ajoute également un style de base au formulaire :
Créez un fichier script.js et collez le code suivant pour ajouter un écouteur d’événement click au bouton de soumission, ce qui déclenchera la fonction openMailBox :
// script.jsrnconst submitButton = document.getElementById("send");rnrnsubmitButton?.addEventListener("click", openMailBox);rnrnfunction openMailBox(e) {rn e.preventDefault();rnrn // Get valuesrn const recipient = document.getElementById("recipient").value;rn const subject = document.getElementById("subject").value;rn const message = document.getElementById("message").value;rn const cc = document.getElementById("cc").valuern const bcc = document.getElementById("bcc").valuernrn // Create a mailto link and encode the valuesrn const mailtoLink = `mailto:${encodeURIComponent(rn recipientrn )}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(rn messagern )}&cc=${encodeURIComponent(cc)}&bcc=${encodeURIComponent(bcc)}`;rnrn // Open user's mailbox with prefilled contentrn window.open(mailtoLink, "_blank");rn}rn
La fonction openMailBox extrait les valeurs du formulaire et crée un lien mailto en concaténant la version encodée de ces valeurs pour éviter les problèmes avec les caractères spéciaux (espaces, &, =, ?) dans l’URL mailto. Elle ouvre également le lien mailto dans un nouvel onglet pour déclencher la messagerie de l’utilisateur.
Cette méthode d’envoi d’emails est utile pour les applications et sites web de petite taille où un backend d’email n’est pas nécessaire (comme les liens « Nous contacter », les formulaires de retour et les tickets de support). Cependant, elle présente quelques inconvénients majeurs, notamment le risque d’exposer des identifiants, l’absence de suivi de la livraison des emails et des défis en matière de mise à l’échelle.
Envoyer des emails depuis le backend
Pour les scénarios de gestion d’emails plus complexes ou sensibles, l’envoi d’emails depuis un backend offre une sécurité renforcée, car les identifiants sont stockés sur le serveur. C’est également plus fiable, car les systèmes backend peuvent gérer l’envoi d’emails en masse et les files d’attente d’emails, garantissant ainsi que les messages sont envoyés de manière fiable, même en cas de fort trafic.
Vous pouvez utiliser un service d’emailing comme Mailgun pour simplifier ce processus. Mailgun gère la complexité des protocoles d’email (SMTP, API HTTP), la vérification de domaine et la prévention du spam.
Configurer votre environnement de développement
Pour envoyer des emails avec Node.js et Mailgun, vous devez d’abord créer un environnement de développement en exécutant la commande suivante :
mkdir email-service && cd email-service && npm init -y
La commande ci-dessus crée un dossier email-service et y initialise npm avec ses paramètres par défaut.
Installez les paquets requis à l’aide de la commande suivante :
npm install mailgun.js form-data dotenv
Les dépendances installées comprennent :
Mailgun.js(le SDK Node.js de Mailgun), dont vous avez besoin pour interagir avec Mailgun en utilisant Node.js. Installez le SDK Node.js de Mailgun ou nodemailer (npm install nodemailer) pour envoyer des emails en toute sécurité depuis votre backend.Dotenv, une bibliothèque qui charge les variables d’environnement dansprocess.env. Vous en aurez besoin pour gérer vos identifiants sensibles en toute sécurité.Form-Data, une bibliothèque qui crée des fluxmultipart/form-datalisibles. Mailgun accepte uniquement les données au formatmultipart/form-data, vous avez donc besoin de cette bibliothèque pour initialiser le SDK.
Après avoir installé les dépendances ci-dessus, vous devez obtenir une clé API depuis votre tableau de bord Mailgun.
Récupérer votre clé API Mailgun
Pour obtenir votre clé API, connectez-vous d’abord à votre compte Mailgun. Sur votre tableau de bord utilisateur, cliquez sur le menu déroulant en haut à droite de votre écran, puis sur le bouton Sécurité de l’API.
Sur la page de sécurité de l’API, cliquez sur le bouton Ajouter une nouvelle clé pour afficher une fenêtre modale contenant un formulaire. Remplissez la description dans la fenêtre modale, cliquez sur le bouton Créer une clé, copiez la clé API affichée et ajoutez-la à votre fichier .env.
Ensuite, créez un fichier index.js et un fichier .env dans le répertoire de votre projet. Dans votre fichier .env, ajoutez les variables ci-dessous et remplacez l’élément de substitution par sa valeur réelle :
MAILGUN_API_KEY =
Envoyer des emails à l’aide du SDK Node.js de Mailgun
Maintenant que vous avez votre clé API, vous pouvez initialiser votre SDK Mailgun. Dans votre fichier index.js, ajoutez les imports requis et initialisez dotenv en ajoutant le code suivant :
// index.jsrnconst formData = require("form-data");rnconst Mailgun = require("mailgun.js");rnconst dotenv = require("dotenv");rnrndotenv.config();rnInitialize the Mailgun SDK with the formData package and connect to the Mailgun client using your credentials:rn// index.jsrnconst mailgun = new Mailgun(formData);rnrnconst mg = mailgun.client({rn username: "api",rn key: process.env.MAILGUN_API_KEY,rn});rn
Vous pouvez envoyer des emails à l’aide de la fonction messages.create du SDK Mailgun. Elle prend en arguments un domaine d’email et un objet contenant les détails de l’email que vous souhaitez envoyer. Le domaine de l’email doit être ajouté à votre compte Mailgun et vérifié. Suivez ce guide pour ajouter et vérifier un domaine d’email personnalisé. Vous pouvez également utiliser le domaine sandbox par défaut fourni par Mailgun.
Les détails dans l’objet incluent (sans s’y limiter) les éléments suivants :
fromindique au destinataire de qui provient l’email. Cette propriété doit correspondre à votre domaine enregistré.tocorrespond à l’adresse (ou aux adresses) email du ou des destinataires.subjectest l’objet de l’email.textest le contenu de l’email.htmlest le contenu de l’email au format HTML. Un seul appel de fonction ne peut pas comporter simultanément les propriétéstextethtml; l’une d’entre elles serait ignorée.
Vous pouvez explorer d’autres options disponibles dans la documentation officielle du SDK Node.js.
Par exemple, ajoutez le bloc de code ci-dessous à votre fichier index.js pour implémenter une fonction permettant d’envoyer un email :
// index.jsrnasync function sendEmail(domain, from, to, subject, text) {rn try {rn const response = await mg.messages.create(domain, {rn from,rn to,rn subject,rn text,rn });rnrn console.log(response);rn } catch (error) {rn console.log(error);rn }rn}
Vous pouvez appeler la fonction comme ceci :
// index.jsrnsendEmail(rn "<MAILGUN_DOMAIN>",rn "<SENDER_NAME> <SENDER_EMAIL>",rn "<RECIPIENT_EMAIL>",rn "<EMAIL_SUBJECT>",rn "<EMAIL_BODY>"rn);
Exécutez la fonction à l’aide de la commande suivante :
node index
Une réponse similaire à celle-ci devrait s’afficher dans la console :
{
status: 200,
id: '',
message: 'Queued. Thank you.'
}
L’email devrait maintenant être livré dans la messagerie du destinataire.
Bonnes pratiques pour l’envoi d’emails depuis le backend
Sans une configuration adéquate, les emails envoyés depuis votre backend peuvent être signalés comme spam, ne pas atteindre leurs destinataires ou être bloqués par les fournisseurs. Pour améliorer la délivrabilité, suivez ces bonnes pratiques :
- Utilisez un ESP réputé : lors de l’envoi d’emails depuis le backend, il est important d’utiliser un fournisseur de services d’emailing (ESP) réputé comme Mailgun pour gérer la complexité de la livraison des emails, notamment pour s’assurer que vos emails ne sont pas marqués comme spam en imposant l’authentification de domaine (SPF, DKIM, DMARC).
- Stockez les clés API de manière sécurisée : une autre considération importante est le stockage sécurisé de vos clés API à l’aide de variables d’environnement pour garantir qu’elles ne soient pas volées et utilisées à des fins malveillantes, ce qui affecterait votre réputation d’expéditeur. Mailgun propose des clés API à portée limitée, vous permettant d’accorder des autorisations spécifiques (comme « envoi uniquement ») afin de minimiser les risques d’abus.
- Surveillez les statistiques d’emailing : vous devez également suivre les taux de livraison, les rebonds et les échecs d’emails afin de prendre des mesures correctives. Le tableau de bord de Mailgun fournit des informations sur les taux de rebond, les taux de livraison et les statistiques d’engagement qui vous aident à optimiser vos campagnes d’emailing. Mailgun propose également une API pour valider les adresses email, ce qui vous garantit de n’envoyer des emails qu’à des destinataires valides et de réduire ainsi vos taux de rebond.
L’application de ces bonnes pratiques permettra d’assurer une livraison fiable de vos emails et de minimiser le filtrage anti-spam.
Conclusion
Dans cet article, vous avez découvert comment envoyer des emails via une approche uniquement frontend et une approche backend. L’approche uniquement frontend est simple à configurer, mais elle n’est pas idéale pour des fonctionnalités d’email complexes en raison de ses limites. L’approche backend offre une solution plus riche en fonctionnalités pour l’intégration des emails, rendue plus simple par des fournisseurs de services d’emailing comme Mailgun.
Avec Mailgun, vous pouvez envoyer des emails en toute sécurité, optimiser la délivrabilité de vos emails, mais aussi gérer et valider vos listes de diffusion.
