Бессерверная отправка электронной почты

Используйте EmailJS для отправки электронной почты без бэкэнда

Отправка электронного письма с веб-сайта React вашим пользователям или самому себе может показаться сложной, поскольку вам нужно настроить внутренний сервер и создать функцию для отправки электронного письма. К счастью, вы можете легко отправлять электронные письма без бэкэндов с помощью EmailJS. Это совершенно бесплатная служба доставки электронной почты, которую вы можете интегрировать непосредственно в JavaScript (или React). Другими словами, без использования серверной части вы можете отправлять электронные письма прямо со своего сайта!

Завести аккаунт

Создайте учетную запись EmailJS. Бесплатный уровень позволяет отправлять до 200 электронных писем бесплатно каждый месяц. Если вы хотите отправить больше, вы можете изучить их страницу с ценами, чтобы узнать обо всех их различных планах. После регистрации вы попадете на следующий экран.

Электронная почтаJS Dashboard

Почтовые сервисы

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

EmailJs Доступные сервисные интеграции

В моем случае я планирую отправить только несколько писем. Мой провайдер электронной почты — Gmail, поэтому, когда я нажимаю на него, мне нужно настроить службу. Нажмите кнопку Подключить учетную запись, чтобы связать свою учетную запись Gmail с EmailJS. Это позволит EmailJS отправлять электронную почту под вашим именем/адресом электронной почты. Скопируйте Идентификатор службы, так как он понадобится нам позже.

Служба конфигурации EmailJS

Шаблоны электронной почты

Далее нам нужно создать шаблон электронной почты. Перейдите на вкладку Шаблоны электронной почты и выберите Создать новый шаблон. Шаблон по умолчанию будет выглядеть так:

Шаблон EmailJS по умолчанию

Текст в фигурных скобках, например {{from_name}}, — это переменная, которую вы передадите функции для отправки электронного письма. Давайте изменим некоторые из них, чтобы потом было легче в процессе кодирования.

Шаблон электронной почтыJS

В шаблоне выше:

  • Замените {{to_name}} на {{name}}
  • Удалите переменную после Hello
  • Замените {{reply_to}} в поле Ответить на справа на {{email}}

Затем перейдите на вкладку Настройки этого шаблона. Давайте переименуем наш шаблон в Мой шаблон — или любое другое имя, которое вы хотите. Скопируйте идентификатор шаблона, так как он понадобится нам позже. Не забудьте нажать Сохранить, когда закончите.

Настройки шаблона EmailJs

Интегрировать EmailJS

Чтобы использовать EmailJS в нашем проекте, нам нужно установить SDK. Выполните следующую команду в терминале, чтобы сохранить пакет EmailJS.

$ npm install emailjs-com --save

У нас есть последний идентификатор, который является идентификатором пользователя, который нужно получить. Вернувшись на панель инструментов EmailJS, нажмите Интеграция. На вкладке NPM вы увидите инструкции по установке и использованию SDK. Вы также увидите свой идентификатор пользователя во втором и третьем синих прямоугольниках. Скопируйте его, так как он понадобится нам в коде. Нам не понадобится токен доступа.

Интеграция с электронной почтой

Создайте свою кнопку

Создайте кнопку, чтобы мы могли вызывать функцию для отправки электронного письма при нажатии на эту кнопку. Эта кнопка принимает одно свойство, которое является событием onClick. Мы также используем styled-components для оформления этой кнопки.

// Button.js
import React from "react";
import styled from "styled-components";
const MyButton = (props) => {
  return <Button onClick={props.onClick}>Send email</Button>;
};
export default MyButton;
const Button = styled.button`
  background: linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%);
  padding: 12px 0;
  width: 200px;
  border: none;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-family: Segoe UI, sans-serif;
  display: grid;
  justify-self: center;
`;

Создайте функцию

Создайте новый файл, в котором мы будем хранить функцию отправки электронного письма. Нам нужно импортировать emailjs из SDK, который мы установили в нашем проекте. Нам также необходимо предоставить три идентификатора, которые мы скопировали в начале этого руководства (serviceId, templateId и userId), так что вставьте их в их соответствующую переменную, заключенную в двойные кавычки.

Примечание. Для целей этого руководства мы жестко закодировали ключи в нашем проекте. Однако никогда не жестко кодируйте свои ключи в своем файле, если вы планируете поделиться своим проектом или зафиксировать его, так как это большой недостаток безопасности. Сохраните их в файле .env, чтобы сохранить их в секрете.

// sendEmail.js
import emailjs from "emailjs-com";
const serviceId = "";
const templateId = "";
const userId = "";
const sendEmail = async (name, email, message) => {
  try {
    const response = await emailjs.send(
      serviceId,
      templateId,
      { name, email, message },
      userId
    );
    if (response.status === 200) {
      console.log("Successfully sent message.");
    }
  } catch (error) {
    console.error("Failed to send email. Error: ", error);
  }
};
export default sendEmail;

Эта функция принимает три аргумента: имя, адрес электронной почты и сообщение. Это три переменные, которые мы добавили в шаблон на панели инструментов EmailJS. Затем мы вызываем функцию send() из SDK EmailJS, и, если все работает хорошо, мы получаем сообщение Successfully sent, напечатанное на консоли. Если нет, мы увидим ошибку. Не забудьте также экспортировать функцию в нижней части этого файла.

Вызовите функцию

В файле App.js или любом другом файле импортируйте кнопку и добавьте ее в тело возврата.

// App.js
import React from "react";
import MyButton from "./Button";
const App = () => {
  return (
    <div>
      <MyButton />
    </div>
  );
};
export default App;

Затем давайте импортируем функцию sendEmail из sendEmail.js.

// App.js
import sendEmail from "./sendEmail"

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

<MyButton
  onClick={() =>
		sendEmail(
		  "Stephanie",
	    "[email protected]",
	    "Hello from my React application!"
	  )
	}
/>;

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

Проверьте свою функцию

Теперь самое интересное: все проверить! Нажмите на кнопку и откройте консоль, чтобы увидеть, получили ли вы успех или сообщение об ошибке. Вы также можете перепроверить, зайдя в свой почтовый ящик. Вы должны были получить электронное письмо, подобное приведенному ниже.

Пример письма, отправленного из EmailJS

Если вы столкнулись с ошибкой, убедитесь, что вы скопировали правильные идентификаторы и разрешили EmailJS отправлять электронные письма от вашего имени.