Я недавно построил простой веб-сайт посадочной страницы для клиента, который хотел получить электронные письма через свой веб-сайт, не разделяя их электронную почту.
Честно говоря, я никогда не пытался реализовать эту функциональность сами раньше. Я всегда использовался для простых «контактных нами» кнопкой привязки и A Mailto в href Атрибут, как это:
Но этот подход имеет два неудобства:
- Он заставляет обе стороны, пользователю, которые хотят отправить сообщение и владельцу сайта, который его получает, чтобы поделиться своими письмами друг с другом. Хотя это нормально для некоторых, он не идеален для частных лиц.
- Для посетителей сайта, нажав на ссылку, чтобы открыть их почтовую программу по умолчанию на их устройстве, и это может быть расстраиваемым. Что делать, если они используют публичный компьютер? Что если они не вошли в систему? Что делать, если они просто не хотят использовать свою почтовую программу? Да, технически они могут просто схватить адрес электронной почты получателя и отправить сообщение через их браузер или где они вошли в систему. Но это все дополнительные шаги и препятствия, которые могут препятствовать пользователям отправки своих сообщений, и бизнес может потерять потенциальную обратную связь или возможности.
По этой причине мы решили пойти с помощью формы электронной почты, с которой пользователь может просто написать в своем сообщении, и нажмите «Отправить», отправив электронное письмо на владелец сайта, не покидая сайта.
Быстрый поиск Google показывает, что есть сторонние инструменты/виджеты, которые вы можете встроить на веб-сайт, но большинство из них фирмены и требуют платной подписки на полную настройку.
И если вы не используете CMS, как WordPress, который имеет встроенный плагин, который может сделать это, это неудобная повторяющаяся стоимость.
Вместо этого я решил код, который функционирует сам, поэтому у меня будет полный контроль.
Для целей настоящего Руководства я воссоздаю шаги, которые я взял, чтобы осуществить эту функциональность, используя HTML и AWS Services.
Форма HTML
Я сохраню его Super Simple здесь и пойти с базовой формой HTML без CSS, просто чтобы проверить нашу желаемую функциональность.
Contact Us
Теперь мы хотим обрабатывать функциональность отправки с помощью JavaScript.
const form = document.querySelector('form')
form.addEventListener('submit', event => {
// prevent the form submit from refreshing the page
event.preventDefault()
const { name, email, message } = event.target
console.log('Name: ', name.value)
console.log('email: ', email.value)
console.log('Message: ', message.value)
})
На данный момент у нас есть форма, которая вводится от пользователя пользователя и JavaScript, который просто отображает результаты к консоли.
Мы можем оставить его в этом и начать работать над сервисами Backend, которые будут получать данные формы и отправить электронное письмо с этими данными.
Обзор Backend
Давайте погрузимся в AWS и какие услуги мы будем использовать и как.
Как упоминалось в названии, мы будем использовать AWS LAMBDA и Простая электронная почта (SES). SES – это сервис обмена сообщениями без сервеса, который позволяет отправлять сообщения электронной почты при вызове. AWS Lambda позволяет писать серверный код для выполнения в ответ на события.
Мы также будем использовать API Gateway Что позволяет нам вызвать функции лямбда через http.
В этом случае, когда наша форма представлена, произойдет следующий рабочий процесс:
- Наш браузер (JavaScript) сделает почтовый запрос с данными формы в корпусе запроса к URL-адресу конечной точки, указанный Gateway AWS API
- Шлюз API проверит этот запрос. Затем он будет вызвать функцию лямбда, которая принимает параметр события. Gateway API поставит данные формы в свойство тела параметра событий.
- Наша функция Lambda извлечет данные из тела события, и мы будем использовать эти данные для создания тела электронной почты, который мы хотим отправить, а также его получателей. Затем наша функция будет использовать SDK AWS, чтобы вызвать SES с данными электронной почты.
- Как только SES получает sendmail Запрос, он превращает данные электронной почты в реальную электронную почту текста и отправляет его получателю через собственные почтовые серверы AWS.
Как только электронное письмо отправляется, ваш браузер получит ответ с кодом состояния 200 и сообщение об успехе. Если какой-либо шаг в облаке AWS не удается, ответ будет иметь код состояния 500.
Шаг 1: Как настроить SES
На самом деле мы собираемся настроить каждый из этих шагов в обратном порядке, начиная с SES, который будет проще.
Сначала в вашей консоли AWS перейдите в службу SES -> затем нажмите на адреса электронной почты в боковом меню -> затем нажмите кнопку «Проверьте новый адрес электронной почты».
В диалоге, который открывается, введите адрес электронной почты, который вы хотите, чтобы служба SES поставить как Отправитель Когда он отправляет электронное письмо.
Это отправит электронное письмо на адрес электронной почты, который вы поместите со ссылкой на кнопку, чтобы убедиться. Вот как AWS знает, что владелец электронного письма сконденты, чтобы иметь адрес электронной почты, используемый в качестве адреса отправителя.
До тех пор, пока вы не проверяете электронную почту, Dashboard электронной панели SES сохранит состояние проверки в качестве ожидания.
Как только владелец электронной почты открывает электронное письмо, которое они получили от AWS, и щелкнут ссылку для проверки в нем, состояние проверки должно изменяться для проверки (обновить страницу, чтобы увидеть изменение).
И это все, что вы должны сделать для SES. Вы можете необязательно проверить службу, выбрав подтвержденную электронную почту в списке и нажав кнопку «Отправить тестовую электронную почту». Это позволит вам поместить в адрес электронной почты получателя, предмет и сообщение и отправить его.
Отправленные электронные письма будут подписаны серверами AWS и ваш проверенный адрес должен быть отправителем. Это должно выглядеть так:
Шаг 2: Как настроить Lambda
Теперь это самая забавная часть. Мы собираемся создать функцию, которая собирается получить данные формы и вызовов SES.
Красота функций лямбда в том, что вам не нужно беспокоиться о запуске вашего кода Backend на сервере 24/7 и поддерживая этот сервер. Это Смертный Отказ
Но это не значит, что нет вовлеченных серверов. AWS позаботится об этом под капотом, чтобы вы могли сосредоточиться только на написании кода, не поддерживающих серверов. Кроме того, вы получаете выставку только за количество раз, когда ваша функция вызывается и количество времени, необходимое для выполнения, и это Невероятно дешево Действительно
Создайте роль IAM и настройте ее
Прежде чем мы начнем писать нашу функцию лямбда, нам нужно создать IAM роль Чтобы прикрепить его к функции и предоставить ИТ-разрешениям (называемые политики в AWS), чтобы вызвать службу SES.
Из вашей консоли AWS перейдите в службу IAM -> Нажмите на политики в боковом меню -> затем нажмите кнопку «Создать политику».
На странице создания политики перейдите на вкладку JSON и вставьте следующие разрешения, затем нажмите Далее.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"ses:SendEmail",
"ses:SendRawEmail"
],
"Resource": "*"
}
]
}
На третьем экране назовите политику и нажмите кнопку «Создать политику».
Теперь мы создаем IAM роль который будет прикреплен к лямбде и связать его с политикой разрешений, которые мы только что создали.
В меню IAM бокового меню нажмите «Роли», затем нажмите кнопку «Создать роль».
На экране создания ролей убедитесь, что выбранный тип «AWS Service» и выберите случай Lambda, затем нажмите кнопку «Далее: разрешения».
На следующем экране ищите политику, которую мы создали ранее по его названию и выберите его, затем нажмите Далее.
На экране обзора дайте роль имя, которое вы можете запомнить, нажмите «Создать роль».
Теперь мы можем создать новую функцию лямбда. Перейдите на панель инструментов Lambda Service и нажмите кнопку «Создать функцию».
На экране создания функций назвать вашу функцию, выберите параметр «Автор с нуля» и выберите Node.js в качестве времени выполнения.
В разделе «Изменение роли исполнения по умолчанию» выберите опцию «Использовать существующую роль», затем выберите имя роли, которую вы создали на предыдущем шаге из «Существующей роли».
Наконец, нажмите кнопку «Создать функцию», чтобы создать функцию.
Напишите код и проверьте его
В редакторе откройте файл index.js (это файл, который будет выполнен, когда ваш лямбда называется), и замените его содержимое следующим кодом:
const aws = require("aws-sdk");
const ses = new aws.SES({ region: "us-east-1" });
exports.handler = async function (event) {
console.log('EVENT: ', event)
const params = {
Destination: {
ToAddresses: ["your@email.com"],
},
Message: {
Body: {
Text: {
Data: `Hello from Lambda!`
},
},
Subject: { Data: `Message from AWS Lambda` },
},
Source: "your@email.com",
};
return ses.sendEmail(params).promise()
};
Обратите внимание, что на линии 2 мы используем AWS SDK и создавая экземпляр SES. Причина, по которой я выбрал US-East-1 Как регион, потому что это где я зарегистрировался и проверил мою электронную почту . Обязательно замените электронное письмо и используйте регион AWS, где вы зарегистрировали свой адрес электронной почты.
Теперь, чтобы проверить эту функцию, нажмите кнопку «Развернуть». Затем нажмите кнопку тестирования -> Настройте событие тестирования, которое должно открыть диалог конфигурации теста, где вы можете создать новое тестовое событие.
В редакторе тела тестового события введите следующие JSON, которые имитируют, что в конечном итоге произойдет из нашего запроса браузера. Затем нажмите «Создать».
{
"body": {
"senderName": "Namo",
"senderEmail": "namo@trains.com",
"message": "I love trains!"
}
}
Теперь нажатие на тестовую кнопку запустит тест, который мы только что создали. Он должен открыть новую вкладку в редакторе, чтобы показать нам журналы, созданные из запуска функции, которая должна выглядеть так:
Обратите внимание на объект события, который мы выходили в систему, отображаемые здесь, под функциональными журналами с данными кузова, которые мы использовали в тестовом событии.
Этот тест должен был отправить электронное письмо на мой почтовый ящик, а посмотрим, если это произошло.
Да, как и ожидалось. И это произошло почти сразу после проведения теста.
Теперь давайте изменим наш функциональный код, чтобы получить более значимое сообщение из тестовых данных.
const aws = require("aws-sdk");
const ses = new aws.SES({ region: "us-east-1" });
exports.handler = async function (event) {
console.log('EVENT: ', event)
// Extract the properties from the event body
const { senderEmail, senderName, message } = JSON.parse(event.body)
const params = {
Destination: {
ToAddresses: ["the.benhawy@gmail.com"],
},
// Interpolate the data in the strings to send
Message: {
Body: {
Text: {
Data: `You just got a message from ${senderName} - ${senderEmail}:
${message}`
},
},
Subject: { Data: `Message from ${senderName}` },
},
Source: "the.benhawy@gmail.com",
};
return ses.sendEmail(params).promise();
};
Важно отметить, что когда Gateway API вызывает нашу функцию, она пройдет строку в тело события. Вот почему я использую Json.parse На событии. Те, чтобы повернуть его в JSON и извлечь электронное письмо, имя и сообщение нашего отправителя. Затем я использую эти переменные в тексте тела электронной почты и тему с использованием строки интерполяции.
Если вы попробуете тест, код вернет ошибку. Это связано с тем, что тест пропускает объект JSON к событию. Те, и мы используем JSON.PARSE на JSON, что вызывает ошибку в JavaScript.
К сожалению, редактор теста не позволяет нам пропускать строки к мероприятию, поэтому нам придется проверить это позже откуда-то еще.
Шаг 3: Как настроить шлюз API
Далее последний сервис AWS, который мы собираемся использовать, – это Gateway API, который позволит нашему браузеру отправлять HTTP-запросы на функцию лямбда, которые мы создали.
Не выходя из страницы функции LAMBDA, разверните раздел «Обзор функций» и нажмите «Добавить триггер».
Затем выберите Gateway API из выпадающего списка, HTTP API в качестве типа API, «Open» в качестве механизма безопасности и проверьте опцию CORS Checkbox. Затем нажмите «Добавить».
Вы должны быть перенаправлены на вкладку «Конфигурация» вашей функции, показывая, что новый запуск шлюза API, который вы только что создали. Оттуда, обратите внимание на API конечная точка Отказ Это URL-адрес, который мы будем звонить из вашего браузера с данными формы.
Вернуться к HTML
Мы, наконец, можем проверить форму, чтобы увидеть, отправит ли она электронной почты или нет.
Давайте изменим наш JavaScript для обработки отправки запроса при отправке формы.
const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
// prevent the form submit from refreshing the page
event.preventDefault();
const { name, email, message } = event.target;
// Use your API endpoint URL you copied from the previous step
const endpoint =
"";
// We use JSON.stringify here so the data can be sent as a string via HTTP
const body = JSON.stringify({
senderName: name.value,
senderEmail: email.value,
message: message.value
});
const requestOptions = {
method: "POST",
body
};
fetch(endpoint, requestOptions)
.then((response) => {
if (!response.ok) throw new Error("Error in fetch");
return response.json();
})
.then((response) => {
document.getElementById("result-text").innerText =
"Email sent successfully!";
})
.catch((error) => {
document.getElementById("result-text").innerText =
"An unkown error occured.";
});
});
Теперь момент истины: заполните форму и нажмите «Отправить». Если вы видите сообщение успеха, это означает, что электронное письмо было отправлено.
Поскольку у меня есть электронное письмо, к которому было отправлено сообщение, я быстро посмотрите на мой почтовый ящик, чтобы увидеть, что я получил электронное письмо от себя с деталями, которые я использовал в форме!
Если вы следите, у вас сейчас есть функционирующая форма «свяжитесь с нами», которую вы можете подключить к любому веб-сайту. И вы получите выставок только за то, когда он на самом деле используется.
Я не знаю о тебе, но я думаю, что это довольно круто и почти волшебно! И это хороший, практичный способ использовать облачные вычисления/услуги в вашем рабочем процессе.
Конечно, вы можете настроить этот поток с точки зрения использования фреймворков на внешнем направлении, как React или Vue или другой язык программирования для лямбда, таких как Python или GO.
Прежде чем ты уйдешь…
Спасибо за чтение этого далеко! Я пишу посты о JavaScript, Cloud Development, и мой персональный образовательный и профессиональный опыт как разработчик самоучатки. Так что не стесняйтесь следовать за мной в Twitter @adham_benhawy. Где я тоже о них твит!
Ресурсы
- https://aws.amazon.com/premiumsupport/knowledge-center/lambda-send-email-ses/
- https://docs.aws.amazon.com/lambda/latest/dg/lambda-invocation.html
- https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway.html?icmpid=docs_lambda_console
Оригинал: “https://www.freecodecamp.org/news/how-to-receive-emails-via-your-sites-contact-us-form-with-aws-ses-lambda-api-gateway/”