Comment envoyer un e-mail depuis JavaScript

Question

Je veux que mon site web ait la capacité d'envoyer un e-mail sans rafraîchir la page. Donc je veux utiliser Javascript.

Voici comment je veux appeler la fonction, mais je ne suis pas sûr de ce qu'il faut mettre dans la fonction javascript. D'après les recherches que j'ai faites, j'ai trouvé un exemple qui utilise la méthode mailto, mais de ce que je comprends, cela n'envoie pas directement depuis le site.

Alors ma question est où puis-je trouver ce qu'il faut mettre à l'intérieur de la fonction JavaScript pour envoyer un e-mail directement depuis le site web.

function sendMail() {
    /* ...code ici...    */
}

Answer 1

Vous ne pouvez pas envoyer un e-mail directement avec javascript.

Cependant, vous pouvez ouvrir le client de messagerie de l'utilisateur :

window.open('mailto:test@example.com');

Il y a aussi quelques paramètres pour pré-remplir le sujet et le corps :

window.open('mailto:test@example.com?subject=sujet&body=corps');

---

Une autre solution serait de faire un appel ajax à votre serveur, afin que le serveur envoie l'e-mail. Faites attention à ne pas permettre à n'importe qui d'envoyer un e-mail via votre serveur.

Answer 2

Indirect via Your Server - Calling 3rd Party API - secure and recommended

---

Votre serveur peut appeler l'API tierce. Les clés API ne sont pas exposées au client.

node.js

const axios = require('axios');

async function sendEmail(name, email, subject, message) {
  const data = JSON.stringify({
    "Messages": [{
      "From": {"Email": "", "Name": ""},
      "To": [{"Email": email, "Name": name}],
      "Subject": subject,
      "TextPart": message
    }]
  });

  const config = {
    method: 'post',
    url: 'https://api.mailjet.com/v3.1/send',
    data: data,
    headers: {'Content-Type': 'application/json'},
    auth: {username: '', password: ''},
  };

  return axios(config)
    .then(function (response) {
      console.log(JSON.stringify(response.data));
    })
    .catch(function (error) {
      console.log(error);
    });

}

// définissez votre propre api d'email qui pointe vers votre serveur.
app.post('/api/sendemail/', function (req, res) {
  const {name, email, subject, message} = req.body;
  // implémentez votre protection contre le spam ou vos vérifications.
  sendEmail(name, email, subject, message);
});

et ensuite utilisez fetch côté client pour appeler votre API d'email. Utilisez from email que vous avez utilisé pour vous inscrire sur Mailjet. Vous pouvez également authentifier plus d'adresses. Mailjet offre un généreux niveau gratuit.

---

Mise à jour 2023: Comme indiqué dans les commentaires, la méthode ci-dessous ne fonctionne plus en raison de CORS

Ceci peut être seulement utile si vous souhaitez tester l'envoi d'email et pour ce faire

• visitez https://api.mailjet.com/stats (oui, une page 404)
• et exécutez ce code dans la console du navigateur (avec les secrets renseignés)

Directement du client - Appel à une API tierce - non recommandé

---

en bref:

1. inscrivez-vous sur Mailjet pour obtenir une clé API et un Secret
2. utilisez fetch pour appeler l'API pour envoyer un email

Comme ceci -

function sendMail(name, email, subject, message) {
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  myHeaders.set('Authorization', 'Basic ' + btoa(''+":" +''));

  const data = JSON.stringify({
    "Messages": [{
      "From": {"Email": "", "Name": ""},
      "To": [{"Email": email, "Name": name}],
      "Subject": subject,
      "TextPart": message
    }]
  });

  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: data,
  };

  fetch("https://api.mailjet.com/v3.1/send", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
}

sendMail('Test Name',"",'Test Subject','Test Message')

Remarque: Gardez à l'esprit que votre clé API est visible pour tout le monde, donc tout utilisateur malveillant peut utiliser votre clé pour envoyer des emails qui peuvent consommer votre quota.

Answer 3

Vous pouvez trouver ce qu'il faut mettre à l'intérieur de la fonction JavaScript dans ce post.

function getAjax() {
    try {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                return new ActiveXObject('Msxml2.XMLHTTP');
            } catch (try_again) {
                return new ActiveXObject('Microsoft.XMLHTTP');
            }
        }
    } catch (fail) {
        return null;
    }
}

function sendMail(to, subject) {
     var rq = getAjax();

     if (rq) {
         // Succès ; tentative d'utiliser une requête Ajax vers un script PHP pour envoyer l'e-mail
         try {
             rq.open('GET', 'sendmail.php?to=' + encodeURIComponent(to) + '&subject=' + encodeURIComponent(subject) + '&d=' + new Date().getTime().toString(), true);

             rq.onreadystatechange = function () {
                 if (this.readyState === 4) {
                     if (this.status >= 400) {
                         // La requête a échoué ; revenir à l'application de messagerie électronique
                         window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
                     }
                 }
             };

            rq.send(null);
         } catch (fail) {
             // Échec d'ouverture de la requête ; revenir à l'application de messagerie électronique
             window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
         }
     } else {
         // Échec de création de la requête ; revenir à l'application de messagerie électronique
         window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
     }
}

Fournir votre propre script PHP (ou tout autre langage) pour envoyer l'e-mail.

Answer 4

Je vous annonce la nouvelle. Vous NE POUVEZ PAS envoyer un e-mail avec JavaScript en soi.

---

En fonction du contexte de la question de l'OP, ma réponse ci-dessus n'est plus valable comme l'a souligné @KennyEvitt dans les commentaires. Il semble que vous pouvez utiliser JavaScript comme client SMTP.

Cependant, je n'ai pas fouillé en profondeur pour savoir s'il est suffisamment sécurisé et compatible avec tous les navigateurs. Par conséquent, je ne peux ni vous encourager ni vous décourager à l'utiliser. Utilisez à vos propres risques.

Answer 5

Dans votre fonction sendMail(), ajoutez un appel ajax à votre backend, où vous pourrez implémenter cela côté serveur.