JavaScript Enviar correos electrónicos
- Enviar correos electrónicos con JavaScript
- Configurar credenciales de servidor para código JavaScript
- Conclusión
El método estándar de envío de correos electrónicos mediante una aplicación web requiere que la configuración del lado del servidor de una aplicación web específica esté configurada para enviar correos electrónicos al servidor SMTP. SMTP, también conocido como Protocolo simple de transferencia de correo, se puede usar para transferir correos electrónicos desde el lado del cliente del navegador de Internet, realiza una solicitud para enviar un correo electrónico al lado del servidor, y el backend crea un correo electrónico y luego lo envía al servidor SMTP.
Existe un enfoque para enviar correos electrónicos desde el lado del cliente sin la ayuda del lado del servidor, utilizando JavaScript.
Enviar correos electrónicos con JavaScript
Es un hecho común que solo con el código JavaScript no se pueden enviar correos electrónicos directos debido a la menor compatibilidad con los sockets del servidor. Pero para el proceso de envío de Email a través del navegador, podemos utilizar SMTPJS; una biblioteca gratuita de terceros que se ofrece en JavaScript.
Esta biblioteca ofrece el método Email.send() para enviar un correo electrónico desde JavaScript. Por lo general, los foros de contacto envían correos electrónicos a través del navegador.
Como ejemplo, podemos crear un formulario de contacto usando el siguiente código HTML y CSS. Después de eso, podemos agregar código JavaScript para enviar correos electrónicos.
Ejemplo de código:
<!DOCTYPE html>
<html>
<header>
<meta charset="UTF-8">
<meta name="viewport" content="width=divce-width, initial-scale=1">
</header>
<body>
<style>
form{
display: flex;
flex-direction: column;
width: 50%;
margin: auto;
}
#Name,#email,#message,#btn{
padding: 20px;
margin-bottom: 20px;
border: none;
outline: none;
background-color: #ddd;
}
#btn{
width: 25%;
}
h1{
text-align: center;
}
</style>
<h1>Contact Us</h1>
<form method="post">
<input type="text" id="Name" placeholder="Your Name"><br>
<input type="email" id="email" placeholder="Your email"><br>
<input type="text" id="message" placeholder="Your Message"><br>
<input type="button" value="Send Email"
onclick="sendEmail()" />
</form>
</body>
</html>
Podemos crear un formulario para ayudar con el código anterior. A continuación, debemos incluir el siguiente código JavaScript en nuestro archivo HTML.
<script src="https://smtpjs.com/v3/smtp.js"></script>
Incluyendo el código anterior, acabamos de agregar bibliotecas SMTPJS a nuestro código que están disponibles en smtpJS.com. El procedimiento posterior de envío de correo electrónico a través del navegador debe tener su servidor configurado y en funcionamiento.
En el siguiente paso, debemos crear un servidor SMTP para enviar los correos electrónicos al receptor. Podemos crear un servidor SMTP con Elastic Email, que proporciona un servicio de servidor gratuito.
smtpJS.com lo dirigirá a la aplicación web de Elastic Email. Podemos crear una cuenta y un servidor SMTP configurando los detalles en “crear credenciales SMTP”.
Una vez creadas las credenciales, aparecerá una ventana emergente que incluirá las credenciales del nuevo servidor. Es mejor copiar la contraseña y guardarla para usarla más tarde.
Configurar credenciales de servidor para código JavaScript
Después de crear el servidor, vuelva a smtpJS.com. Está disponible a través de la función Email.send() de la siguiente manera.
Email
.send({
Host: 'smtp.elasticemail.com',
Username: 'username',
Password: 'password',
To: 'them@website.com',
From: 'you@isp.com',
Subject: 'This is the subject',
Body: 'And this is the body'
})
.then(message => alert(message));
Este fragmento de código debe incluir nuestro código HTML con el reemplazo de los detalles relevantes. El nombre de usuario es un correo electrónico que creamos, una cuenta de correo electrónico elástico y una contraseña.
El Para es la dirección de correo electrónico del destinatario y el De debe reemplazar la dirección de correo electrónico del remitente. Además, el botón Enviar debería activar la función de JavaScript de la siguiente manera.
<button type="button" value="send email" onclick="sendEmail()">Send</button>
Podemos compilar el código completo en el siguiente código, incluido el método Email.send().
Este código no funcionará hasta que incluya las credenciales proporcionadas por Elastic Email al crear un servidor SMTP. Incluya un nombre de usuario y una contraseña para ejecutar el código.
<!DOCTYPE html>
<html>
<head>
<title>Send Mail</title>
<script src=
"https://smtpjs.com/v3/smtp.js">
</script>
<script type="text/javascript">
function sendEmail() {
Email.send({
Host: "smtp.elasticemail.com",
Username: "sender@email_address.com",
Password: "Enter your password",
To: 'receiver@email_address.com',
From: "sender@email_address.com",
Subject: "Sending Email using javascript",
Body: "",
})
.then(function (message) {
alert("mail sent successfully")
});
}
</script>
</head>
<body>
<style>
form{
display: flex;
flex-direction: column;
width: 50%;
margin: auto;
}
#Name,#email,#message,#btn{
padding: 20px;
margin-bottom: 20px;
border: none;
outline: none;
background-color: #ddd;
}
#btn{
width: 25%;
}
h1{
text-align: center;
}
</style>
<h1>Contact Us</h1>
<form method="post">
<input type="text" id="Name" placeholder="Your Name"><br>
<input type="email" id="email" placeholder="Your email"><br>
<input type="text" id="message" placeholder="Your Message"><br>
<input type="button" value="Send Email"
onclick="sendEmail()" />
</form>
</body>
</html>
Podemos configurar Para con una serie de direcciones de correo electrónico si tenemos varios destinatarios para recibir correos electrónicos.
Producción:
Lo importante es que podemos cifrar nuestras credenciales SMTP evitando que los nombres de usuario y las contraseñas sean visibles desde el servidor del lado del cliente. smtpJS.com ofrece una característica llamada “Cifrar sus credenciales SMTP”.
Con esta función, podemos cifrar las credenciales de nuestro servidor, completando los campos obligatorios. Luego, podemos incluir el siguiente código JS en el código HTML para configurar las credenciales.
Email
.send({
SecureToken: 'C973D7AD-F097-4B95-91F4-40ABC5567812',
To: 'them@website.com',
From: 'you@isp.com',
Subject: 'This is the subject',
Body: 'And this is the body'
})
.then(message => alert(message));
Podemos agregar un token creado para nuestras credenciales en lugar del token seguro de nuestro código HTML. Podemos incluirlo en nuestro código para cifrar nuestras credenciales.
Usando este método, podemos enviar correos electrónicos usando JavaScript.
Conclusión
El envío de correos electrónicos desde el front-end de los sitios web es muy útil para crear aplicaciones web interactivas para el usuario. JavaScript ofrece un método por el cual podemos enviar correos electrónicos desde la ayuda de la interfaz con las bibliotecas SMTPJ.
Podemos enviar correos electrónicos sin actualizar la página y también sin codificación del lado del servidor.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.