使用ReactJS + NodeJS / Express + Amazon SES发送表单数据

除非您过去十年来一直生活在困境中,否则您可能听说过这项称为Amazon的AWS的服务。 它代表Amazon Web Services(Amazon Web服务),这是一套全面的云平台服务套件,在其中您将不断惊奇地发现其新用途。

实际上,它提供了软件工程师在使用云平台工具时所需的几乎所有服务。 我最近发现了其中一项服务,即亚马逊的简单电子邮件服务(SES),同时正在寻找通过NodeJS将数据从Web表单发送到电子邮件地址的替代方法,我在这里与您分享如何实现它。

要求

我只想构建一个Web表单来捕获用户的姓名,电子邮件和查询消息,然后允许他们将此数据发布到NodeJS端点,该端点将通过电子邮件通知我(和其他人)。 为了清楚起见,我将需求分为几层,从AWS设置到用户输入数据的实际UI,我们将一步一步地解决该需求:

  • 设置Amazon SES
  • 使用AWS开发工具包通过SES发送电子邮件
  • 创建一个端点
  • 构建基于ReactJS的Web表单

设置Amazon SES

(此步骤假设您已经设置了一个AWS账户)

转到AWS仪表板以设置对Amazon SES的访问权限。 为此,我们将需要执行以下操作:

  • 创建具有SES访问权限的IAM用户
  • 将您的访问密钥ID和秘密访问密钥添加到本地环境
  • 在SES中添加和验证电子邮件

创建具有SES访问权限的IAM用户

  1. 转到IAM仪表板。 我们需要添加一个有权访问SES并请求发送电子邮件的用户

2.单击边栏中的Add user ,然后单击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 IDSecret access key重要说明:请立即记下这两个内容,因为稍后您将需要它们,并且将无法 再次 检索 Secret access key

将您的访问密钥ID和秘密访问密钥添加到本地环境

将访问密钥ID和秘密访问密钥添加到本地环境将使您能够触发从本地开发环境在计算机上发送的电子邮件,而不必部署到服务器:

  1. 打开你的终端

2.在您家的.aws目录中创建一个凭证文件(如果没有,请创建一个凭证文件):

 触摸〜/ .aws / credentials 

3.使用VIM编辑凭据文件:

  vi〜/ .aws /凭证 

4.将以下内容添加到文件中并保存(确保将aws_access_key_idaws_secret_access_key值替换为您先前aws_secret_access_key值):

  [默认] 
aws_access_key_id = [在这里输入您的访问密钥ID] aws_secret_access_key = [在这里输入您的秘密访问密钥]

在SES中添加和验证电子邮件

最后一步是在SES中添加和验证电子邮件。 该电子邮件将用于代表您的用户发送表单数据,在这种情况下,这与向您自己发送电子邮件基本相同。 这样做的好处是,您可以利用自己的电子邮件提供商的服务(例如Gmail)将用户提交的数据发送给自己和他人。

  1. 转到Amazon SES仪表板

2.单击侧栏中的“ Email Addresses ”以显示电子邮件地址身份列表。 单击Verify a New Email Address

3.系统将提示您输入一个电子邮件地址。 这是将用于发送用户提交的数据的电子邮件,因此请记下您在此处指定的电子邮件地址。 单击Verify This Email Address

4.这会将验证电子邮件发送到该地址,您只需单击链接即可进行验证

使用AWS开发工具包通过SES发送电子邮件

现在我们已经在AWS上设置为可以使用Amazon SES,让我们深入研究代码并使用AWS开发工具包构建邮件功能。

aws-sdk添加为依赖项:

  npm安装aws-sdk 

创建一个新的mailer.js文件。 该文件将包含撰写和发送电子邮件所需的Amazon SES集成。 导入aws-sdk依赖项:

在此示例中,我们将发送HTML电子邮件,因此让我们创建一个小的帮助程序函数,该函数从表单中获取data并返回具有HTML格式的字符串:

接下来,让我们创建一个sendMail函数,该函数接受一个sender电子邮件地址,一组receivers和实际的表单data本身:

这就完成了我们的应用程序与Amazon SES的集成方面–简单! 现在,我们有了一个函数,它将采用表格数据并编写HTML电子邮件,以指定的电子邮件地址作为发件人发送给收件人列表。

注意:在 这里 查看整个文件

创建一个端点

为了创建端点,我们将使用NodeJS和Express。 Express是NodeJS的功能强大,极简主义的框架,它为我们创建端点提供了一种简便的方法。

首先,我们需要添加express作为依赖项:

  npm安装快递 

现在,让我们创建一个新的server.js文件,并导入一些我们需要的模块:

接下来,需要一些配置来设置我们的Express应用程序,指定运行服务器的端口并设置您的AWS区域:

最后,创建我们将用于发送客户端请求的端点。 确保将sendMail的第一个参数( sender )更新为在Amazon SES仪表板中验证的同一电子邮件,这一点很重要。 Amazon SES仅允许您从已验证的电子邮件发送电子邮件:

注意:在 这里 查看整个文件

构建基于ReactJS的Web表单

首先,这部分包括几层。 建立一个辅助函数,用于通过FetchAPI发送数据,其次; 提供一种将数据从表单元素提取到可以通过请求发送的对象中的方法,以及第三种方法; 构建UI表单元素以允许用户输入数据。

使用FetchAPI发布

使用Fetch api创建一个辅助函数:

此帮助程序功能使我们可以将发布请求发送到服务器。 它以data作为参数,它期望包含将请求发送到的端点URL的url属性。 请注意,在获取url属性后如何删除它,因为我们实际上并不希望在请求有效负载中发送该属性,这只是我们将端点URL和关联的请求有效负载作为一个参数传递的一种方式。

发送表格数据

接下来,我们需要一种将表单输入数据发送到我们尚未创建的端点的方法。 我们可以通过从表单元素获取数据并将其传递给我们的post helper函数来实现。 这可以通过在用户触发onSubmit事件时向我们的ReactJS组件添加一个小的方法来完成:

submitForm方法不一定是ReactJS组件的一部分,它只需要是从form DOM元素触发的onSubmit事件的事件处理程序。 这使我们能够访问event的目标(在本例中为表单),随后使我们能够从表单的输入中提取所有值。

准备好我们的post helper函数和submitForm方法后,客户端功能的缺失之一就是构建用户可以提交数据的UI。

表单元素

我们将需要一个在UI中显示的表单,其中包含名称,电子邮件和消息的输入字段。 添加一个onSubmit事件侦听器,该侦听器调用我们的submitForm方法并传递该event

可以使用您选择的任何框架或库(或根本不使用)来实现上述目的,但是基本原理是相同的。 我们需要一些输入字段和一个onSubmit事件处理程序来处理表单的提交。

注意:在 这里 查看整个文件

现在,我们已针对我们的应用准备了所有零件! 我们有:

  • 允许用户输入数据的网络表单
  • 一种将输入数据转换为准备通过请求发送的对象的方法
  • 一个帮助程序功能,使我们可以通过Fetch API发送数据
  • 接收包含我们表单数据的对象的端点
  • 一个mailer.js文件,该文件生成Amazon SES API所需的参数并填充我们的表单数据

就是这样!

我们已经建立了一个Web表单,创建了一个端点,集成了Amazon的SES API,并设置了IAM和SES仪表板,该仪表板使我们能够向用户提供他们可以提交的表单,并让我们通过Amazon SES通过电子邮件接收该表单数据。 !