In previous section, I introduced how to send email over SSL connection. In this section, I will introduce how to use your Gmail account to send email in JavaScript.
Sections:
Gmail SMTP server address is smtp.gmail.com
. It requires implicit SSL or explicit
SSL (TLS) connection, and you should use your Gmail email address as the user name
for ESMTP authentication.
Server | Port | SSL/TLS |
smtp.gmail.com | 25, 587 | TLS |
smtp.gmail.com | 465 | SSL |
To help keep your account secure, starting May 30, 2022, Google will no longer support the use of third-party apps or devices which ask you to sign in to your Google Account using only your username and password.
Therefore, you should sign in using App Passwords.
An App Password
is a 16-digit passcode that gives a less secure app or device permission
to access your Google Account. App Passwords
can only be used with accounts that have 2-Step Verification turned on.
You need to use App Password
instead of the user password for user authentication.
Another solution is Gmail OAUH, please see Gmail SMTP OAUTH section.
Last update: Google has disabled App password, you have to switch to Gmail SMTP OAUTH. If you don’t want to change your code, you can have a try with EA Oauth Service.
Note
Remarks: All of samples in this section are based on first section: Send email in A simple JavaScript HTML5 Windows Store App project. To compile and run the following example codes successfully, please click here to learn how to create the test project and add reference of EASendMail to your project.
The following example codes demonstrate how to use EASendMail SMTP component to send email using Gmail account.
Note
To get the full sample projects, please refer to Samples section.
(function () {
"use strict";
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var ui = WinJS.UI;
var htmlinited = false;
var editor;
var asynCancel = null;
var m_atts = new Array();
ui.Pages.define("/default.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
init_gui();
},
unload: function () {
}
});
function init_gui() {
// add OnClick event handler
var btn = document.getElementById("btnSend");
btn.addEventListener("click", send_email, false);
}
function send_email() {
var result = "";
var oMail = new EASendMail.SmtpMail("TryIt");
// Set Gmail sender email address, please change it to yours
oMail.from = new EASendMail.MailAddress("gmailid@gmail.com");
// Add recipient email address, please change it to yours
oMail.to.add(new EASendMail.MailAddress("support@emailarchitect.net"));
// Set email subject
oMail.subject = "test email from JavaScript HTML5 project";
// Set email body
oMail.textBody = "this is a test email sent from Windows Store App using Gmail.";
// Gmail SMTP server address
var oServer = new EASendMail.SmtpServer("smtp.gmail.com");
// User and password for Gmail authentication
oServer.user = "gmailid@gmail.com";
// Create app password in Google account
// https://support.google.com/accounts/answer/185833?hl=en
oServer.password = "your app password";
// Enable SS connection on 465 port
oServer.port = 465;
oServer.connectType = EASendMail.SmtpConnectType.connectSSLAuto;
var oSmtp = new EASendMail.SmtpClient();
var btn = document.getElementById("btnSend");
btn.disabled = true;
oSmtp.sendMailAsync(oServer, oMail).then(function (e) {
result = "Email was sent successfully!";
// Display Result by Diaglog box
(new Windows.UI.Popups.MessageDialog(result, "Success")).showAsync();
btn.disabled = false;
},
function (e) {
// because javascript exception only gives the stack trace messages, but it is not
// real description of exception, so we give a property lastErrorMessage for javascript.
if (oSmtp.lastErrorMessage != "") {
result = oSmtp.lastErrorMessage;
}
else {
result = e.message;
}
oSmtp.close();
// Display Result by Diaglog box
(new Windows.UI.Popups.MessageDialog(result, "Error Information")).showAsync();
btn.disabled = false;
});
}
})();
The following example codes demonstrate how to use EASendMail SMTP component to send email using Gmail account.
Note
To get the full sample projects, please refer to Samples section.
(function () {
"use strict";
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var ui = WinJS.UI;
var htmlinited = false;
var editor;
var asynCancel = null;
var m_atts = new Array();
ui.Pages.define("/default.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
init_gui();
},
unload: function () {
}
});
function init_gui() {
// add OnClick event handler
var btn = document.getElementById("btnSend");
btn.addEventListener("click", send_email, false);
}
function send_email() {
var result = "";
var oMail = new EASendMail.SmtpMail("TryIt");
// Set Gmail sender email address, please change it to yours
oMail.from = new EASendMail.MailAddress("gmailid@gmail.com");
// Add recipient email address, please change it to yours
oMail.to.add(new EASendMail.MailAddress("support@emailarchitect.net"));
// Set email subject
oMail.subject = "test email from JavaScript HTML5 project";
// Set email body
oMail.textBody = "this is a test email sent from Windows Store App using Gmail.";
// Gmail SMTP server address
var oServer = new EASendMail.SmtpServer("smtp.gmail.com");
// User and password for Gmail authentication
oServer.user = "gmailid@gmail.com";
// Create app password in Google account
// https://support.google.com/accounts/answer/185833?hl=en
oServer.password = "your app password";
// Enable TLS connection on 587 port
oServer.port = 587;
oServer.connectType = EASendMail.SmtpConnectType.connectSSLAuto;
var oSmtp = new EASendMail.SmtpClient();
var btn = document.getElementById("btnSend");
btn.disabled = true;
oSmtp.sendMailAsync(oServer, oMail).then(function (e) {
result = "Email was sent successfully!";
// Display Result by Diaglog box
(new Windows.UI.Popups.MessageDialog(result, "Success")).showAsync();
btn.disabled = false;
},
function (e) {
// because javascript exception only gives the stack trace messages, but it is not
// real description of exception, so we give a property lastErrorMessage for javascript.
if (oSmtp.lastErrorMessage != "") {
result = oSmtp.lastErrorMessage;
}
else {
result = e.message;
}
oSmtp.close();
// Display Result by Diaglog box
(new Windows.UI.Popups.MessageDialog(result, "Error Information")).showAsync();
btn.disabled = false;
});
}
})();
The Gmail IMAP and SMTP servers have been extended to support authorization via the industry-standard OAuth 2.0 protocol. Using OAUTH protocol, user can do authentication by Gmail Web OAuth instead of inputting user and password directly in application. This way is more secure, but a little bit complex.
Next Section
At next section I will introduce how to send email with Yahoo account.
Appendix
Comments
If you have any comments or questions about above example codes, please click here to add your comments.