Site icon Mailtrap

Come inviare email in JavaScript: metodi lato client e lato server spiegati

Artur Hebda

Poiché non è possibile inviare email utilizzando solo codice JavaScript a causa della mancanza di supporto per i socket server, puoi utilizzare una soluzione lato client oppure sfruttare un linguaggio lato server che comunica con il server SMTP.

In questo tutorial, ti guiderò attraverso entrambi i percorsi. Quindi: come inviare email in JavaScript con e senza backend, cioè, spiegherò sia i metodi lato client che lato server.

Lato clientLato server
Mailto

SMTP.js

EmailJS		Node.js e Nodemailer

Email API
Clicca per andare avanti

Inoltre, poiché c’è molto codice in questo articolo, per assicurarti che tutto funzioni correttamente, ti mostrerò come testare le tue email e la funzionalità di invio alla fine dell’articolo, quindi assicurati di rimanere fino alla fine. 😉

Invia email utilizzando mailto:

Mailto è un protocollo utilizzato per produrre collegamenti ipertestuali su siti web attraverso i quali gli utenti possono inviare un’email a un indirizzo specifico direttamente da HTML senza doverlo copiare e inserire manualmente nel proprio client di posta elettronica.

Tecnicamente, il metodo mailto: non invia email direttamente dal browser, motivo per cui non lo consiglio, ma può fare il suo lavoro.

Quindi, per esempio, diciamo che vuoi che i visitatori del tuo sito web ti lascino un feedback. Potresti inserire mailto: come un collegamento ipertestuale o inserirlo in un semplice codice di modulo di contatto.

Ecco un esempio base della sintassi mailto:, che crea un collegamento ipertestuale che, quando cliccato, apre il client di posta elettronica dell’utente con campi precompilati:

<a href=”mailto:ivan.djuric@railsware.com”>Mailtrap is awesome/a>

Ora, per migliorare un po’ l’esperienza dell’utente, puoi precompilare il corpo dell’email, sfruttando tutto il potenziale di mailto:. Ecco un altro esempio, un po’ più complesso:

<a href="mailto:ivan.djuric@railsware.com?subject=Mailtrap%20is%20awesome&body=Hey%0D%0A%0D%0AJust%20wanted%20to%20let%20you%20know%20your%20service%20rocks!%0D%0A%0D%0ACheers,%0D%0ASatisfied%20user%20%3A%29">Send Email</a>

Ecco cosa vedrà l’utente finale una volta che clicca:

Puoi anche inserire mailto: in un semplice codice di modulo di contatto e permettere ai tuoi visitatori di inviarti messaggi senza elaborazione backend. Tuttavia, ti consiglio di scegliere questa opzione solo se ti aspetti un traffico basso. Dai un’occhiata:

<form action="mailto:tuo@tuodominio.com" method="post" enctype="text/plain">
  FirstName: <input type="text" name="FirstName">
  Email: <input type="text" name="Email">
  <input type="submit" name="submit" value="Submit">
</form>

Nel browser, apparirà qualcosa del genere:

E quando l’utente compila il proprio nome e email e clicca su Invia (‘Submit’), il browser aprirà il client di posta elettronica predefinito con il seguente input:

Come puoi vedere, mailto: è davvero una soluzione super semplice. Tuttavia, devo elencare alcuni dei suoi svantaggi, ovvero:

Invia email utilizzando SMTP.js

SMTP.js è una libreria JavaScript super leggera che rimuove le dipendenze dal backend e consente alle app web incentrate sul front-end di inviare email lato client utilizzando SMTP (Simple Mail Transfer Protocol).

Questa libreria è più adatta per progetti di piccole dimensioni o di test a causa della mancanza di crittografia (spiegherò questo aspetto tra un minuto). Per l’uso in produzione e per progetti in cui le preoccupazioni sulla sicurezza non sono minime, consiglio di utilizzare un servizio di email dedicato con una corretta crittografia.

Indipendentemente da ciò, per scopi esplicativi, ecco come puoi utilizzare SMTP.js:

Includi un tag script a SMTP.js nel tuo progetto:

<script src="https://smtpjs.com/v3/smtp.js">
</script>

