node.js - 如何从我的 React Web 应用程序发送电子邮件

Question

我的应用程序中有一个电子邮件输入字段和一个按钮。输入电子邮件并单击发送后，我想发送一封包含输入中输入的值的电子邮件。我知道这不能在 Reactjs 中完成，因为它是一个前端。我能怎么做？有人可以帮忙吗？

Answer 1

您可以从前端客户端向 SMTP 服务器发送请求，该服务器将发送电子邮件。

This tutorial运行如何使用 emailJS SMTP 服务器执行此操作(如果优先考虑免费，它允许您每月发送 200 封免费电子邮件)。

我会总结一下，因为它们没有涵盖我想要的所有内容。

<小时/>

第1步:安装emailJS

通过安装 emailJS

npm install emailjs-com

或

yarn add emailjs-com

Source

If you are using create-react-app please view the tutorial I mentioned above or this linked source, where they provide instructions on how to include emailJS with create-react-app

第 2 步:创建用于发送电子邮件的表单

这是使用 emailJS 发送电子邮件的表单的代码示例，您必须将 'YOUR_SERVICE_ID'、'YOUR_TEMPLATE_ID' 和 'YOUR_USER_ID' 替换为您的实际 ID(我将在后面的步骤中解释在哪里找到)

import React from 'react';
import emailjs from 'emailjs-com';

export default function ContactUs() {

  function sendEmail(e) {
    e.preventDefault();    //This is important, i'm not sure why, but the email won't send without it

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          window.location.reload()  //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior) 
      }, (error) => {
          console.log(error.text);
      });
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="contact_number" />
      <label>Name</label>
      <input type="text" name="from_name" />
      <label>Email</label>
      <input type="email" name="from_email" />
      <label>Subject</label>
      <input type="text" name="subject" />
      <label>Message</label>
      <textarea name="html_message" />
      <input type="submit" value="Send" />
    </form>
  );
}

Source (我做了一些调整)

• 如果您不希望客户端看到您的 API 详细信息，则必须通过 axios 或 fetch 等方式向后端服务器(将设置并运行以接收请求)发出请求(包含电子邮件消息、发件人、收件人等)，然后从服务器执行 sendEmail 函数

第 3 步:创建 emailJS 帐户

在 https://www.emailjs.com/ 设置帐户

第 4 步:将电子邮件帐户连接到 emailJS 并获取 YOUR_SERVICE_ID

通过添加服务来连接电子邮件，在本例中我使用了 gmail。

“YOUR_SERVICE_ID”(第 2 步)应该是服务 ID 旁边的 ID

第 5 步:创建模板电子邮件并获取 YOUR_TEMPLATE_ID

通过单击侧面导航栏中的电子邮件模板并选择创建新模板来创建模板。这将创建一个电子邮件大纲并为您提供一个模板 ID

您应该将'YOUR_TEMPLATE_ID'(第 2 步)替换为此模板 ID

这是一个电子邮件模板示例

第 6 步:获取 YOUR_USER_ID

您可以通过集成 -> API 找到您的用户 ID

将“YOUR_USER_ID”(第 2 步)替换为 API key -> 公钥下的 ID

<小时/>

• 如果您不想收到垃圾邮件，add Captcha
• 如果您更改电子邮件密码，则必须重做第 4 步