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

Question

我正在尝试制作一个用于在线预订的网站。该网站已托管在 firebase 中，我正在使用 firestore 收集预订详细信息。我正在使用下面给出的代码来收集 firestore 中的详细信息。

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');

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

//show alert

}

// function to get form values

 function getInputVal(id) {

return document.getElementById(id).value;

 }

//save messages

function 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 collectionvar 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 batchbatch.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 submitdocument.getElementById("bookingForm").addEventListener("submit", submitForm);function submitForm(e) {&nbsp; e.preventDefault();&nbsp; //get values&nbsp; var email = getInputVal("email");&nbsp; var packageFields = getInputVal("packageFields");&nbsp; var name = getInputVal("name");&nbsp; var phone = getInputVal("phone");&nbsp; var date = getInputVal("date");&nbsp; var [persons] = getInputVal("persons");&nbsp; saveMessage(email, packageFields, name, phone, date, persons);&nbsp; sendEmail(packageFields, name, date, persons);&nbsp; //show alert}// function to get form valuesfunction getInputVal(id) {&nbsp; return document.getElementById(id).value;}//save messagesfunction saveMessage(email, packageFields, name, phone, date, persons) {&nbsp; messagesRef&nbsp; &nbsp; .add({&nbsp; &nbsp; &nbsp; email: email,&nbsp; &nbsp; &nbsp; packageFields: packageFields,&nbsp; &nbsp; &nbsp; name: name,&nbsp; &nbsp; &nbsp; phone: phone,&nbsp; &nbsp; &nbsp; date: date,&nbsp; &nbsp; &nbsp; persons: persons,&nbsp; &nbsp; })&nbsp; &nbsp; .then(function (docRef) {&nbsp; &nbsp; &nbsp; console.log("Document written with ID: ", docRef.id);&nbsp; &nbsp; &nbsp; console.log(email);&nbsp; &nbsp; })&nbsp; &nbsp; .catch(function (error) {&nbsp; &nbsp; &nbsp; console.error("Error adding document: ", error);&nbsp; &nbsp; });}function sendEmail(packageFields, name, date, persons) {&nbsp; Email.send({&nbsp; &nbsp; Host: "smtp.gmail.com",&nbsp; &nbsp; Username: "[e-mail]",&nbsp; &nbsp; Password: "xxxxxxxxxx",&nbsp; &nbsp; To: "[e-mail]",&nbsp; &nbsp; From: "[e-mail]",&nbsp; &nbsp; Subject: "Sending Email using javascript",&nbsp; &nbsp; 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`,&nbsp; }).then(function (message) {&nbsp; &nbsp; alert("mail sent successfully");&nbsp; });}