向客户端发送确认电子邮件以将数据保存到 firestore

Question

我正在尝试制作一个用于在线预订的网站。该网站已托管在 firebase 中，我正在使用 firestore 收集预订详细信息。我正在使用下面给出的代码来收集 firestore 中的详细信息。var firestore =  firebase.firestore();var messagesRef = firestore.collection("BookingData");//listen for submitdocument.getElementById('bookingForm').addEventListener('submit',submitForm);function submitForm(e){ e.preventDefault(); //get valuesvar email = getInputVal('email');var packageFields = getInputVal('packageFields');var name = getInputVal('name');var phone = getInputVal('phone');var date = getInputVal('date');saveMessage(email, packageFields, name, phone, date);//show alert}// function to get form values function getInputVal(id) {return document.getElementById(id).value; }//save messagesfunction saveMessage(email, packageFields, name, phone, date) {  messagesRef.add({   email:email,   packageFields:packageFields,   name:name,   phone:phone,   date:date   }).then(function(docRef) {console.log("Document written with ID: ", docRef.id);}) .catch(function(error) {  console.error("Error adding document: ", error);});}现在的问题是，我想使用 JS 和 SMTP 向我的客户发送电子邮件，并在有预订时通过我的个人电子邮件 id 收到一封电子邮件 [即数据保存在 firestore 中（用 id 编写的文档）]。电子邮件将自动发送到提供的电子邮件 ID。我该怎么办呢。提前感谢您的任何帮助。

Answer 1

可能的解决方案之一是使用专用于电子邮件发送的Firebase扩展。

由于您希望在集合中创建新文档时发送电子邮件BookingData，因此配置它将是小菜一碟。

只需按照配置说明进行操作，并在“电子邮件文档集合”字段中输入“BookingData”（“电子邮件文档集合”是“包含用于构建和发送电子邮件的文档的集合的路径”）

然后，如此处文档中所述，在 BookingData 集合中创建的文档中，包含一个与 和, （或） 字段to具有相同值的字段以及您自己的电子邮件。然后，使用文档的字段指定其他电子邮件元素，例如主题行和电子邮件正文（纯文本或 HTML）。emailccbccmessage

---

请注意，这样做会将所有这些额外信息（以及一些包含扩展执行状态的字段）添加到 BookingData 文档中。如果您希望避免将这些额外信息添加到此文档中，只需使用另一个专用集合来触发（和配置）电子邮件。

要通过这个特定的专用集合生成并发送电子邮件，您可以使用批量写入，如下所示：

var messagesRef = firestore.collection("BookingData");

var emailsRef = firestore.collection("emails");  // Additional collection

var batch = firestore.batch();

batch.set(messagesRef, 

 {

   email:email,

   packageFields:packageFields,

   name:name,

   phone:phone,

   date:date

   }

);

batch.set(emailsRef, 

 {

   to:email,

   bcc:'[e-mail]',

   message: {

    subject: 'New order',

    html: 'This is an <code>HTML</code> email body.',

   }

  }

);

// Commit the batch

batch.commit().then(function () {

    // ...

});

不要忘记：

• 通过安全规则拒绝对集合的读写访问权限emails。

• 配置扩展时，在“电子邮件文档集合”字段中输入“电子邮件”。

请注意，要安装和使用 Firebase 扩展，您的项目必须位于 Blaze 计划中。

Answer 2

我可能会使用提供 HTTP API 进行邮件发送的服务。

SendGrid 是一个很好的选择，这里有一个简单的例子（src）：

const functions = require("firebase-functions");

const sgMail = require("@sendgrid/mail");

const cors = require("cors")({

  origin: true

});

exports.emailMessage = functions.https.onRequest((req, res) => {

  const { name, email, phone, message } = req.body;

  return cors(req, res, () => {

    var text = `<div>

      <h4>Information</h4>

      <ul>

        <li>

          Name - ${name || ""}

        </li>

        <li>

          Email - ${email || ""}

        </li>

        <li>

          Phone - ${phone || ""}

        </li>

      </ul>

      <h4>Message</h4>

      <p>${message || ""}</p>

    </div>`;

    const msg = {

      to: "[e-mail]",

      from: "[e-mail]",

      subject: `${name} sent you a new message`,

      text: text,

      html: text

    };

    sgMail.setApiKey(

      "SENDGRID API KEY"

    );

    sgMail.send(msg);

    res.status(200).send("success");

  }).catch(() => {

    res.status(500).send("error");

  });

});

Answer 3

这可以使用 smtp.js 使用下面给出的代码来完成

var firestore = firebase.firestore();

var messagesRef = firestore.collection("bookingData");

//listen for submit

document.getElementById("bookingForm").addEventListener("submit", submitForm);

function submitForm(e) {

  e.preventDefault();

  //get values

  var email = getInputVal("email");

  var packageFields = getInputVal("packageFields");

  var name = getInputVal("name");

  var phone = getInputVal("phone");

  var date = getInputVal("date");

  var [persons] = getInputVal("persons");

  saveMessage(email, packageFields, name, phone, date, persons);

  sendEmail(packageFields, name, date, persons);

  //show alert

}

// function to get form values

function getInputVal(id) {

  return document.getElementById(id).value;

}

//save messages

function saveMessage(email, packageFields, name, phone, date, persons) {

  messagesRef

    .add({

      email: email,

      packageFields: packageFields,

      name: name,

      phone: phone,

      date: date,

      persons: persons,

    })

    .then(function (docRef) {

      console.log("Document written with ID: ", docRef.id);

      console.log(email);

    })

    .catch(function (error) {

      console.error("Error adding document: ", error);

    });

}

function sendEmail(packageFields, name, date, persons) {

  Email.send({

    Host: "smtp.gmail.com",

    Username: "[e-mail]",

    Password: "xxxxxxxxxx",

    To: "[e-mail]",

    From: "[e-mail]",

    Subject: "Sending Email using javascript",

    Body: `Your package of ${packageFields} for ${name} with total ${persons} persons (incl. ${name}) dated ${date} has been provisonalised. Your seat will be confirmed once you complete the payment of the Security Deposit`,

  }).then(function (message) {

    alert("mail sent successfully");

  });

}