向客戶發送關於將數據保存到 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外地具有比相同值email和cc （或bcc ）字段用您自己的電子郵件。 然后，使用文檔的message字段指定其他電子郵件元素，如主題行和電子郵件正文（純文本或 HTML）。

---

請注意，這樣做會將所有這些額外信息（連同一些包含擴展執行狀態的字段）添加到 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:'youremail@mail.com',
   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: "myemail@myemail.com",
      from: "no-reply@myemail.com",
      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: "trippyadive.web.app@gmail.com",
    Password: "xxxxxxxxxx",
    To: "subhodiproy161101@gmail.com",
    From: "trippyadive.web.app@gmail.com",
    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");
  });
}