Ecco un esempio reale di un file HTML con SMTP.js che puoi usare per inviare email:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invia Email con SMTP.js</title>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
    <!-- Sezione Header aggiunta al corpo per fornire contenuto introduttivo -->
    <header>
        <h1>App di Invio Email</h1> <!-- Intestazione principale della pagina web -->
        <p>Clicca il pulsante qui sotto per inviare un\'email usando SMTP.js</p> <!-- Descrizione della funzionalità della pagina -->
    </header>
    <button onclick="sendEmail()">Invia Email</button> <!-- Pulsante per avviare l'invio dell'email -->

    <script>
        function sendEmail() {
            Email.send({
                Host: "smtp.tuoisp.com",
                Username: "nomeutente",
                Password: "password",
                To: 'destinatario@esempio.comm',
                From: "mittente@esempio.com",
                Subject: "Email di Test",
                Body: "Questa è un\'email di test inviata usando SMTP.js"
            })
            .then(function (message) {
                alert("Email inviata con successo") // Messaggio di avviso in caso di invio email riuscito
            });
        }
    </script>
</body>
</html>

Analisi del codice:

E alcune parole in più sul suo problema chiave: mancanza di crittografia. Infatti, quando invii un’email utilizzando SMTP.js, le tue credenziali saranno visibili a qualsiasi criminale informatico che desideri intercettarle. È come se urlassi il tuo pin in mezzo alla strada.

E sì, SMTP.js offre un token crittografato, ma solo se usi Elastic Email. Tuttavia, anche se le tue credenziali rimangono in qualche modo sicure con il token, lasci comunque il tuo account e la tua reputazione IP aperti ad abusi. Come se gestire la tua reputazione del mittente senza un indirizzo IP coerente (leggi: usando SMTP.js) non fosse già un compito arduo.

Puoi leggere di più su questo problema in questo thread di Reddit, dove le persone lo hanno analizzato e spiegato ulteriormente.

Invia email utilizzando EmailJS

L’ultima soluzione nella linea di soluzioni lato client per inviare email in JavaScript è EmailJS, un servizio che abbiamo trattato nel nostro post sul blog sull’invio di email in React. Ciò che offre questo servizio è la possibilità di connettere il tuo servizio email preferito, costruire un template email e inviarlo da JavaScript senza bisogno di codice server.

Nota: l’uso di EmailJS è un’opzione per le applicazioni solo frontend che non sono supportate da un server backend. Nel caso in cui la tua applicazione disponga di un server backend, puoi utilizzare una soluzione come Email API/SMTP di Mailtrap. Ti mostrerò come farlo tra un momento.

Ecco come funziona:

1. Crea e configura il tuo account EmailJS

Per iniziare, crea un account EmailJS, accedi e quindi vai alla pagina ‘Account’ nel menu della barra laterale a sinistra. Una volta lì, inserisci il dominio desiderato che intendi utilizzare per l’invio di email, in questo modo:

2. Connetti il tuo servizio di invio email

Successivamente, dobbiamo connettere un servizio di invio email, poiché EmailJS non dispone di un proprio SMTP. Per questo esempio, come nel resto dell’articolo, utilizzerò Mailtrap per le sue ottime capacità di invio.

Semplicemente, vai su ‘Email Services’ a sinistra e clicca su ‘Add New Service’. Dovrebbe apparire una finestra con un elenco delle opzioni disponibili:

Quindi, ti verrà chiesto di configurare il tuo servizio fornendo i seguenti dettagli necessari:

Con tutti i dettagli forniti, clicca su ‘Create Service’ per finalizzare questo passaggio e avere il servizio elencato sulla tua dashboard di EmailJS.

3. Crea un modello di email

Ora, creiamo un modello di email utilizzando l’editor integrato, che ha una pletora di funzionalità di creazione di contenuti, come la risposta automatica, la verifica reCAPTCHA, ecc.

Puoi trovare l’editor cliccando su ‘Create New Template’ sotto ‘Email Templates’. Una volta lì, sarai in grado di definire tutto, dai dettagli di base come il soggetto, il contenuto e il destinatario, all’aggiunta di allegati e altro ancora.

Nota: Se scegli Mailtrap come tuo servizio, assicurati che l’email del mittente provenga dallo stesso dominio che hai aggiunto e verificato durante la configurazione del tuo account Mailtrap.

Puoi anche verificare come appare il tuo modello cliccando sul pulsante ‘Test it’, che aprirà una nuova finestra popup dove dovrai fornire alcuni dettagli come il servizio utilizzato e i valori per i parametri del modello. ⬇️

Se tutto va come previsto, riceverai un “200 OK” come risultato, il che significa che l’email è stata inviata con successo.

4. Installa e integra EmailJS nel tuo progetto

E infine, passiamo alla codifica e installiamo l’SDK di EmailJS, per il quale puoi utilizzare il gestore di pacchetti npm:

$ npm install --save @emailjs/browser

Oppure il gestore di pacchetti Yarn:

$ yarn add @emailjs/browser

