通过用 Electron/React/TS 编写的应用程序发送电子邮件答案

【问题标题】：Sending email via app written in Electron/React/TS通过用 Electron/React/TS 编写的应用程序发送电子邮件
【发布时间】：2020-12-18 15:14:20
【问题描述】：

我正在尝试在我的应用程序中实现电子邮件/gmail 发送机制。这是一个桌面应用程序，在 React 和 Electron 的帮助下编写了托管内容。我一直在尝试以网络上描述的各种方式来实现它，使用各种模块、googleapi 等，但总是以一些奇怪的错误和更神秘的问题描述结束——代码通常是基于在文章的“Node.js”部分。我不知道我是否完全理解这个问题的架构方面，甚至是否有可能触发发送机制，或者它是否必须以服务器端服务的形式实现。如果有人能对这个问题有所了解，我将不胜感激，因为我已经在这个问题上花费了太很多小时。提前致谢！

【问题讨论】：

你应该选择一些方法，如nodemailer.com/about 或任何......有很多。然后，如果您坚持向我们展示您的错误的最小重现，那么我们可以提供帮助。现在你只描述你在某些解决方案上有一些错误，所以......现在我可以说“我很抱歉”:(
我怀疑您的 SMTP 有问题。 nodemailer 的第一步：“使用 SMTP 或其他传输机制创建 Nodemailer 传输器”
嘿罗伯特，是的，我尝试使用codeburst.io/… 中描述的 nodemailer，但最终出现异常“Uncaught TypeError: net.isIP is not a function”，详见此处：@ 987654323@
也可以这样做，将发送邮件移动到小节点 api (stackoverflow.com/questions/55163689/…)
我刚刚顿悟了，我马上就回来……

标签： javascript node.js typescript google-api gmail

【解决方案1】：

想通了（终于！）。我把它写在这里，希望它对将来的人有所帮助。

我所有尝试和方法都失败的主要原因是我在渲染/浏览器进程而不是主电子/节点进程上实现它们（来自 Electron 的documentation）。当我将this 文章（利用 nodemailer 的方法）中详细描述的实现移动到主进程时，在我的例子中，主进程几乎只包含 electron.js，并通过ipc（进程间通信）从渲染进程触发它，它奇迹般地开始工作了！

感谢 Robert 指出 this 问题，因为以下陈述使我走上了正确的道路。

我在尝试实现 nodemailer 代码客户端时遇到了同样的问题。原因是 nodemailer 似乎在浏览器中不起作用（仅在节点中）。将其移动到服务器端（进入快速应用程序）解决了这个问题。

// electron.js
var nodemailer = require("nodemailer");

function SendIt() {
  var transporter = nodemailer.createTransport({
    service: "gmail",
    auth: {
      user: "your_email@gmail.com",
      pass: "your_password",
    },
  });

  const mailOptions = {
    from: "your_email@gmail.com", 
    to: "recepient@gmail.com",
    subject: "Subject of your email",
    html: "<p>Your html here</p>",
  };

  transporter.sendMail(mailOptions, function (err, info) {
    if (err) console.log(err);
    else console.log(info);
  });
}

electron.ipcMain.on("SendIt", (event, args) => {
  console.log("ipcMain: Executing SendIt");
  SendIt();
});

【讨论】：

请注意，在电子应用程序中执行此操作会将您的 SMTP 帐户的凭据暴露给有权访问它的任何人。如果您需要为生产应用程序（而不是电子邮件客户端）执行此操作，我强烈建议您使用包含您的凭据并直接与客户端接口的后端服务..
我知道它暴露了用户的电子邮件帐户名称以及与这些字符串值相关联的密码，最终这些字符串值被编译成最终的可执行文件？或者是否存在另一种情况，这些值会暴露在不受欢迎的人眼中（可能是一些网络通信？）。谢谢指出
Electron 应用程序可以轻松反编译为其源 JS。当然，使用 TLS 不太可能进行网络通信，但受信任的自签名 CA 也可以破坏这种情况。
@Eric 请如果您可以共享角度代码以及“通过 ipc 从渲染过程中触发它”的位置
@Eric 感谢这篇文章。我想弄清楚如何通过我的 Quasar/Electron 应用程序发送邮件。在你上面的代码中，我不太明白......你把“var nodemailer = require("nodemailer");”在 electron-preload.js 文件中，然后其余代码进入一个单独的页面？还是必须全部进入 electron-*.js 文件？ Electron 现在有 electron-preload.js 和 electron-main.js。谢谢！

【解决方案2】：

如果有人在使用 Quasar/Electron 并想使用 nodemailer。这对我有用。我正在回复这篇文章，因为它与电子有关。正如原作者所说，nodemailer必须作为node进程运行，不能运行在renderer进程上。

我将 nodemailer 代码放在 electron-preload.js 文件中（在 src-electron 目录下）。

Electron 使用上下文隔离。因此，需要将nodemailer代码放入electron-preload.js文件中。只是将它放在任何旧的 .vue 文件中都会导致错误。我得到的错误是：nodemailer.createTransport 不是函数

为了克服上下文隔离，我不得不使用上下文桥，如本电子文档中所述：https://www.electronjs.org/docs/latest/tutorial/context-isolation

出于测试目的，我按照 nodemailer 文档中的建议使用 ethereal.email。

电子预加载.js：

import { contextBridge } from 'electron'

contextBridge.exposeInMainWorld('myAPI', {
    doAThing: (emailFrom, emailTo, emailSubject, emailHTML) => {
         var nodemailer = require("nodemailer")

 let transporter = nodemailer.createTransport({
    host: "smtp.ethereal.email",
    port: 587,
    secure: false, // true for 465, false for other ports
     auth: {
          user: 'user@ethereal.email',
          pass: 'password'
      },
  })
  
    const mailOptions = {
      from: emailFrom, 
      to: emailTo,
      subject: emailSubject,
      html: emailHTML,
    }
  
    transporter.sendMail(mailOptions, function (err, info) {
      if (err) console.log(err);
      else console.log(info);
    })
      console.log("in the PreLoad Script")
    }
 }) // end contextBridge.exposeInMainWorld

然后，在我的 .vue 文件（我正在调用我的 personDetails.vue）中，我有一个按钮，当单击它时会触发此方法：

 async sendEmailMethodSMTP() {
      myAPI.doAThing(this.emailFrom, this.emailTo, this.emailSubject, this.emailHTML )
    }, // end sendEmailMethodSMTP

我正在收集从 .vue 文件（this.emailFrom、this.emailTo、this.emailSubject、this.emailHTML）传递到 electron-proload 中的 doAThing 方法的信息中的变量信息。 js文件。

当按钮被按下时，信息被传递给预加载器，nodemailer被触发，邮件被发送。

我还没有编译我的 Quasar/Electron 应用程序以确保它可以在实时环境中运行，但是在开发模式下运行 quasar 效果很好。

【讨论】：