Руководство по Отправке электронных писем с помощью Javascript впервые появилось в блоге Mailtrap.
JavaScript – это язык программирования, который вы можете использовать как для интерфейсной, так и для серверной разработки. Когда имя JavaScript используется в контексте отправки электронных писем, Node.js это первое, что приходит на ум. Мы даже писали в блоге о том, как отправлять электронные письма с Node.js . В этой статье мы хотим изменить точку зрения со стороны сервера на сторону клиента. Давайте выясним, как вы можете использовать JS для отправки электронных писем из приложения, у которого нет бэкэнда.
Часто задаваемые вопросы: Могу ли я отправлять электронные письма с помощью JS или нет?
Вы не можете отправлять электронные письма только с помощью кода JavaScript из-за отсутствия поддержки серверных сокетов. Для этого вам нужен язык на стороне сервера, который взаимодействует с SMTP-сервером. Вы можете использовать JS в сочетании со скриптом сервера, который будет отправлять электронные письма из браузера на основе ваших запросов. Это значение, которое мы собираемся представить ниже.
Почему вы можете захотеть отправлять электронные письма с помощью JS
Традиционно за отправку электронной почты отвечает серверная часть обычного приложения. Вам нужно будет настроить сервер с использованием серверной технологии. Клиентская сторона отправляет запрос на серверную сторону, которая создает электронное письмо и отправляет его на SMTP-сервер. Если вам интересно, что происходит с электронной почтой после этого, прочтите наш пост в блоге SMTP-ретранслятор .
Итак, зачем кому-то идти другим путем и отправлять электронные письма прямо со стороны клиента, используя JavaScript? Такой подход весьма полезен для создания контактных форм или других видов взаимодействия с пользователем в веб-приложениях, что позволяет вашему приложению отправлять электронное письмо без обновления страницы, с которой взаимодействует пользователь. Кроме того, вам не нужно возиться с кодированием сервера. Это веский аргумент, если ваше веб-приложение использует отправку электронной почты только для контактных форм. Ниже вы найдете несколько вариантов того, как заставить ваше приложение отправлять электронные письма со стороны клиента.
адрес электронной почты: для отправки данных формы
Поскольку вы не можете отправить электронное письмо напрямую с помощью JS, вы можете указать браузеру открыть для этого почтовый клиент по умолчанию. Технически метод mailto: ` не отправляет электронную почту напрямую из браузера, но он может выполнить эту работу. Посмотрите, как работает следующий пример кода:
имя: Электронная почта:
Когда вы запустите его в браузере, вы увидите следующее:
После отправки данных браузер открывает почтовый клиент по умолчанию. В нашем случае это Gmail.
Метод mailto: является довольно простым решением для реализации, но у него есть некоторые специфические недостатки:
- Вы не можете контролировать расположение данных, так как данные отправляются в форме, отправленной браузером.
mailto:не защищает ваш адрес электронной почты от сбора спам-ботами. Некоторое время назад это можно было бы смягчить, создав ссылку в JS. В наши дни все больше и больше ботов запускают JS и не полагаются на HTML, отображаемый только сервером.
SmtpJS.com – настоящая отправка электронной почты с помощью JavaScript
Smtp JS – это бесплатная библиотека, которую вы можете использовать для отправки электронных писем с помощью JavaScript. Все, что вам нужно, – это SMTP-сервер и несколько манипуляций, чтобы все было сделано. Мы будем использовать Mailtrap.io в качестве сервера, потому что это эффективное решение для тестирования электронной почты. Ниже приведен поток, которому вы должны следовать:
Создайте HTML-файл (например, test.html ) со следующим сценарием:
Создайте кнопку, которая вызовет функцию JavaScript
Напишите функцию JS для отправки электронных писем через SmtpJS.com . функция SendEmail() { Электронная почта.отправить ({ Ведущий: “smtp.mailtrap.io “, Имя пользователя: “”, Пароль: “”, Кому: ‘ recipient@example.com ‘, От: ” sender@example.com “, Тема: “Тестовое электронное письмо”, Текст: }) .затем( сообщение => оповещение(сообщение) ) ;
}
Недостатком приведенного выше примера кода является то, что ваше имя пользователя и пароль видны в сценарии на стороне клиента. Это можно исправить, если вы используете опцию шифрования, предоставляемую Smtp JS. Нажмите кнопку Зашифровать свои учетные данные SMTP и заполните необходимые поля.
После этого нажмите Сгенерировать маркер безопасности и используйте его в своей функции JS вместо настроек SMTP-сервера, как показано ниже: SecureToken: "<ваш сгенерированный маркер>"
Хотите больше примеров кода для HTML-письма и письма с вложениями? Ознакомьтесь с полной статьей в блоге Mailtrap.
Оригинал: “https://dev.to/mailtrap/sending-emails-with-javascript-4jdl”