Отправка данных формы с помощью ReactJS + NodeJS / Express + Amazon SES

Если вы не жили под скалой в течение последнего десятилетия, вы, вероятно, слышали об этом сервисе под названием AWS от Amazon. Он расшифровывается как Amazon Web Services - всеобъемлющий набор сервисов облачной платформы, для которых вы будете постоянно удивляться, находя новые применения.

У него буквально есть услуги практически для всего, что может понадобиться инженеру-программисту, когда дело доходит до инструментов облачной платформы. Я недавно обнаружил одну из этих служб, Amazon Simple Email Service (SES), пока искал альтернативные способы отправки данных из веб-формы на адрес электронной почты через NodeJS, и я здесь, чтобы поделиться с вами, как этого добиться. .

Требование

Я хотел просто создать веб-форму, которая фиксировала имя пользователя, адрес электронной почты и сообщение с запросом, позволяла им отправлять эти данные в конечную точку NodeJS, которая уведомляла бы меня (и других) по электронной почте. Для ясности я разбил требование на несколько уровней, которые мы будем рассматривать один за другим, начиная с настройки AWS и заканчивая фактическим пользовательским интерфейсом, в который пользователи будут вводить данные:

  • Настроить Amazon SES
  • Используйте AWS SDK для отправки электронных писем через SES
  • Создать конечную точку
  • Создайте веб-форму на основе ReactJS

Настроить Amazon SES

(Этот шаг предполагает, что вы уже создали учетную запись AWS)

Перейдите в панель управления AWS, чтобы настроить доступ к Amazon SES. Для этого нам потребуется сделать следующее:

  • Создайте пользователя IAM с доступом SES
  • Добавьте свой идентификатор ключа доступа и секретный ключ доступа в вашу локальную среду
  • Добавьте и подтвердите адрес электронной почты в SES

Создайте пользователя IAM с доступом SES

  1. Перейдите в панель управления IAM. Нам нужно добавить пользователя с разрешениями на доступ к SES и запросить отправку электронного письма.

2. Щелкните Users на боковой панели и щелкните Add user.

3. Введите желаемое имя пользователя и установите флажок Access type на Programmatic access. Нажмите Next: Permissions

4. Откройте вкладку Attach existing policies directly.

5. Введите «SES» в поле поиска и установите флажок AmazonSESFullAccess имя политики. Нажмите Next: Review

6. Убедитесь, что ваши данные пользователя верны, и к ним прилагаются правильные политики. Нажмите Create user

7. Теперь ваш пользователь создан, и вам предоставлены Access key ID и Secret access key. ВАЖНО: Запишите их оба сейчас, так как они понадобятся вам позже, и вы больше не сможете получить Secret access key!

Добавьте свой идентификатор ключа доступа и секретный ключ доступа в вашу локальную среду

Добавление идентификатора вашего ключа доступа и секретного ключа доступа в вашу локальную среду позволит вам запускать электронные письма, отправленные из вашей локальной среды разработки на вашем компьютере, вместо того, чтобы развертывать их на сервере:

  1. Откройте свой терминал

2. Создайте файл учетных данных в домашнем каталоге .aws (создайте его, если у вас его нет):

touch ~/.aws/credentials

3. Отредактируйте файл учетных данных с помощью VIM:

vi ~/.aws/credentials

4. Добавьте следующее в свой файл и сохраните (не забудьте заменить значения aws_access_key_id и aws_secret_access_key на те, которые вы записали ранее):

[default] 
aws_access_key_id = [ENTER YOUR ACCESS KEY ID HERE] aws_secret_access_key = [ENTER YOUR SECRET ACCESS KEY HERE]

Добавьте и подтвердите адрес электронной почты в SES

Последний шаг - добавить и подтвердить адрес электронной почты в SES. Это электронное письмо будет использоваться для отправки данных формы от имени ваших пользователей, что в данном случае по сути то же самое, что и отправка электронного письма самому себе. Преимущество этого заключается в том, что вы используете службу собственного почтового провайдера (например, Gmail) для отправки данных, отправленных пользователем, себе и другим.

  1. Перейдите в панель управления Amazon SES.

2. Щелкните Email Addresses на боковой панели, чтобы отобразить список идентификаторов адресов электронной почты. Нажмите Verify a New Email Address

3. Вам будет предложено ввести адрес электронной почты. Это адрес электронной почты, который будет использоваться для отправки данных, отправленных пользователем, поэтому запомните адрес электронной почты, который вы указываете здесь. Щелкните Verify This Email Address.

4. На этот адрес будет отправлено письмо с подтверждением, где вам просто нужно щелкнуть ссылку для подтверждения.

Используйте AWS SDK для отправки электронных писем через SES

Теперь, когда мы настроены на AWS для использования Amazon SES, давайте погрузимся в код и создадим почтовые функции с помощью AWS SDK.