Dopo averlo installato, incolla il seguente snippet di codice prima del tag di chiusura con la chiave pubblica corretta che ti consentirà di iniziare a utilizzare EmailJS sul tuo sito web:

<script
        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
<script>
   (function(){
      emailjs.init({
        publicKey: "TUA_PUBLIC_KEY",
      });
   })();
</script>

Per ottenere la tua chiave pubblica, visita semplicemente la pagina ‘Account’ nella dashboard di EmailJS.

5. Aggiungi la logica di invio email

L’invio di email tramite EmailJS può essere effettuato tramite due metodi:

Questo è il metodo di base, che dovresti usare se stai cercando di aggiungere una semplice funzionalità di invio email con interazione minima al tuo sito web (ad esempio, reset delle password, conferme, ecc.).

var templateParams = {
  name: 'James',
  notes: 'Dai un\'occhiata a questo!',
};

emailjs.send('TUO_SERVICE_ID', 'TUO_TEMPLATE_ID', templateParams).then(
  (response) => {
    console.log('SUCCESSO!', response.status, response.text);
  },
  (error) => {
    console.log('FALLITO...', error);
  },
);

Usa questo metodo se stai utilizzando EmailJS per inviare dettagli di moduli, poiché raccoglierà automaticamente i valori del modulo e li passerà al template specificato.

emailjs.sendForm('TUO_SERVICE_ID', 'TUO_TEMPLATE_ID', '#myForm').then(
  (response) => {
    console.log('SUCCESSO!', response.status, response.text);
  },
  (error) => {
    console.log('FALLITO...', error);
  },
);

Se stai cercando un codice completo per inviare un’email direttamente dal browser utilizzando EmailJS e un template che hai creato, puoi usare quello dell’esempio qui sotto:

<script
       src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>
<script>
  (function () {
     emailjs.init("TUA_PUBLIC_KEY");
  })();
</script>
<script>
  var templateParams = {
    from_name: 'Mittente',
    message: 'Messaggio di Test'
  };

  emailjs.send('email-service-ID', 'email-template-ID', templateParams)
    .then(function (response) {
      console.log('SUCCESSO!', response.status, response.text);
    }, function (error) {
      console.log('FALLITO...', error);
    });
</script>

Infine, penso che valga la pena menzionare il prezzo di EmailJS:

Invia email utilizzando Node.js e Nodemailer

Inviare un’email in JavaScript è super facile se usi un linguaggio di programmazione lato server che comunica con il server SMTP. Nodemailer, il popolare modulo senza dipendenze per Node.js, è una delle soluzioni più efficienti.

Una delle migliori caratteristiche di Nodemailer è che ti permette di utilizzare qualsiasi provider di servizi SMTP, a differenza di SMTP.js come ho discusso in precedenza nell’articolo. Quindi, puoi scegliere tra Gmail o Outlook SMTP, tuttavia, userò il mio fidato SMTP di Mailtrap.

Ecco come sfruttare Nodemailer con SMTP per iniziare a inviare email:

1. Installa Nodemailer

Per installare questo modulo, puoi utilizzare i gestori di pacchetti npm o yarn eseguendo uno dei seguenti comandi:

npm install nodemailer

oppure 

yarn add nodemailer

2. Configura Nodemailer e invia email

Successivamente, devi creare un oggetto transporter, configurare l’oggetto mailOptions e inviare un messaggio con sendMail().

L’ho fatto per te, quindi puoi semplicemente copiare il seguente snippet di codice nel tuo file principale .js dell’applicazione:

// Importa la libreria Nodemailer
const nodemailer = require('nodemailer');

// Crea un oggetto transporter
const transporter = nodemailer.createTransport({
  host: 'live.smtp.mailtrap.io',
  port: 587,
  secure: false, // usa SSL
  auth: {
    user: '1a2b3c4d5e6f7g',
    pass: '1a2b3c4d5e6f7g',
  }
});

// Configura l'oggetto mailOptions
const mailOptions = {
  from: 'iltuonomeutente@email.com',
  to: 'iltuoamico@email.com',
  subject: 'Invio di email usando Node.js',
  text: 'È stato facile!'
};

// Invia l'email
transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log('Errore:', error);
  } else {
    console.log('Email inviata:', info.response);
  }
});

Per salvare ed eseguire lo script, puoi utilizzare il comando node combinato con il nome del file principale della tua applicazione. Per esempio: node index.js.

Suggerimento: Con questo snippet di codice, puoi inviare solo email di testo semplice e HTML. Per scoprire come inviare email a più destinatari, aggiungere allegati, ecc., leggi il nostro articolo su Nodemailer. 👀

