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

Posted 2023-02-22

【中文标题】如何从我的 React Web 应用程序发送电子邮件

【英文标题】：How to send email from my react web application

【发布时间】：2019-09-11 16:32:25

【问题描述】：

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

【问题讨论】：

既然你标记了node.js，你有一个Node服务器在运行吗？

不，我不......我认为可以使用 node.js 发送邮件......所以我标记了它

【参考方案1】：

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

This tutorial 讨论了如何使用 emailJS SMTP 服务器来做到这一点（如果优先考虑免费的话，它允许您每月发送 200 封免费电子邮件）。

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

---

第一步

通过安装 emailJS

npm install emailjs-com

或

yarn add emailjs-com

Source

如果您正在使用 create-react-app，请查看我上面提到的教程或此链接源，其中提供了有关如何将 emailJS 包含在 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 或 @987654338 之类的方式向后端服务器发出包含电子邮件、发件人、收件人等的请求@ 将执行 sendEmail 函数

第 3 步

在https://www.emailjs.com/开设账户

第 4 步

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

如果您使用 gmail，则应将 'YOUR_SERVICE_ID'（第 2 步）替换为 'gmail'

第 5 步

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

您应该用此模板 ID 替换 'YOUR_TEMPLATE_ID'（第 2 步）

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

第 6 步

您可以通过 Integration -> API

找到您的用户 ID

用此用户 ID 替换 'YOUR_USER_ID'（第 2 步）

---

如果您不想要垃圾邮件，add Captcha

【参考方案2】：

您只能从前端使用 smtp 服务器触发邮件，例如 smtpJS

接下来的步骤是

转到此链接smtpJS 点击GetSMTPCredentials并注册。 注册后，记下凭据并单击ENCRYPTSMTPCrendentials

示例如下

var test=
sendEmail(subject,to,body)
    
    /* SmtpJS.com - v3.0.0 */
    let Email =  send: function (a)  return new Promise(function (n, e)  a.nocache = Math.floor(1e6 * Math.random() + 1), a.Action = "Send"; var t = JSON.stringify(a); Email.ajaxPost("https://smtpjs.com/v3/smtpjs.aspx?", t, function (e)  n(e) ) ) , ajaxPost: function (e, n, t)  var a = Email.createCORSRequest("POST", e); a.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), a.onload = function ()  var e = a.responseText; null != t && t(e) , a.send(n) , ajax: function (e, n)  var t = Email.createCORSRequest("GET", e); t.onload = function ()  var e = t.responseText; null != n && n(e) , t.send() , createCORSRequest: function (e, n)  var t = new XMLHttpRequest; return "withCredentials" in t ? t.open(e, n, !0) : "undefined" != typeof XDomainRequest ? (t = new XDomainRequest).open(e, n) : t = null, t  ;

    Email.send(
        SecureToken : process.env.SECURE_TOKEN, // write your secure token
        To : to, // to include multiple emails you need to mention an array
        From : process.env.EMAIL_HOST,
        Subject : subject,
        Body : body
    )
    .then(message=>
        // alert(message);
    );

    



 export default test;

你可以像下面这样导入上面的js文件并调用方法

import test from '../../components/sendEmail'
test.sendEmail("sub","msg");

【讨论】：

它显示了我的语法错误，有什么建议可以解决吗？

【参考方案3】：

React 仅用于前端目的，因此它不仅足以发送电子邮件。

但是您可以使用一些外部 API 从客户端发送电子邮件，例如 Mailjet、Gmail Api 等