我目前正在为一个朋友开发一个网站，他有一个代客服务公司。我正在为他创建一个网站，这样人们就可以上网并要求在他们的位置举办私人活动，例如家庭聚会或聚会。
请求部分都完成了，但现在他问我是否有可能让网站每次有新的请求时都给他发一封电子邮件，而不是去网站登录，然后从那里继续。
我已经知道你可以使用sendgrid发送电子邮件。我使用firebase/firestore为我的项目。我已经安装了@sendgrid/mail，并创建了一个JS文件，看看电子邮件服务是否工作。
我创建只是为了看看我是否可以发送电子邮件。如果我用node和n终端运行它的代码，它工作得很好
然后我继续将代码添加到客户端的JS文件中。我做了一些研究，看到我不能在客户端使用require，看到如果我安装require.js，它将允许我这样做。
然后我安装了requires，并将相同的代码添加到包含客户端html的新JS文件中。
我一开始就得到了这个错误
"模块名"@sendgrid/mail"尚未加载上下文:_。使用要求([])">
然后我读到错误，并试图添加"[]"． 这把我带到了我现在卡住的地方，这显示了所有带有"[]";添加到这里。现在得到一个新的错误，是这样的这是我现在得到的错误
这是我的JS文件，它是在客户端与sendgrid/mail。
const sgMail = require(['@sendgrid/mail']);
const API_KEY = '';
sgMail.setApiKey(API_KEY);
(function(){
//configuration file for firebase. The way we acess the app location in the database
var firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
//firebase initialiaztion. The way we initialize
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
const email = document.getElementById('emailTxt');
const firstName = document.getElementById('firstNameTxt');
const lastName = document.getElementById('lastNameTxt');
const firstPhone = document.getElementById('numberTxtArea');
const secondPhone = document.getElementById('numberTxtMiddle');
const thirdPhone = document.getElementById('numberTxtEnd');
const location = document.getElementById('locationTxt');
const numberOfCars = document.getElementById('carCount');
const numberOfPeople = document.getElementById('peopleCount');
const startTime = document.getElementById('starTime');
const endTime = document.getElementById('endTime');
const parking = document.getElementById('availability');
const details = document.getElementById('details');
const submitQuoteBtn = document.getElementById('requestQuoteBtn');
const succesfullySubmited = document.getElementById('requestConfirm');
submitQuoteBtn.addEventListener('click', e=>{
const emailValue = email.value;
const firstNameValue = firstName.value;
const lastNameValue = lastName.value;
const firstPhoneValue = firstPhone.value;
const secondPhoneValue = secondPhone.value;
const thirdPhoneValue = thirdPhone.value;
const phoneNumber = firstPhoneValue + "-" + secondPhoneValue + "-" + thirdPhoneValue;
const locationValue = location.value;
const numberOfCarsValue = numberOfCars.value;
const numberOfPeopleValue = numberOfPeople.value;
const startTimeValue = startTime.value;
const endTimeValue = endTime.value;
const parkingValue = parking.value;
const detailsValue = details.value;
var datePlaced = new Date();
var dd = datePlaced.getDate();
var mm = datePlaced.getMonth() +1;
var yyyy = datePlaced.getFullYear();
var fullDate = (mm + "-" + dd + "-" + yyyy);
const message = {
to: '',
from: '',
subject: 'New Private EVENT',
text: "hi",
html: "hello",
};
sgMail.send(message)
.then((response) => console.log('Email sent'))
.catch((error) => console.log(error.message));
db.collection("Manager").doc("Quote").collection("Quotes").doc((firstNameValue + " " +
lastNameValue)).set({
email: emailValue,
firstName: firstNameValue,
lastName: lastNameValue,
phone: phoneNumber,
location: locationValue,
numberOfCars: numberOfCarsValue,
numberOfPeople: numberOfPeopleValue,
startTime: startTimeValue,
endTime: endTimeValue,
parking: parkingValue,
details: detailsValue,
date: fullDate,
}).then(() =>{
console.log("i am here 6");
console.log("document written successfully");
succesfullySubmited.style = "visible";
}).catch((error) => {
console.log(error);
})
});
})()
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" href="RCMA.css" >
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Providing proffesional valet services around the Cleveland
Area. Restaurants, Private events, and more">
<title></title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script>
<script src="scripts/require.js"></script>
<div class= "banner">
<div class="navbar">
<img src="pictures/rcmalogo.jpeg" class= "logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="Quote.html">Get a Quote</a></li>
<li><a href="AboutUs.html">About Us</a></li>
<li><a href="SignIn.html">Sign In</a></li>
</ul>
</div>
<div class="inputBoxes">
<input type="email" id="emailTxt" class="emailTxt" placeholder="Email..." /> <br>
<input type="textfield" id="firstNameTxt" class="firstNameTxt" placeholder="First Name..." />
<input type="textfield" id="lastNameTxt" class="lastNameTxt" placeholder="Last Name..." /><br>
<input type="textfield" id="numberTxtArea" class="numberTxtArea" placeholder="###" />
<input type="textfield" id="numberTxtMiddle" class="numberTxtMiddle" placeholder="###" />
<input type="textfield" id="numberTxtEnd" class="numberTxtEnd" placeholder="####" /> <br>
<input type="textfield" id="locationTxt" class="locationTxt" placeholder="Location..." /><br>
<input type="textfield" id="carCount" class="carCount" placeholder="Estimated # of Cars..." /><br>
<input type="textfield" id="peopleCount" class="peopleCount" placeholder="Estimated # of People..." /><br>
<input type="textfield" id="starTime" class="starTime" placeholder="Event Start time..." />
<input type="textfield" id="endTime" class="endTime" placeholder="Event End Time..."/><br>
<input type="textfield" id="availability" class="availability" placeholder="Parking Availability..."/> <br>
<input type="textfield" id="details" class="details" placeholder="Details / Questions..."/><br> <br> <br>
<button id="requestQuoteBtn"> Request Quote</button>
<h1 id="requestConfirm" style="display: none;" >Submited Succesfully! </h1>
</div>
</div>
</body>
<script type="module" src="scripts/quote.js"></script>
</html>
您需要从您控制的后端执行此操作，无论是Node.js服务器，还是更简单的云函数。你需要为Node.js使用Sendgrid APi。
同样，你不应该在你的前端代码中共享你的Sendgrid API密钥，因为别人可以很容易地读取源代码。
那么，发送电子邮件的一个简单的云函数是这样的:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(functions.config().sendgrid.apikey);
// See the doc for the config: https://firebase.google.com/docs/functions/config-env
// The API key is securely stored as a Cloud Function configuration item
exports.createUser = functions.firestore
.document('requests/{requestId}')
.onCreate((snap, context) => {
const newValue = snap.data();
// access a particular field as you would any JS property
const requestName = newValue.name;
const msg = {
to: 'recipient@whatevermail.com',
from: '....', // Change to your verified sender
subject: '',
html: 'Here is the name: ' + requestName // Adapt that with HTML code
}
return sgMail.send(msg)
.catch(error => {
console.log(JSON.stringify(error));
return null;
})
});
每创建一个新的请求文档，都会发送一封电子邮件。
另一种可能是使用"触发电子邮件";重火力点扩展。你可以在"Firebase Tips"中找到。Tricks"这篇文章解释了如何使用Sendgrid配置扩展。