Invia email utilizzando l’Email API

Se preferisci automatizzare il processo di invio delle email in JavaScript, il modo più efficiente e semplice per farlo sarebbe utilizzare il pacchetto di invio Node.js di Mailtrap. L’SDK è regolarmente mantenuto e aggiornato da un team di sviluppatori, permettendoti di programmare senza preoccupazioni.

Inoltre, offre un’integrazione rapida con la robusta API di Mailtrap e ti consente di aggiungere senza problemi la funzionalità di invio email. Ci vogliono solo pochi passaggi, guarda:

npm install mailtrap

# oppure, se stai usando yarn:

yarn add mailtrap
import { MailtrapClient } from "mailtrap"

/**
 * Per far funzionare questo esempio, è necessario impostare un dominio di invio
 * e ottenere un token autorizzato a inviare dal dominio.
 */

const TOKEN = "<VOSTRO-TOKEN-HERE>";
const SENDER_EMAIL = "<MITTENTE@TUODOMINIO.COM>";
const RECIPIENT_EMAIL = "<DESTINATARIO@EMAIL.COM>";

const client = new MailtrapClient({ token: TOKEN });

const sender = { name: "Mailtrap Test", email: SENDER_EMAIL };

client
  .send({
    from: sender,
    to: [{ email: RECIPIENT_EMAIL }],
    subject: "Ciao da Mailtrap!",
    text: "Benvenuto in Mailtrap Sending!",
  })
  .then(console.log)
  .catch(console.error);

Se non l’hai già fatto, dovresti aggiungere "type": "module" nel tuo file package.json perché Node.js è un ES module.

Inoltre, tieni presente che devi sostituire i segnaposto come TOKEN o SENDER_EMAIL con la chiave API e le credenziali effettive fornite da Mailtrap. Puoi trovare questi dettagli navigando nella sezione Integrations sotto Sending Domains. ⬇️

Per funzionalità di invio email più complesse, assicurati di dare un’occhiata alla cartella examples nel repository ufficiale di GitHub o leggi il nostro esaustivo articolo su Node.js.

Invia email HTML

Per inviare email HTML stilizzate, tutto ciò che devi fare è utilizzare il seguente codice:

import { MailtrapClient } from "mailtrap"

/**
 * Per far funzionare questo esempio, è necessario impostare un dominio di invio,
 * e ottenere un token autorizzato a inviare dal dominio.
 * @see https://help.mailtrap.io/article/69-sending-domain-setup
 */

const TOKEN = "<VOSTRO-TOKEN-HERE>";
const SENDER_EMAIL = "<MITTENTE@TUODOMINIO.COM>";
const RECIPIENT_EMAIL = "<DESTINATARIO@EMAIL.COM>";

const client = new MailtrapClient({ token: TOKEN });

client
  .send({
    category: "test",
    custom_variables: {
      hello: "world",
      year: 2022,
      anticipated: true,
    },
    from: { name: "Mailtrap Test", email: SENDER_EMAIL },
    to: [{ email: RECIPIENT_EMAIL }],
    subject: "Ciao da Mailtrap!",
    html: `
    <!doctype html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      </head>
      <body style="font-family: sans-serif;">
        <div style="display: block; margin: auto; max-width: 600px;" class="main">
          <h1 style="font-size: 18px; font-weight: bold; margin-top: 20px">Congratulazioni per aver inviato un\'email di test con Mailtrap!</h1>
          <p>Ispezionala usando le schede che vedi sopra e scopri come migliorare questa email.</p>
          <p>Ora invia la tua email utilizzando il nostro server SMTP falso e l\'integrazione di tua scelta!</p>
          <p>Buona fortuna! Spero che funzioni.</p>
        </div>
        <!-- Esempio di HTML/CSS non valido per email, sarà rilevato da Mailtrap -->
        <style>
          .main { background-color: white; }
          a:hover { border-left-width: 1em; min-height: 2em; }
        </style>
      </body>
    </html>
  `,
  })
  .then(console.log)
  .catch(console.error);
Inviare email con Mailtrap gratis

Testa le email e l’invio in fase di staging

Con una grande quantità di codice per l’invio di email, arriva una grande responsabilità: devi assicurarti che tutto funzioni come previsto affinché i tuoi destinatari ricevano effettivamente i tuoi messaggi nel modo in cui li intendi.

Oltre al codice, devi controllare che i tuoi elementi HTML/CSS siano supportati dai principali provider di caselle di posta, che non attivino i filtri antispam, che il tuo dominio non finisca nelle blacklist, e altro ancora.