Добавьте aws-sdk как зависимость:

npm install aws-sdk

Создайте новый mailer.js файл. Этот файл будет содержать интеграцию Amazon SES, необходимую для создания и отправки электронного письма. Импортируйте зависимость aws-sdk:

В этом примере мы собираемся отправить электронное письмо в формате HTML, поэтому давайте создадим небольшую вспомогательную функцию, которая берет data из нашей формы и возвращает строку с форматированием HTML:

Затем давайте создадим sendMail функцию, которая принимает sender адрес электронной почты, массив receivers и саму форму data:

На этом интеграция нашего приложения с Amazon SES завершена - просто! Теперь у нас есть функция, которая будет принимать данные формы и составлять электронное письмо в формате HTML для отправки списку получателей, используя указанный адрес электронной почты в качестве отправителя.

Примечание. Просмотреть весь файл здесь

Создать конечную точку

Чтобы создать конечную точку, мы будем использовать NodeJS и Express. Express - это мощный минималистичный фреймворк для NodeJS, который предоставляет нам удобный и простой способ создания конечной точки.

Во-первых, нам нужно добавить express в качестве зависимости:

npm install express

Теперь давайте создадим новый server.js файл и импортируем несколько модулей, которые нам понадобятся:

Затем необходимо выполнить некоторую конфигурацию, чтобы настроить наше приложение Express, указать порт для запуска сервера и указать регион AWS:

Наконец, создайте конечную точку, которую мы будем использовать для отправки запросов от клиента. Важно убедиться, что вы обновили первый аргумент для sendMail (sender) на тот же адрес электронной почты, который вы подтвердили на панели управления Amazon SES. Amazon SES позволит вам отправлять электронные письма только с подтвержденного адреса электронной почты:

Примечание. Просмотреть весь файл здесь

Создайте веб-форму на основе ReactJS

Во-первых, эта часть состоит из нескольких слоев; создание вспомогательной функции для отправки данных через FetchAPI, секунду; предоставление способа извлечения данных из элементов формы в объект, который мы можем отправить через запрос, и в-третьих; создание элементов формы пользовательского интерфейса, позволяющих пользователям вводить данные.

Публикация с помощью FetchAPI

Создайте вспомогательную функцию, используя Fetch api:

Эта вспомогательная функция позволяет нам отправлять почтовый запрос на сервер. Он принимает data в качестве аргумента, который ожидает свойство url, содержащее URL-адрес конечной точки для отправки запроса. Обратите внимание, как после получения свойства url мы удаляем его, поскольку на самом деле мы не хотим отправлять его в полезных данных запроса, это просто способ передать URL-адрес конечной точки и связанные полезные данные запроса в качестве одного аргумента.

Отправка данных формы

Затем нам нужен способ отправки входных данных формы в нашу еще не созданную конечную точку. Мы можем сделать это, взяв данные из элемента формы и передав их нашей вспомогательной функции post. Это можно сделать, добавив небольшой метод в наш компонент ReactJS, когда пользователь запускает событие onSubmit:

Метод submitForm не обязательно должен быть частью компонента ReactJS, он просто должен быть обработчиком события onSubmit, которое запускается из элемента form DOM. Это дает нам доступ к цели event (в данном случае, форме), что впоследствии позволяет нам извлекать все значения из входных данных формы.

Когда наша post вспомогательная функция и submitForm метод готовы, единственной недостающей частью клиентской функциональности является создание пользовательского интерфейса, в который пользователи будут отправлять данные.

Элементы формы

Нам понадобится форма для отображения в пользовательском интерфейсе с полями для ввода имени, адреса электронной почты и сообщения. Добавьте прослушиватель событий onSubmit, который вызывает наш метод submitForm и передает event.

Вышесказанное может быть достигнуто с использованием любой фреймворка или библиотеки по вашему выбору - или вообще без использования - но основы те же; нам нужны поля ввода и обработчик событий onSubmit, чтобы иметь дело с отправкой формы.

Примечание. Просмотреть весь файл здесь

Теперь у нас есть все необходимое для нашего приложения! У нас есть:

  • Веб-форма, позволяющая пользователям вводить данные
  • Метод, преобразующий входные данные в объект, готовый к отправке через запрос.
  • Вспомогательная функция, которая позволяет нам отправлять данные через Fetch API
  • Конечная точка, которая получает объект, содержащий данные нашей формы
  • Файл mailer.js, который генерирует необходимые параметры для Amazon SES API и заполняется данными нашей формы.

Вот и все!

Мы создали веб-форму, создали конечную точку, интегрировали Amazon SES API и настроили панель управления IAM и SES, которая позволяет нам предоставлять пользователям форму, которую они могут отправить, и получать данные этой формы по электронной почте через Amazon SES. !