JavaScript-E-Mails senden
- E-Mails mit JavaScript senden
- Richten Sie Serveranmeldeinformationen für JavaScript-Code ein
- Abschluss
Die Standardmethode zum Senden von E-Mails mithilfe einer Webanwendung erfordert, dass die serverseitige Konfiguration einer bestimmten Webanwendung so eingerichtet ist, dass E-Mails an den SMTP-Server gesendet werden. SMTP, auch bekannt als Simple Mail Transfer Protocol, kann verwendet werden, um E-Mails von der Client-Seite des Internetbrowsers zu übertragen, eine Anforderung zum Senden einer E-Mail an die Serverseite zu senden, und das Backend erstellt eine E-Mail und sendet sie dann an den SMTP-Server.
Es gibt einen Ansatz zum Senden von E-Mails von der Clientseite ohne die Hilfe der Serverseite mit JavaScript.
E-Mails mit JavaScript senden
Es ist eine allgemeine Tatsache, dass nur die Verwendung von JavaScript-Code aufgrund der geringeren Unterstützung für Server-Sockets keine direkten E-Mails senden kann. Aber für den Prozess des E-Mail-Versands über den Browser können wir SMTPJS verwenden; eine kostenlose Bibliothek eines Drittanbieters, die in JavaScript angeboten wird.
Diese Bibliothek bietet die Methode Email.send(), um eine E-Mail aus JavaScript heraus zu versenden. Normalerweise senden Kontaktforen E-Mails über den Browser.
Als Beispiel können wir ein Kontaktformular mit dem folgenden HTML- und CSS-Code erstellen. Danach können wir JavaScript-Code hinzufügen, um E-Mails zu senden.
Codebeispiel:
<!DOCTYPE html>
<html>
<header>
<meta charset="UTF-8">
<meta name="viewport" content="width=divce-width, initial-scale=1">
</header>
<body>
<style>
form{
display: flex;
flex-direction: column;
width: 50%;
margin: auto;
}
#Name,#email,#message,#btn{
padding: 20px;
margin-bottom: 20px;
border: none;
outline: none;
background-color: #ddd;
}
#btn{
width: 25%;
}
h1{
text-align: center;
}
</style>
<h1>Contact Us</h1>
<form method="post">
<input type="text" id="Name" placeholder="Your Name"><br>
<input type="email" id="email" placeholder="Your email"><br>
<input type="text" id="message" placeholder="Your Message"><br>
<input type="button" value="Send Email"
onclick="sendEmail()" />
</form>
</body>
</html>
Wir können ein Formular erstellen, um mit dem obigen Code zu helfen. Als nächstes sollten wir den folgenden JavaScript-Code in unsere HTML-Datei aufnehmen.
<script src="https://smtpjs.com/v3/smtp.js"></script>
Unter Einbeziehung des obigen Codes haben wir unserem Code gerade SMTPJS-Bibliotheken hinzugefügt, die auf smtpJS.com verfügbar sind. Für das weitere Versenden von E-Mails über den Browser muss dessen Server eingerichtet und ausgeführt werden.
Im nächsten Schritt sollten wir einen SMTP-Server erstellen, um die E-Mails an den Empfänger zu senden. Wir können einen SMTP-Server mit Elastic Email erstellen, das einen kostenlosen Serverdienst bietet.
smtpJS.com leitet zur Elastic Email-Webanwendung weiter. Wir können ein Konto und einen SMTP-Server erstellen, indem wir Details unter SMTP-Anmeldeinformationen erstellen einrichten.
Nach dem Erstellen der Anmeldeinformationen wird ein Popup-Fenster mit den Anmeldeinformationen des neuen Servers angezeigt. Es ist besser, das Passwort zu kopieren und für eine spätere Verwendung zu speichern.
Richten Sie Serveranmeldeinformationen für JavaScript-Code ein
Nachdem Sie den Server erstellt haben, gehen Sie zurück zu smtpJS.com. Es ist über die Funktion Email.send() wie folgt verfügbar.
Email
.send({
Host: 'smtp.elasticemail.com',
Username: 'username',
Password: 'password',
To: 'them@website.com',
From: 'you@isp.com',
Subject: 'This is the subject',
Body: 'And this is the body'
})
.then(message => alert(message));
Dieses Codestück sollte unseren HTML-Code enthalten, der relevante Details ersetzt. Der Benutzername ist eine von uns erstellte E-Mail-Adresse, ein Elastic Email-Konto und ein Passwort.
Das An ist die E-Mail-Adresse des Empfängers und das Von sollte die E-Mail-Adresse des Absenders ersetzen. Außerdem sollte der Senden-Button die JavaScript-Funktion wie folgt auslösen.
<button type="button" value="send email" onclick="sendEmail()">Send</button>
Wir können den vollständigen Code im folgenden Code erstellen, einschließlich der Methode Email.send().
Dieser Code funktioniert erst, wenn er Anmeldeinformationen enthält, die von Elastic Email beim Erstellen eines SMTP-Servers angegeben wurden. Fügen Sie einen Benutzernamen und ein Passwort hinzu, um den Code auszuführen.
<!DOCTYPE html>
<html>
<head>
<title>Send Mail</title>
<script src=
"https://smtpjs.com/v3/smtp.js">
</script>
<script type="text/javascript">
function sendEmail() {
Email.send({
Host: "smtp.elasticemail.com",
Username: "sender@email_address.com",
Password: "Enter your password",
To: 'receiver@email_address.com',
From: "sender@email_address.com",
Subject: "Sending Email using javascript",
Body: "",
})
.then(function (message) {
alert("mail sent successfully")
});
}
</script>
</head>
<body>
<style>
form{
display: flex;
flex-direction: column;
width: 50%;
margin: auto;
}
#Name,#email,#message,#btn{
padding: 20px;
margin-bottom: 20px;
border: none;
outline: none;
background-color: #ddd;
}
#btn{
width: 25%;
}
h1{
text-align: center;
}
</style>
<h1>Contact Us</h1>
<form method="post">
<input type="text" id="Name" placeholder="Your Name"><br>
<input type="email" id="email" placeholder="Your email"><br>
<input type="text" id="message" placeholder="Your Message"><br>
<input type="button" value="Send Email"
onclick="sendEmail()" />
</form>
</body>
</html>
Wir können An mit einer Reihe von E-Mail-Adressen setzen, wenn wir mehrere Empfänger haben, um E-Mails zu empfangen.
Ausgang:
Wichtig ist, dass wir unsere SMTP-Anmeldeinformationen verschlüsseln können, um sichtbare Benutzernamen und Kennwörter vom clientseitigen Server zu verhindern. smtpJS.com bietet eine Funktion namens Encrypt your SMTP Credentials an.
Mit dieser Funktion können wir unsere Serveranmeldeinformationen verschlüsseln und die erforderlichen Felder ausfüllen. Anschließend können wir den folgenden JS-Code in den HTML-Code einfügen, um Anmeldeinformationen zu konfigurieren.
Email
.send({
SecureToken: 'C973D7AD-F097-4B95-91F4-40ABC5567812',
To: 'them@website.com',
From: 'you@isp.com',
Subject: 'This is the subject',
Body: 'And this is the body'
})
.then(message => alert(message));
Wir können anstelle des sicheren Tokens unseres HTML-Codes ein für unsere Anmeldeinformationen erstelltes Token hinzufügen. Wir können es in unseren Code aufnehmen, um unsere Anmeldeinformationen zu verschlüsseln.
Mit dieser Methode können wir E-Mails mit JavaScript versenden.
Abschluss
Das Versenden von E-Mails vom Frontend der Websites ist sehr nützlich, um benutzerinteraktive Webanwendungen zu erstellen. JavaScript bietet eine Methode, mit der wir E-Mails von der Frontend-Hilfe mit SMTPJs-Bibliotheken senden können.
Wir können E-Mails versenden, ohne die Seite zu aktualisieren und auch ohne serverseitige Codierung.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.