[javascript] JavaScript에서 이메일을 보내는 방법
내 웹 사이트에서 페이지를 새로 고치지 않고 전자 메일을 보낼 수 있기를 바랍니다. 그래서 자바 스크립트를 사용하고 싶습니다.
<form action="javascript:sendMail();" name="pmForm" id="pmForm" method="post">
Enter Friend's Email:
<input name="pmSubject" id="pmSubject" type="text" maxlength="64" style="width:98%;" />
<input name="pmSubmit" type="submit" value="Invite" />
다음은 함수를 호출하는 방법이지만 Javascript 함수에 무엇을 넣을 지 잘 모르겠습니다. 내가 한 연구에서 mailto 방법을 사용하는 예제를 찾았지만 실제로는 사이트에서 직접 보내지는 않습니다.
그래서 제 질문은 JavaScript 함수에 무엇을 넣어 웹 사이트에서 직접 이메일을 보낼 수 있는지 찾을 수 있습니다.
function sendMail() {
/* ...code here... */
}
답변
자바 스크립트로 직접 이메일을 보낼 수 없습니다.
그러나 사용자의 메일 클라이언트를 열 수 있습니다.
window.open('mailto:test@example.com');
대상과 신체를 미리 채우는 매개 변수도 있습니다.
window.open('mailto:test@example.com?subject=subject&body=body');
다른 해결책은 서버가 전자 메일을 보내도록 서버에 ajax 호출을 수행하는 것입니다. 다른 사람이 서버를 통해 이메일을 보내지 않도록주의하십시오.
답변
서버를 통한 간접-타사 API 호출-안전하고 권장
적절한 인증 및 권한 부여 후 서버가 타사 API를 호출 할 수 있습니다. API 키는 클라이언트에 노출되지 않습니다.
node.js – https: //www.npmjs.org/package/node-mandrill
var mandrill = require('node-mandrill')('<your API Key>');
function sendEmail ( _name, _email, _subject, _message) {
mandrill('/messages/send', {
message: {
to: [{email: _email , name: _name}],
from_email: 'noreply@yourdomain.com',
subject: _subject,
text: _message
}
}, function(error, response){
if (error) console.log( error );
else console.log(response);
});
}
// define your own email api which points to your server.
app.post( '/api/sendemail/', function(req, res){
var _name = req.body.name;
var _email = req.body.email;
var _subject = req.body.subject;
var _messsage = req.body.message;
//implement your spam protection or checks.
sendEmail ( _name, _email, _subject, _message );
});
그런 다음 클라이언트에서 $ .ajax를 사용하여 이메일 API를 호출하십시오.
클라이언트에서 직접-타사 API 호출-권장하지 않음
in short:
1. register for Mandrill to get an API key
2. load jQuery
3. use $.ajax to send an email
이렇게-
function sendMail() {
$.ajax({
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
'key': 'YOUR API KEY HERE',
'message': {
'from_email': 'YOUR@EMAIL.HERE',
'to': [
{
'email': 'RECIPIENT@EMAIL.HERE',
'name': 'RECIPIENT NAME (OPTIONAL)',
'type': 'to'
}
],
'autotext': 'true',
'subject': 'YOUR SUBJECT HERE!',
'html': 'YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!'
}
}
}).done(function(response) {
console.log(response); // if you're into that sorta thing
});
}
https://medium.com/design-startups/b53319616782
참고 : API 키는 누구나 볼 수 있으므로 악의적 인 사용자가 키를 사용하여 할당량을 차지할 수있는 전자 메일을 보낼 수 있습니다.
답변
원래 질문을 실제로 만족시키는 답변을 찾을 수 없습니다.
- Mandrill은 새로운 가격 정책으로 인해 바람직하지 않으며 자격 증명을 안전하게 유지하려면 백엔드 서비스가 필요했습니다.
- 전자 메일을 숨겨서 목록에 표시되지 않도록하는 것이 좋습니다 (mailto 솔루션은이 문제를 노출 시키므로 대부분의 사용자에게는 편리하지 않습니다).
- sendMail을 설정하기가 번거 롭거나 이메일을 보내려면 전혀 백엔드가 필요합니다.
이메일을 보내도록 표준 HTTP POST 요청을 할 수있는 간단한 무료 서비스를 만들었습니다. PostMail 이라고 합니다 , 당신은 단순히 자바 스크립트 또는 jQuery를 사용하여 양식을 게시 할 수 있습니다. 가입하면 웹 사이트에 복사하여 붙여 넣을 수있는 코드가 제공됩니다. 여기 몇 가지 예가 있어요.
자바 스크립트 :
<form id="javascript_form">
<input type="text" name="subject" placeholder="Subject" />
<textarea name="text" placeholder="Message"></textarea>
<input type="submit" id="js_send" value="Send" />
</form>
<script>
//update this with your js_form selector
var form_id_js = "javascript_form";
var data_js = {
"access_token": "{your access token}" // sent after you sign up
};
function js_onSuccess() {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0";
}
function js_onError(error) {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1";
}
var sendButton = document.getElementById("js_send");
function js_send() {
sendButton.value='Sending…';
sendButton.disabled=true;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
js_onSuccess();
} else
if(request.readyState == 4) {
js_onError(request.response);
}
};
var subject = document.querySelector("#" + form_id_js + " [name='subject']").value;
var message = document.querySelector("#" + form_id_js + " [name='text']").value;
data_js['subject'] = subject;
data_js['text'] = message;
var params = toParams(data_js);
request.open("POST", "https://postmail.invotes.com/send", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(params);
return false;
}
sendButton.onclick = js_send;
function toParams(data_js) {
var form_data = [];
for ( var key in data_js ) {
form_data.push(encodeURIComponent(key) + "=" + encodeURIComponent(data_js[key]));
}
return form_data.join("&");
}
var js_form = document.getElementById(form_id_js);
js_form.addEventListener("submit", function (e) {
e.preventDefault();
});
</script>
jQuery :
<form id="jquery_form">
<input type="text" name="subject" placeholder="Subject" />
<textarea name="text" placeholder="Message" ></textarea>
<input type="submit" name="send" value="Send" />
</form>
<script>
//update this with your $form selector
var form_id = "jquery_form";
var data = {
"access_token": "{your access token}" // sent after you sign up
};
function onSuccess() {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0";
}
function onError(error) {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1";
}
var sendButton = $("#" + form_id + " [name='send']");
function send() {
sendButton.val('Sending…');
sendButton.prop('disabled',true);
var subject = $("#" + form_id + " [name='subject']").val();
var message = $("#" + form_id + " [name='text']").val();
data['subject'] = subject;
data['text'] = message;
$.post('https://postmail.invotes.com/send',
data,
onSuccess
).fail(onError);
return false;
}
sendButton.on('click', send);
var $form = $("#" + form_id);
$form.submit(function( event ) {
event.preventDefault();
});
</script>
다시 한 번 공개하면 적절한 답변을 찾을 수 없기 때문에이 서비스를 만들었습니다.
답변
이 게시물에서 JavaScript 함수에 넣을 내용을 찾을 수 있습니다.
function getAjax() {
try {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
return new ActiveXObject('Msxml2.XMLHTTP');
} catch (try_again) {
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
} catch (fail) {
return null;
}
}
function sendMail(to, subject) {
var rq = getAjax();
if (rq) {
// Success; attempt to use an Ajax request to a PHP script to send the e-mail
try {
rq.open('GET', 'sendmail.php?to=' + encodeURIComponent(to) + '&subject=' + encodeURIComponent(subject) + '&d=' + new Date().getTime().toString(), true);
rq.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 400) {
// The request failed; fall back to e-mail client
window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
}
}
};
rq.send(null);
} catch (fail) {
// Failed to open the request; fall back to e-mail client
window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
}
} else {
// Failed to create the request; fall back to e-mail client
window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
}
}
전자 메일을 보낼 PHP (또는 다른 언어) 스크립트를 제공하십시오.
답변
나는 당신에게 뉴스를 나누고 있습니다. JavaScript 자체가 포함 된 이메일을 보낼 수 없습니다.
OP의 질문의 맥락에서 볼 때 위의 답변은 @KennyEvitt가 지적한대로 더 이상 사실이 아닙니다. SMTP 클라이언트로 JavaScript를 사용할 수있는 것 같습니다 .
그러나 , 그것이 안전하고 브라우저 간 호환성이 있는지 알아보기 위해 더 깊이 파고 들지 않았습니다. 그래서 나는 당신이 그것을 사용하도록 격려하거나 낙담 할 수 없습니다. 자신의 책임하에 사용하십시오.
답변
나는이 질문에 대한 답변을 작성하기에는 너무 늦었다는 것을 알고 있지만 그럼에도 불구하고 이것이 자바 스크립트를 통해 전자 메일을 보내려는 사람에게 사용될 것이라고 생각합니다.
내가 제안하는 첫 번째 방법은 콜백을 사용하여 서버에서 수행하는 것입니다. 실제로 자바 스크립트 folowing을 사용하여 처리하려면 내가 권장하는 것입니다.
내가 찾은 가장 쉬운 방법은 smtpJs를 사용하는 것입니다. 이메일을 보내는 데 사용할 수있는 무료 라이브러리입니다.
1. 아래와 같은 스크립트를 포함하십시오
<script src="https://smtpjs.com/v3/smtp.js"></script>
2. 당신은 이와 같은 이메일을 보낼 수 있습니다
Email.send({
Host : "smtp.yourisp.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)
);
클라이언트 측에 비밀번호를 표시하므로 권장하지 않습니다. 따라서 SMTP 신임 정보를 암호화하고 단일 도메인에 잠그고 신임 정보 대신 보안 토큰을 전달하는 다음을 수행 할 수 있습니다.
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)
);
마지막으로 SMTP 서버가없는 경우 다음과 같은 smtp 릴레이 서비스를 사용합니다 Elastic Email
또한 필요한 SmtpJS.com 웹 사이트 의 링크를 통해 필요한 모든 예제와 보안 토큰을 만들 수있는 장소를 찾을 수 있습니다.
누군가 가이 세부 정보를 유용하게 사용하기를 바랍니다. 행복한 코딩.
답변
수평선에 새로운 해결책이있는 것 같습니다. 이름은 EmailJS 입니다. 그들은 서버 코드가 필요 없다고 주장합니다. 초대를 요청할 수 있습니다.
2016 년 8 월 업데이트 : EmailJS가 이미 사용중인 것 같습니다. 한 달에 최대 200 개의 이메일을 무료로 보낼 수 있으며 더 많은 양의 구독을 제공합니다.