Как отправлять электронные письма с помощью JavaScript

JavaScript — это язык программирования, который можно использовать как для фронтенда, так и для бэкенда. Вы не можете отправлять электронные письма, используя только код JavaScript, из-за отсутствия поддержки серверных сокетов. Для этого вам нужен серверный язык, который общается с SMTP-сервером. Вы можете использовать JS в сочетании с серверным скриптом, который будет отправлять электронные письма из браузера на основе ваших запросов. Это мы собираемся обсудить ниже.

Как отправлять электронные письма с помощью JavaScript

Итак, давайте выясним, как вы можете использовать JS для отправки писем из приложения, у которого нет серверной части.

SmtpJS.com — отправка электронной почты из JavaScript

SmtpJS — это бесплатная библиотека, которую вы можете использовать для отправки электронных писем из JavaScript. Все, что вам нужно, это SMTP-сервер и несколько манипуляций, чтобы добиться цели. Мы будем использовать Mailtrap в качестве сервера, потому что это действенное решение для тестирования электронной почты. Ниже приведен поток, которому вы должны следовать:

* Создайте файл HTML (например, test.html) со следующим скриптом:

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

* Создайте кнопку, которая активирует функцию JavaScript.

   <input type=»button» value=»Send Email» onclick=»sendEmail()»>

* Напишите функцию JS для отправки электронных писем через SmtpJS.com.

   function sendEmail() { Email.send({ Host : «smtp.mailtrap.io», Username : «<Mailtrap username>», Password : »  <Mailtrap password>», To : ‘recipient@example.com’, From : «sender@example.com», Subject : «Test email», Body : «<html><h2>Header</h2><strong>Bold text</strong><br></br><em>Italic</em></html>» }).then( message => alert(message) ); }

Если у вас есть несколько получателей, вы можете указать массив адресов электронной почты в свойстве Кому:

* Запустите test.html в браузере и отправьте письмо.

Как отправлять электронные письма с помощью JavaScript

Недостатком приведенного выше примера кода является то, что ваше имя пользователя и пароль видны в сценарии на стороне клиента. Это можно исправить, если вы используете опцию шифрования, предоставляемую SmtpJS. Нажмите кнопку Зашифровать учетные данные SMTP и заполните необходимые поля.

Как отправлять электронные письма с помощью JavaScript

После этого нажмите «Сгенерировать токен безопасности» и используйте его в своей функции JS вместо настроек SMTP-сервера, например:

   SecureToken : «<your generated token>»

EmailJS

EmailJS.com позволяет вам подключить свою почтовую службу, создать шаблон электронной почты и отправить его с помощью JavaScript без какого-либо серверного кода. Давайте проверим это.

* Создайте учетную запись и выберите службу электронной почты для подключения. Доступны популярные варианты транзакционных сервисов, такие как Amazon SES или Mailgun, а также персональные сервисы, такие как Gmail или Outlook. Вы также можете добавить собственный SMTP-сервер. Это то, что мы собираемся сделать, так как мы используем Mailtrap.

Как отправлять электронные письма с помощью JavaScript

* Создайте шаблон письма с помощью встроенного редактора. Редактор предоставляет множество возможностей для создания контента и другие полезные функции, такие как автоответчик, проверка reCAPTCHA и многое другое. Также необходимо понимать основы кодирования собственного HTML-шаблона электронной почты. Как только это будет сделано, нажмите Сохранить.

Одним из основных преимуществ EmailJS.com является то, что типичные атрибуты электронной почты скрыты. Шаблон включает поле получателя, и его нельзя переопределить из JS, поэтому вы отправляете шаблон, настроенный ранее.

* Теперь вам нужно установить EmailJS SDK. Это можно сделать с помощью npm:

   npm install emailjs-com —save

или bower

   bower install emailjs-com —save

Если вам нужно использовать EmailJS на своем веб-сайте, вставьте следующий код перед закрывающим тегом:

   <script type=»text/javascript»
src=»https://cdn.jsdelivr.net/npm/emailjs-com@2.4.0/dist/email.min.js»>
</script>
<script type=»text/javascript»>
(function(){
emailjs.init(«YOUR_USER_ID»); //use your USER ID
})();
</script>

* Фактическая отправка электронной почты может осуществляться двумя способами: emailjs.send или emailjs.sendForm. Вот примеры кода для обоих из них:

emailjs.send

   var templateParams = {
name: ‘James’,
notes: ‘Check this out!’
};

emailjs.send(‘YOUR_SERVICE_ID’, ‘YOUR_TEMPLATE_ID’, templateParams) //use your Service ID and Template ID
.then(function(response) {
console.log(‘SUCCESS!’, response.status, response.text);
}, function(error) {
console.log(‘FAILED…’, error);
});

emailjs.sendForm

   var templateParams = {
name: ‘James’,
notes: ‘Check this out!’
};

emailjs.sendForm(‘YOUR_SERVICE_ID’, ‘YOUR_TEMPLATE_ID’, templateParams) //use your Service ID and Template ID
.then(function(response) {
console.log(‘SUCCESS!’, response.status, response.text);
}, function(error) {
console.log(‘FAILED…’, error);
});

Хотя отправка электронных писем выполняется на стороне сервера, вы можете воздержаться от написания кода на стороне сервера. SmtpJS и EmailJS — это два действенных решения, которые оптимизируют ваш интерфейс и позволяют отправлять электронные письма. EmailJS лучше, потому что он скрывает типичные атрибуты электронной почты, и вы можете отправлять любые шаблоны, которые вы настроили ранее. Вы также можете использовать метод mailto, который отличается, но все же может быть полезен в некоторых случаях. Попробуйте Mailtrap, чтобы проверить, что лучше работает для вас!

Оцените статью
Поделиться с друзьями
Валерий Матафонов

Автор блога WM-IT.pro. Занимаюсь разработкой и оптимизацией сайтов с 2010 года.

WM-IT.pro - Блог об информационных технологиях
Добавить комментарий

  1. Vetal

    Я бы очень неохотно передавал свой пароль SMTP крошечной маленькой компании, чтобы они могли отправлять электронные письма, используя мой сервер, в обмен только на мой пароль. Я не плачу им. У них нет сильной мотивации поддерживать службу в рабочем состоянии / действительно защищать мои учетные данные / не использовать мой сервер для своей рассылки спама.

    Ответить