Sembrerebbe molto lavoro sulla carta, ma non quando usi gli strumenti di test giusti. Nello specifico, Email Testing di Mailtrap ti fornisce un ambiente sandbox per testare tutto questo e altro!

Per esempio, puoi usare la funzione HTML Check per ispezionare l’HTML/CSS delle tue email e individuare facilmente eventuali righe di codice difettose, quindi correggerle o rimuoverle. Questo garantisce che le tue email basate su design HTML/CSS siano compatibili con diversi browser e client.

Inoltre, puoi evitare i filtri antispam e molti altri problemi di deliverability delle email grazie alla funzione Spam Report. Ottieni un punteggio, cerca di mantenerlo sotto 5 e risolvi proattivamente eventuali problemi di spam; tutto qui!

Una delle ultime funzionalità ti consente di progettare, modificare e ospitare modelli email HTML sulla piattaforma di Email Delivery di Mailtrap. Puoi quindi testarli con la nostra API e passare facilmente dalla fase staging a produzione quando sei pronto per iniziare a inviare.

Oltre a queste e altre funzionalità che semplificano la tua vita, Email Testing di Mailtrap ha anche una configurazione semplice, dai un’occhiata!

SMTP

Inizia creando un account gratuito Mailtrap e poi:

const transport = nodemailer.createTransport({
  host: "sandbox.smtp.mailtrap.io",
  port: 2525,
  auth: {
    user: "1a2b3c4d5e6f7g",
    pass: "1a2b3c4d5e6f7g"
  }
});
Test delle email con Mailtrap gratis

API

Se vuoi integrare l’API di Mailtrap per test, automazione e test di sequenze automatiche, ecco lo snippet di codice che puoi usare:

import { MailtrapClient } from "mailtrap"

const TOKEN = "<TUO-TOKEN-QUI>";
const TEST_INBOX_ID = "<TUO-TEST-INBOX-ID-QUI>"
const ACCOUNT_ID = "<TUO-ACCOUNT-ID-QUI>"

const client = new MailtrapClient({ token: TOKEN, testInboxId: TEST_INBOX_ID, accountId: ACCOUNT_ID });

const inboxesClient = client.testing.inboxes
const messagesClient = client.testing.messages

inboxesClient.getList()
  .then(async (inboxes) => {
    if (inboxes && inboxes.length > 0) {
      const firstInboxId = inboxes[0].id 

      const messages = await messagesClient.get(firstInboxId)

      if (messages && messages.length > 0) {
        const firstMessageId = messages[0].id

        await messagesClient.get(firstInboxId)
        await messagesClient.getHtmlAnalysis(firstInboxId, firstMessageId)
        await messagesClient.getHtmlMessage(firstInboxId, firstMessageId)
        await messagesClient.getTextMessage(firstInboxId, firstMessageId)
        await messagesClient.getMailHeaders(firstInboxId, firstMessageId)
        await messagesClient.getMessageAsEml(firstInboxId, firstMessageId)
        await messagesClient.getMessageHtmlSource(firstInboxId, firstMessageId)
        await messagesClient.getRawMessage(firstInboxId, firstMessageId)
        await messagesClient.getSpamScore(firstInboxId, firstMessageId)
        await messagesClient.showEmailMessage(firstInboxId, firstMessageId)
        await messagesClient.updateMessage(firstInboxId, firstMessageId, {
          isRead: false
        })
        await messagesClient.forward(firstInboxId, firstMessageId, 'teste@mail.com')
        const response = await messagesClient.deleteMessage(firstInboxId, firstMessageId)

        console.log(response)
      }
    }
  })

Il codice sopra recupera tutte le caselle di posta, seleziona la prima, recupera i messaggi e poi esegue più operazioni su di essa, che puoi vedere sotto i metodi await.

Per ulteriori casi d’uso e dettagli, dai un’occhiata al repository GitHub ufficiale dell’API di Mailtrap. 👀

Conclusione

Mentre ci avviciniamo alla fine del nostro articolo ‘Invio di email in JavaScript’, ora puoi scegliere tra più metodi per aggiungere la funzionalità di invio email alla tua app. Hai diverse opzioni tra cui scegliere…

Se sei indeciso, ti consiglio di considerare a che punto è la tua applicazione, quanto è importante la sicurezza per te e quale tipo di email vuoi inviare.

Se è un test di base e devi inviare un numero basso di email per un progetto personale, puoi optare per una soluzione lato client. Tuttavia, se prevedi di inviare email in modo più consistente o sei vicino alla produzione, allora uno dei metodi lato server è una scelta al 100% obbligata per te.

E con questo, ti lascio decidere. Buon invio!

Exit mobile version