{"id":19998,"date":"2025-09-15T17:36:29","date_gmt":"2025-09-15T17:36:29","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/envoyer-emails-javascript-frontend-backend\/"},"modified":"2026-09-14T21:17:46","modified_gmt":"2026-09-14T21:17:46","slug":"envoyer-emails-javascript-frontend-backend","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/","title":{"rendered":"Comment envoyer des emails en JavaScript\u00a0: frontend et backend"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Il existe deux mani\u00e8res d&rsquo;int\u00e9grer l&#8217;email \u00e0 votre application\u00a0: une approche uniquement frontend ou une m\u00e9thode bas\u00e9e sur le backend. L&rsquo;approche frontend utilise le protocole <code>mailto<\/code> et du JavaScript natif, mais elle est limit\u00e9e et expose des informations sensibles. La m\u00e9thode backend, utilisant <code>Node.js<\/code> et l&rsquo;API de Mailgun, vous offre un meilleur contr\u00f4le, plus de s\u00e9curit\u00e9 et une plus grande flexibilit\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ce guide vous pr\u00e9sente les deux options, afin que vous puissiez d\u00e9cider ce qui convient le mieux \u00e0 votre configuration.<\/p>\n\n\n\r\n    <nav data-content-type=\"longform\" class=\"toc-block longform-spacings px-5 py-6 px-md-6 px-lg-7 py-md-7 bg-light fs-sm rounded-lg\" aria-labelledby=\"toc-title-8614\"><p class=\"h5 m-0\" id=\"toc-title-8614\">Table des mati\u00e8res<\/p><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">01<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#envoyer-des-emails-depuis-le-frontend\">Envoyer des emails depuis le frontend<\/a><a class=\"scrollme link-body-color\" href=\"#envoyer-des-emails-depuis-le-frontend-a-laide-du-protocole-mailto\">Envoyer des emails depuis le frontend \u00e0 l&rsquo;aide du protocole mailto<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">02<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#envoyer-des-emails-depuis-le-backend\">Envoyer des emails depuis le backend<\/a><a class=\"scrollme link-body-color\" href=\"#configurer-votre-environnement-de-developpement\">Configurer votre environnement de d\u00e9veloppement<\/a><a class=\"scrollme link-body-color\" href=\"#recuperer-votre-cle-api-mailgun\">R\u00e9cup\u00e9rer votre cl\u00e9 API Mailgun<\/a><a class=\"scrollme link-body-color\" href=\"#envoyer-des-emails-a-laide-du-sdk-node-js-de-mailgun\">Envoyer des emails \u00e0 l&rsquo;aide du SDK Node.js de Mailgun<\/a><a class=\"scrollme link-body-color\" href=\"#bonnes-pratiques-pour-lenvoi-demails-depuis-le-backend\">Bonnes pratiques pour l&rsquo;envoi d&#8217;emails depuis le backend<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">03<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#conclusion\">Conclusion<\/a><\/div><\/div><\/nav>\n\n\n<h2 class=\"wp-block-heading\">Envoyer des emails depuis le frontend<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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&rsquo;une connexion \u00e0 un serveur SMTP, ce qui n\u00e9cessite un nom d&rsquo;utilisateur, un mot de passe ou une cl\u00e9 API fournis par un h\u00f4te SMTP comme Mailgun pour l&rsquo;authentification. Cependant, cette connexion exposera \u00e9galement les identifiants de l&rsquo;h\u00f4te SMTP, les rendant vuln\u00e9rables au vol.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Comme alternative plus s\u00e9curis\u00e9e, vous pouvez configurer une fonction serverless d\u00e9di\u00e9e ou un simple backend qui utilise l&rsquo;API de Mailgun pour envoyer des emails et se connecte de mani\u00e8re s\u00e9curis\u00e9e \u00e0 votre frontend. Toutefois, cette approche n&rsquo;est pas \u00ab\u00a0uniquement frontend\u00a0\u00bb, car elle implique des serveurs et peut \u00eatre difficile \u00e0 mettre en place sans un backend traditionnel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La m\u00e9thode \u00ab\u00a0uniquement frontend\u00a0\u00bb la plus r\u00e9alisable et s\u00e9curis\u00e9e pour envoyer des emails implique l&rsquo;utilisation d&rsquo;un lien hypertexte pour d\u00e9clencher l&rsquo;application de messagerie par d\u00e9faut de l&rsquo;utilisateur avec un mod\u00e8le pr\u00e9rempli \u00e0 envoyer. Cette approche ne n\u00e9cessite pas de serveur SMTP ou d&rsquo;identifiants, car l&#8217;email est envoy\u00e9 via le client de messagerie de l&rsquo;utilisateur plut\u00f4t que par votre application. Vous pouvez configurer cela en utilisant le <a href=\"https:\/\/learn.microsoft.com\/en-us\/previous-versions\/aa767737(v=vs.85)\" target=\"_tabs\" rel=\"noopener noreferrer\">protocole mailto<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a0Le JavaScript c\u00f4t\u00e9 client ne peut pas envoyer d&#8217;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\u00e9curit\u00e9. La m\u00e9thode uniquement frontend la plus r\u00e9alisable et s\u00e9curis\u00e9e implique l&rsquo;utilisation d&rsquo;un <a href=\"https:\/\/learn.microsoft.com\/en-us\/previous-versions\/aa767737(v=vs.85)\">lien hypertexte mailto<\/a> pour ouvrir le client de messagerie par d\u00e9faut de l&rsquo;utilisateur avec un mod\u00e8le pr\u00e9rempli, \u00e9vitant ainsi le besoin de serveurs SMTP ou l&rsquo;exposition des identifiants.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Envoyer des emails depuis le frontend \u00e0 l&rsquo;aide du protocole mailto<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Le protocole <code>mailto<\/code> est un sch\u00e9ma d&rsquo;URL qui permet aux utilisateurs d&rsquo;envoyer des emails en cliquant sur un lien. Lorsqu&rsquo;un utilisateur clique sur un lien <code>mailto<\/code>, cela ouvre sa messagerie par d\u00e9faut avec le destinataire de l&#8217;email pr\u00e9rempli. En plus du destinataire de l&#8217;email pr\u00e9rempli, vous pouvez \u00e9galement personnaliser votre lien <code>mailto<\/code> pour inclure un objet, un corps de message, ainsi qu&rsquo;une copie carbone (cc) et une copie carbone invisible (cci).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lorsqu&rsquo;un utilisateur clique sur un lien <code>mailto:<\/code>, son navigateur ouvre le client de messagerie par d\u00e9faut (comme Outlook ou Gmail) dans une nouvelle fen\u00eatre ou un nouvel onglet avec l&rsquo;adresse du destinataire pr\u00e9remplie. Ces liens peuvent \u00e9galement inclure des param\u00e8tres pour pr\u00e9remplir les champs objet, corps, cc et cci, permettant ainsi d&rsquo;obtenir un mod\u00e8le d&#8217;email personnalisable d\u00e9clench\u00e9 depuis le frontend sans envoyer d&#8217;email directement via JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les liens mailto utilisent la syntaxe suivante\u00a0: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>mailto:sAddress[sHeaders]<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une URL <code>mailto:<\/code> ouvre le client de messagerie par d\u00e9faut de l&rsquo;utilisateur avec l&rsquo;adresse du destinataire pr\u00e9remplie, et vous pouvez la personnaliser en ajoutant des param\u00e8tres tels que l&rsquo;objet, le corps, les champs cc et cci \u00e0 l&rsquo;aide de cha\u00eenes de requ\u00eate. <code>sAddress<\/code> fait r\u00e9f\u00e9rence \u00e0 une ou plusieurs adresses email valides s\u00e9par\u00e9es par un point-virgule, et <code>sHeaders<\/code> (facultatif) fait r\u00e9f\u00e9rence aux param\u00e8tres de requ\u00eate contenant l&rsquo;objet, le corps, les champs cc et cci. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour envoyer un email depuis votre frontend \u00e0 l&rsquo;aide du protocole <code>mailto<\/code>, cr\u00e9ez un formulaire HTML qui permet aux utilisateurs de saisir le(s) destinataire(s), l&rsquo;objet, le corps, les champs cc et cci. Vous pouvez utiliser ces entr\u00e9es pour g\u00e9n\u00e9rer une URL <code>mailto<\/code> avec JavaScript. Lorsque l&rsquo;utilisateur soumet le formulaire, le navigateur ouvre sa messagerie \u00e0 l&rsquo;aide du lien <code>mailto<\/code> que vous avez cr\u00e9\u00e9. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour cr\u00e9er le formulaire, ajoutez le bloc de code suivant \u00e0 un nouveau fichier HTML\u00a0: <\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                HTML                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copier dans le presse-papiers\" data-clipboard-success-label=\"Copi\u00e9\u00a0!\" data-clipboard-error-label=\"Impossible de copier\" data-tooltip=\"Copier dans le presse-papiers\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copier dans le presse-papiers\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-markup\">\r\n                                <code id=\"code_0_content\" class=\"language-markup\">\r\n\r\n                                    &lt;!DOCTYPE html&gt;rn&lt;html lang=&quot;en&quot;&gt;rn  &lt;head&gt;rn    &lt;meta charset=&quot;UTF-8&quot; \/&gt;rn    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;rn    &lt;title&gt;Emails&lt;\/title&gt;rn    &lt;script defer src=&quot;.\/script.js&quot;&gt;&lt;\/script&gt;rn  &lt;\/head&gt;rn  &lt;body&gt;rn     &lt;form method=&quot;post&quot;&gt;rn      &lt;!-- Add recipient field --&gt;rn      &lt;inputrn        id=&quot;recipient&quot;rn        type=&quot;text&quot;rn        name=&quot;recipient&quot;rn        placeholder=&quot;Recipient&quot;rn      \/&gt;rn      &lt;!-- Add subject field --&gt;rn      &lt;input id=&quot;subject&quot; type=&quot;text&quot; name=&quot;subject&quot; placeholder=&quot;Subject&quot; \/&gt;rn      &lt;!-- Add message field --&gt;rn      &lt;textarea id=&quot;message&quot; name=&quot;message&quot; placeholder=&quot;Email Body&quot;&gt;&lt;\/textarea&gt;rn      &lt;!-- Add optional cc &amp; bcc fields --&gt;rn      &lt;input id=&quot;cc&quot; type=&quot;text&quot; name=&quot;cc&quot; placeholder=&quot;CC&quot; \/&gt;rn      &lt;input id=&quot;bcc&quot; type=&quot;text&quot; name=&quot;bcc&quot; placeholder=&quot;BCC&quot; \/&gt;rnrn      &lt;input id=&quot;send&quot; type=&quot;button&quot; value=&quot;Open Mail&quot; \/&gt;rn    &lt;\/form&gt;rnrn    &lt;!-- Basic styles --&gt;rn    &lt;style&gt;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=&quot;button&quot;] {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    &lt;\/style&gt;rn  &lt;\/body&gt;rn&lt;\/html&gt;rn\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">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 \u00e9galement un style de base au formulaire\u00a0:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-3976\" width=\"1488\" height=\"808\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM.png\" alt=\"Email Form\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM.png 1488w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM-300x163.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM-768x417.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM-1024x556.png 1024w\" sizes=\"(max-width: 1488px) 100vw, 1488px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Cr\u00e9ez un fichier <code>script.js<\/code> et collez le code suivant pour ajouter un \u00e9couteur d&rsquo;\u00e9v\u00e9nement <code>click<\/code> au bouton de soumission, ce qui d\u00e9clenchera la fonction <code>openMailBox<\/code>\u00a0:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                Javascript                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copier dans le presse-papiers\" data-clipboard-success-label=\"Copi\u00e9\u00a0!\" data-clipboard-error-label=\"Impossible de copier\" data-tooltip=\"Copier dans le presse-papiers\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copier dans le presse-papiers\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-Javascript\">\r\n                                <code id=\"code_0_content\" class=\"language-Javascript\">\r\n\r\n                                    \/\/ script.jsrnconst submitButton = document.getElementById(&quot;send&quot;);rnrnsubmitButton?.addEventListener(&quot;click&quot;, openMailBox);rnrnfunction openMailBox(e) {rn  e.preventDefault();rnrn  \/\/ Get valuesrn  const recipient = document.getElementById(&quot;recipient&quot;).value;rn  const subject = document.getElementById(&quot;subject&quot;).value;rn  const message = document.getElementById(&quot;message&quot;).value;rn  const cc = document.getElementById(&quot;cc&quot;).valuern  const bcc = document.getElementById(&quot;bcc&quot;).valuernrn  \/\/ Create a mailto link and encode the valuesrn  const mailtoLink = `mailto:${encodeURIComponent(rn    recipientrn  )}?subject=${encodeURIComponent(subject)}&amp;body=${encodeURIComponent(rn    messagern  )}&amp;cc=${encodeURIComponent(cc)}&amp;bcc=${encodeURIComponent(bcc)}`;rnrn  \/\/ Open user&#039;s mailbox with prefilled contentrn  window.open(mailtoLink, &quot;_blank&quot;);rn}rn\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">La fonction <code>openMailBox<\/code> extrait les valeurs du formulaire et cr\u00e9e un lien mailto en concat\u00e9nant la version encod\u00e9e de ces valeurs pour \u00e9viter les probl\u00e8mes avec les caract\u00e8res sp\u00e9ciaux (espaces, <code>&amp;, =, ?<\/code>) dans l&rsquo;URL mailto. Elle ouvre \u00e9galement le lien <code>mailto<\/code> dans un nouvel onglet pour d\u00e9clencher la messagerie de l&rsquo;utilisateur.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cette m\u00e9thode d&rsquo;envoi d&#8217;emails est utile pour les applications et sites web de petite taille o\u00f9 un backend d&#8217;email n&rsquo;est pas n\u00e9cessaire (comme les liens \u00ab\u00a0Nous contacter\u00a0\u00bb, les formulaires de retour et les tickets de support). Cependant, elle pr\u00e9sente quelques inconv\u00e9nients majeurs, notamment le risque d&rsquo;exposer des identifiants, l&rsquo;absence de suivi de la livraison des emails et des d\u00e9fis en mati\u00e8re de mise \u00e0 l&rsquo;\u00e9chelle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Envoyer des emails depuis le backend<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pour les sc\u00e9narios de gestion d&#8217;emails plus complexes ou sensibles, l&rsquo;envoi d&#8217;emails depuis un backend offre une s\u00e9curit\u00e9 renforc\u00e9e, car les identifiants sont stock\u00e9s sur le serveur. C&rsquo;est \u00e9galement plus fiable, car les syst\u00e8mes backend peuvent g\u00e9rer l&rsquo;envoi d&#8217;emails en masse et les files d&rsquo;attente d&#8217;emails, garantissant ainsi que les messages sont envoy\u00e9s de mani\u00e8re fiable, m\u00eame en cas de fort trafic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez utiliser un service d&#8217;emailing comme Mailgun pour simplifier ce processus. Mailgun g\u00e8re la complexit\u00e9 des protocoles d&#8217;email (SMTP, API HTTP), la v\u00e9rification de domaine et la pr\u00e9vention du spam.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer votre environnement de d\u00e9veloppement<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pour envoyer des emails avec Node.js et Mailgun, vous devez d&rsquo;abord cr\u00e9er un environnement de d\u00e9veloppement en ex\u00e9cutant la commande suivante\u00a0:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>mkdir email-service &amp;&amp; cd email-service &amp;&amp; npm init -y<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La commande ci-dessus cr\u00e9e un dossier <code>email-service<\/code> et y initialise npm avec ses param\u00e8tres par d\u00e9faut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Installez les paquets requis \u00e0 l&rsquo;aide de la commande suivante\u00a0:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>npm install mailgun.js form-data dotenv<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les d\u00e9pendances install\u00e9es comprennent\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Mailgun.js<\/code> (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 (<code>npm install nodemailer<\/code>) pour envoyer des emails en toute s\u00e9curit\u00e9 depuis votre backend.<\/li>\n\n\n\n<li><code>Dotenv<\/code>, une biblioth\u00e8que qui charge les variables d&rsquo;environnement dans <code>process.env<\/code>. Vous en aurez besoin pour g\u00e9rer vos identifiants sensibles en toute s\u00e9curit\u00e9.<\/li>\n\n\n\n<li><code>Form-Data<\/code>, une biblioth\u00e8que qui cr\u00e9e des flux <code>multipart\/form-data<\/code> lisibles. Mailgun accepte uniquement les donn\u00e9es au format <code>multipart\/form-data<\/code>, vous avez donc besoin de cette biblioth\u00e8que pour initialiser le SDK.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s avoir install\u00e9 les d\u00e9pendances ci-dessus, vous devez obtenir une cl\u00e9 API depuis votre tableau de bord Mailgun.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><b>R\u00e9cup\u00e9rer votre cl\u00e9 API Mailgun<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pour obtenir votre cl\u00e9 API, connectez-vous d&rsquo;abord \u00e0 votre compte Mailgun. Sur votre tableau de bord utilisateur, cliquez sur le menu d\u00e9roulant en haut \u00e0 droite de votre \u00e9cran, puis sur le bouton <b>S\u00e9curit\u00e9 de l&rsquo;API<\/b>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-3978\" width=\"1952\" height=\"984\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM.png\" alt=\"Retrieve your Mailgun API key\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM.png 1952w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM-300x151.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM-768x387.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM-1024x516.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM-1536x774.png 1536w\" sizes=\"(max-width: 1952px) 100vw, 1952px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Sur la page de s\u00e9curit\u00e9 de l&rsquo;API, cliquez sur le bouton <b>Ajouter une nouvelle cl\u00e9<\/b> pour afficher une fen\u00eatre modale contenant un formulaire. Remplissez la description dans la fen\u00eatre modale, cliquez sur le bouton <b>Cr\u00e9er une cl\u00e9<\/b>, copiez la cl\u00e9 API affich\u00e9e et ajoutez-la \u00e0 votre fichier <code>.env<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4004\" width=\"1956\" height=\"1010\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM.png\" alt=\"Add New API Key Image\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM.png 1956w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM-300x155.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM-768x397.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM-1024x529.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM-1536x793.png 1536w\" sizes=\"(max-width: 1956px) 100vw, 1956px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ensuite, cr\u00e9ez un fichier <code>index.js<\/code> et un fichier <code>.env<\/code> dans le r\u00e9pertoire de votre projet. Dans votre fichier <code>.env<\/code>, ajoutez les variables ci-dessous et remplacez l&rsquo;\u00e9l\u00e9ment de substitution par sa valeur r\u00e9elle\u00a0:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>MAILGUN_API_KEY = <\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Envoyer des emails \u00e0 l&rsquo;aide du SDK Node.js de Mailgun<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Maintenant que vous avez votre cl\u00e9 API, vous pouvez initialiser votre SDK Mailgun. Dans votre fichier <code>index.js<\/code>, ajoutez les imports requis et initialisez <code>dotenv<\/code> en ajoutant le code suivant\u00a0:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                Javascript                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copier dans le presse-papiers\" data-clipboard-success-label=\"Copi\u00e9\u00a0!\" data-clipboard-error-label=\"Impossible de copier\" data-tooltip=\"Copier dans le presse-papiers\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copier dans le presse-papiers\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-Javascript\">\r\n                                <code id=\"code_0_content\" class=\"language-Javascript\">\r\n\r\n                                    \/\/ index.jsrnconst formData = require(&quot;form-data&quot;);rnconst Mailgun = require(&quot;mailgun.js&quot;);rnconst dotenv = require(&quot;dotenv&quot;);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: &quot;api&quot;,rn  key: process.env.MAILGUN_API_KEY,rn});rn\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez envoyer des emails \u00e0 l&rsquo;aide de la fonction <code>messages.create<\/code> du SDK Mailgun. Elle prend en arguments un domaine d&#8217;email et un objet contenant les d\u00e9tails de l&#8217;email que vous souhaitez envoyer. Le domaine de l&#8217;email doit \u00eatre ajout\u00e9 \u00e0 votre compte Mailgun et v\u00e9rifi\u00e9. Suivez <a href=\"https:\/\/help.mailgun.com\/hc\/en-us\/articles\/32884702360603-Domain-Verification-Setup-Guide\" target=\"_tabs\" rel=\"noopener noreferrer\">ce guide<\/a> pour ajouter et v\u00e9rifier un domaine d&#8217;email personnalis\u00e9. Vous pouvez \u00e9galement utiliser le domaine sandbox par d\u00e9faut fourni par Mailgun.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les d\u00e9tails dans l&rsquo;objet incluent (sans s&rsquo;y limiter) les \u00e9l\u00e9ments suivants\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>from<\/code> indique au destinataire de qui provient l&#8217;email. Cette propri\u00e9t\u00e9 doit correspondre \u00e0 votre domaine enregistr\u00e9.<\/li>\n\n\n\n<li><code>to<\/code> correspond \u00e0 l&rsquo;adresse (ou aux adresses) email du ou des destinataires.<\/li>\n\n\n\n<li><code>subject<\/code> est l&rsquo;objet de l&#8217;email.<\/li>\n\n\n\n<li><code>text<\/code> est le contenu de l&#8217;email.<\/li>\n\n\n\n<li><code>html<\/code> est le contenu de l&#8217;email au format HTML. Un seul appel de fonction ne peut pas comporter simultan\u00e9ment les propri\u00e9t\u00e9s <code>text<\/code> et <code>html<\/code>\u00a0; l&rsquo;une d&rsquo;entre elles serait ignor\u00e9e.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez explorer d&rsquo;autres options disponibles dans la <a href=\"https:\/\/github.com\/mailgun\/mailgun.js\" target=\"_tabs\" rel=\"noopener noreferrer\">documentation officielle du SDK Node.js<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Par exemple, ajoutez le bloc de code ci-dessous \u00e0 votre fichier <code>index.js<\/code> pour impl\u00e9menter une fonction permettant d&rsquo;envoyer un email\u00a0:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                Javascript                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copier dans le presse-papiers\" data-clipboard-success-label=\"Copi\u00e9\u00a0!\" data-clipboard-error-label=\"Impossible de copier\" data-tooltip=\"Copier dans le presse-papiers\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copier dans le presse-papiers\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-Javascript\">\r\n                                <code id=\"code_0_content\" class=\"language-Javascript\">\r\n\r\n                                    \/\/ 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}\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez appeler la fonction comme ceci\u00a0:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                Javascript                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copier dans le presse-papiers\" data-clipboard-success-label=\"Copi\u00e9\u00a0!\" data-clipboard-error-label=\"Impossible de copier\" data-tooltip=\"Copier dans le presse-papiers\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copier dans le presse-papiers\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-Javascript\">\r\n                                <code id=\"code_0_content\" class=\"language-Javascript\">\r\n\r\n                                    \/\/ index.jsrnsendEmail(rn  &quot;&lt;MAILGUN_DOMAIN&gt;&quot;,rn  &quot;&lt;SENDER_NAME&gt; &lt;SENDER_EMAIL&gt;&quot;,rn  &quot;&lt;RECIPIENT_EMAIL&gt;&quot;,rn  &quot;&lt;EMAIL_SUBJECT&gt;&quot;,rn  &quot;&lt;EMAIL_BODY&gt;&quot;rn);\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">Ex\u00e9cutez la fonction \u00e0 l&rsquo;aide de la commande suivante\u00a0:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>node index<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une r\u00e9ponse similaire \u00e0 celle-ci devrait s&rsquo;afficher dans la console\u00a0:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>{<br>status: 200,<br>id: '',<br>message: 'Queued. Thank you.'<br>}<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L&#8217;email devrait maintenant \u00eatre livr\u00e9 dans la messagerie du destinataire.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bonnes pratiques pour l&rsquo;envoi d&#8217;emails depuis le backend<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sans une configuration ad\u00e9quate, les emails envoy\u00e9s depuis votre backend peuvent \u00eatre signal\u00e9s comme spam, ne pas atteindre leurs destinataires ou \u00eatre bloqu\u00e9s par les fournisseurs. Pour am\u00e9liorer la d\u00e9livrabilit\u00e9, suivez ces bonnes pratiques\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Utilisez un ESP r\u00e9put\u00e9\u00a0:<\/b> lors de l&rsquo;envoi d&#8217;emails depuis le backend, il est important d&rsquo;utiliser un fournisseur de services d&#8217;emailing (ESP) r\u00e9put\u00e9 comme Mailgun pour g\u00e9rer la complexit\u00e9 de la livraison des emails, notamment pour s&rsquo;assurer que vos emails ne sont pas marqu\u00e9s comme spam en imposant l&rsquo;authentification de domaine (SPF, DKIM, DMARC).<\/li>\n\n\n\n<li><b>Stockez les cl\u00e9s API de mani\u00e8re s\u00e9curis\u00e9e\u00a0:<\/b> une autre consid\u00e9ration importante est le stockage s\u00e9curis\u00e9 de vos cl\u00e9s API \u00e0 l&rsquo;aide de variables d&rsquo;environnement pour garantir qu&rsquo;elles ne soient pas vol\u00e9es et utilis\u00e9es \u00e0 des fins malveillantes, ce qui affecterait votre r\u00e9putation d&rsquo;exp\u00e9diteur. Mailgun propose des cl\u00e9s API \u00e0 port\u00e9e limit\u00e9e, vous permettant d&rsquo;accorder des autorisations sp\u00e9cifiques (comme \u00ab\u00a0envoi uniquement\u00a0\u00bb) afin de minimiser les risques d&rsquo;abus.<\/li>\n\n\n\n<li><b>Surveillez les statistiques d&#8217;emailing\u00a0:<\/b> vous devez \u00e9galement suivre les taux de livraison, les rebonds et les \u00e9checs d&#8217;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&rsquo;engagement qui vous aident \u00e0 optimiser vos campagnes d&#8217;emailing. Mailgun propose \u00e9galement une API pour <a href=\"https:\/\/www.mailgun.com\/blog\/dev-life\/verification-emails-nodejs\/\" target=\"_tabs\" rel=\"noopener noreferrer\">valider les adresses email<\/a>, ce qui vous garantit de n&rsquo;envoyer des emails qu&rsquo;\u00e0 des destinataires valides et de r\u00e9duire ainsi vos taux de rebond.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">L&rsquo;application de ces bonnes pratiques permettra d&rsquo;assurer une livraison fiable de vos emails et de minimiser le filtrage anti-spam.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dans cet article, vous avez d\u00e9couvert comment envoyer des emails via une approche uniquement frontend et une approche backend. L&rsquo;approche uniquement frontend est simple \u00e0 configurer, mais elle n&rsquo;est pas id\u00e9ale pour des fonctionnalit\u00e9s d&#8217;email complexes en raison de ses limites. L&rsquo;approche backend offre une solution plus riche en fonctionnalit\u00e9s pour l&rsquo;int\u00e9gration des emails, rendue plus simple par des fournisseurs de services d&#8217;emailing comme Mailgun.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avec Mailgun, vous pouvez envoyer des emails en toute s\u00e9curit\u00e9, optimiser la d\u00e9livrabilit\u00e9 de vos emails, mais aussi g\u00e9rer et valider vos listes de diffusion. <\/p>\n\n\n\r\n    <aside data-content-type=\"longform\"  class=\"banner-block longform-spacings rounded-lg shadow-lg px-5 py-6 px-md-6 py-md-7 p-lg-7 bg-light\" data-theme=\"dark\" aria-labelledby=\"banner-block-block_f52edf711b2585dd119a272fd3835590\">\r\n                    <p class=\"text-uppercase section-caption text-body-color\">\r\n                S&rsquo;inscrire            <\/p>\r\n                            <p class=\"h4 text-accent fw-bold\" id=\"banner-block-block_f52edf711b2585dd119a272fd3835590\">\r\n                Lancez-vous, c&rsquo;est facile ! Et c&rsquo;est gratuit.            <\/p>\r\n                            <div class=\"mb-0 text-body-color\">\r\n                                    <div class=\"content-body mb-0 text-body-color\">D\u00e9couvrez ce que vous pouvez accomplir avec la meilleure plateforme de livraison d\u2019emails au monde.<\/div>\r\n                            <\/div>\r\n        \r\n        <div class=\"text-start mt-5\"><a href=\"https:\/\/signup.mailgun.com\/new\/signup\"  class=\"btn btn-secondary\" >Get started<\/a><\/div>\r\n    <\/aside>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Ajouter une fonctionnalit\u00e9 d&#8217;email \u00e0 votre application web permet de maintenir l&rsquo;engagement et l&rsquo;information de vos utilisateurs. Qu&rsquo;il s&rsquo;agisse d&#8217;emails de v\u00e9rification de compte ou de liens pour r\u00e9initialiser le mot de passe, l&#8217;email rend la communication directe et fiable. Dans cet article, d\u00e9couvrez comment envoyer ces emails via une approche backend et frontend en utilisant JavaScript.<\/p>\n","protected":false},"author":12,"featured_media":3952,"menu_order":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"blog_category":[19],"class_list":["post-19998","blog","type-blog","status-publish","has-post-thumbnail","hentry","blog_category-dev-life"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Envoyer des emails en JavaScript\u00a0: approches frontend et backend - Transactional Email API Service For Developers | Mailgun<\/title>\n<meta name=\"description\" content=\"D\u00e9couvrez comment envoyer des emails en JavaScript en utilisant le protocole mailto ou une approche backend avec Node.js et l&#039;API de Mailgun. Comparez la s\u00e9curit\u00e9, la fiabilit\u00e9 et les fonctionnalit\u00e9s.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Envoyer des emails en JavaScript\u00a0: approches frontend et backend - Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"og:description\" content=\"D\u00e9couvrez comment envoyer des emails en JavaScript en utilisant le protocole mailto ou une approche backend avec Node.js et l&#039;API de Mailgun. Comparez la s\u00e9curit\u00e9, la fiabilit\u00e9 et les fonctionnalit\u00e9s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/\" \/>\n<meta property=\"og:site_name\" content=\"Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-14T21:17:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"448\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/dev-life\\\/envoyer-emails-javascript-frontend-backend\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/dev-life\\\/envoyer-emails-javascript-frontend-backend\\\/\",\"name\":\"Envoyer des emails en JavaScript\u00a0: approches frontend et backend - Transactional Email API Service For Developers | Mailgun\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/dev-life\\\/envoyer-emails-javascript-frontend-backend\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/dev-life\\\/envoyer-emails-javascript-frontend-backend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Dev-Life.png\",\"datePublished\":\"2025-09-15T17:36:29+00:00\",\"dateModified\":\"2026-09-14T21:17:46+00:00\",\"description\":\"D\u00e9couvrez comment envoyer des emails en JavaScript en utilisant le protocole mailto ou une approche backend avec Node.js et l'API de Mailgun. Comparez la s\u00e9curit\u00e9, la fiabilit\u00e9 et les fonctionnalit\u00e9s.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/dev-life\\\/envoyer-emails-javascript-frontend-backend\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/dev-life\\\/envoyer-emails-javascript-frontend-backend\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/dev-life\\\/envoyer-emails-javascript-frontend-backend\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Dev-Life.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Dev-Life.png\",\"width\":720,\"height\":448},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/dev-life\\\/envoyer-emails-javascript-frontend-backend\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment envoyer des emails en JavaScript\u00a0: frontend et backend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"description\":\"Des API d\u2019emails transactionnels puissantes qui vous permettent d'envoyer, de recevoir et de suivre des emails, con\u00e7ues pour les d\u00e9veloppeurs. En savoir plus d\u00e8s aujourd'hui !\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#organization\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"width\":512,\"height\":512,\"caption\":\"Transactional Email API Service For Developers | Mailgun\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Envoyer des emails en JavaScript\u00a0: approches frontend et backend - Transactional Email API Service For Developers | Mailgun","description":"D\u00e9couvrez comment envoyer des emails en JavaScript en utilisant le protocole mailto ou une approche backend avec Node.js et l'API de Mailgun. Comparez la s\u00e9curit\u00e9, la fiabilit\u00e9 et les fonctionnalit\u00e9s.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/","og_locale":"fr_FR","og_type":"article","og_title":"Envoyer des emails en JavaScript\u00a0: approches frontend et backend - Transactional Email API Service For Developers | Mailgun","og_description":"D\u00e9couvrez comment envoyer des emails en JavaScript en utilisant le protocole mailto ou une approche backend avec Node.js et l'API de Mailgun. Comparez la s\u00e9curit\u00e9, la fiabilit\u00e9 et les fonctionnalit\u00e9s.","og_url":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/","og_site_name":"Transactional Email API Service For Developers | Mailgun","article_modified_time":"2026-09-14T21:17:46+00:00","og_image":[{"width":720,"height":448,"url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/","url":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/","name":"Envoyer des emails en JavaScript\u00a0: approches frontend et backend - Transactional Email API Service For Developers | Mailgun","isPartOf":{"@id":"https:\/\/www.mailgun.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/#primaryimage"},"image":{"@id":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","datePublished":"2025-09-15T17:36:29+00:00","dateModified":"2026-09-14T21:17:46+00:00","description":"D\u00e9couvrez comment envoyer des emails en JavaScript en utilisant le protocole mailto ou une approche backend avec Node.js et l'API de Mailgun. Comparez la s\u00e9curit\u00e9, la fiabilit\u00e9 et les fonctionnalit\u00e9s.","breadcrumb":{"@id":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/#primaryimage","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","width":720,"height":448},{"@type":"BreadcrumbList","@id":"https:\/\/www.mailgun.com\/fr\/blog\/dev-life\/envoyer-emails-javascript-frontend-backend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mailgun.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.mailgun.com\/fr\/blog\/"},{"@type":"ListItem","position":3,"name":"Comment envoyer des emails en JavaScript\u00a0: frontend et backend"}]},{"@type":"WebSite","@id":"https:\/\/www.mailgun.com\/fr\/#website","url":"https:\/\/www.mailgun.com\/fr\/","name":"Transactional Email API Service For Developers | Mailgun","description":"Des API d\u2019emails transactionnels puissantes qui vous permettent d'envoyer, de recevoir et de suivre des emails, con\u00e7ues pour les d\u00e9veloppeurs. En savoir plus d\u00e8s aujourd'hui !","publisher":{"@id":"https:\/\/www.mailgun.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mailgun.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.mailgun.com\/fr\/#organization","name":"Transactional Email API Service For Developers | Mailgun","url":"https:\/\/www.mailgun.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.mailgun.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","width":512,"height":512,"caption":"Transactional Email API Service For Developers | Mailgun"},"image":{"@id":"https:\/\/www.mailgun.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog\/19998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":1,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog\/19998\/revisions"}],"predecessor-version":[{"id":19999,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog\/19998\/revisions\/19999"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/media\/3952"}],"wp:attachment":[{"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/media?parent=19998"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.mailgun.com\/fr\/wp-json\/wp\/v2\/blog_category?post=19998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}