Отправка писем с помощью JavaScript - UPROGER

JavaScript – это язык программирования, который можно использовать как для интерфейсной, так и для внутренней разработки. Когда JavaScript упоминается в контексте отправки электронных писем, Node.js – это первое, что приходит на ум. И сегодня мы разберем, как использовать JS для отправки электронных писем из приложения, у которого нет сервера.

FAQ: Могу ли я отправлять электронные письма с JS или нет?

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

Почему вы можете захотеть отправлять электронные письма с помощью JS

Традиционно серверная часть обычного приложения отвечает за отправку электронных писем. Вам нужно будет настроить сервер с использованием внутренней технологии. Клиентская сторона отправляет запрос на сервер, который создает электронное письмо и отправляет его на SMTP-сервер.

Итак, почему кто-то может пойти другим путем и отправлять электронные письма прямо со стороны клиента с помощью JavaScript? Такой подход весьма полезен для создания контактных форм или других видов взаимодействия с пользователем в веб-приложениях, что позволяет вашему приложению отправлять электронную почту без обновления страницы, с которой взаимодействует пользователь. Кроме того, вам не нужно возиться с кодированием сервера. Это веский аргумент, если ваше веб-приложение использует отправку электронной почты только для контактных форм. Ниже вы найдете несколько вариантов того, как заставить ваше приложение отправлять электронные письма со стороны клиента.

mailto: для отправки формы данных

Поскольку вы не можете отправить электронное письмо напрямую с помощью JS, вы можете указать браузеру открыть для этого почтовый клиент по умолчанию. Технически метод mailto: не отправляет электронную почту прямо из браузера, но может выполнять следующую работу:

<form action="mailto:you@yourdmainhere.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>

Когда вы запустите код в браузере, вы увидите следующее:

После отправки данных браузер открывает почтовый клиент по умолчанию. В нашем случае это Gmail.

Метод mailto: является довольно простым решением для реализации , но он имеет некоторые специфические недостатки:

Вы не можете контролировать макет данных, поскольку данные отправляются в форме, отправленной браузером.
mailto:не защищает ваш адрес электронной почты от спам-ботов. Некоторое время назад это можно было смягчить, построив ссылку в JS. В наши дни все больше и больше ботов запускают JS и не полагаются на HTML, отображаемый только сервером.

SmtpJS.com – отправка писем из JavaScript

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

Создайте HTML-файл (например, test.html) со следующим скриптом:
<script src="https://smtpjs.com/v3/smtp.js"> </script>
Создайте кнопку, которая будет запускать функцию JavaScript.
<input type="button" value="Send Email" onclick="sendEmail()">
Напишите функцию JS для отправки писем через SmtpJS.com.

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 в браузере и отправьте письмо

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