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 호출-권장하지 않음

JavaScript 만 사용하여 이메일 보내기

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 개의 이메일을 무료로 보낼 수 있으며 더 많은 양의 구독을 제공합니다.

window.open ( 'mailto : test@example.com'); 위와 같이 "test@example.com"이메일 주소가 스팸봇에 의해 수집되지 않도록 숨길 수는 없습니다. 나는이 문제에 끊임없이 부딪쳤다.

var recipient="test";
var at = String.fromCharCode(64);
var dotcom="example.com";
var mail="mailto:";
window.open(mail+recipient+at+dotcom);

Javascript는 클라이언트 측이므로 Javascript로 이메일을 보낼 수 없습니다. 브라우저는 아마도 인식 만하고 mailto:기본 메일 클라이언트를 시작합니다.

당신의에서 sendMail()기능, 당신은 서버 측에서이를 구현할 수 백엔드에 아약스 호출을 추가.

JavaScript는 웹 브라우저에서 이메일을 보낼 수 없습니다. 그러나 이미 구현하려는 솔루션에서 물러 나면 원래 요구 사항을 충족시키는 작업을 수행 할 수 있습니다.

페이지를 새로 고치지 않고 이메일을 보내십시오

JavaScript를 사용하여 이메일에 필요한 값을 구성한 다음 실제로 이메일을 보내는 서버 자원에 AJAX 요청을 작성할 수 있습니다. (어떤 서버 측 언어 / 기술을 사용하고 있는지 잘 모르므로 해당 부분이 귀하에게 달려 있습니다.)

AJAX에 익숙하지 않은 경우 빠른 Google 검색을 통해 많은 정보를 얻을 수 있습니다. 일반적으로 jQuery의 $ .ajax () 함수를 사용하여 빠르게 시작하고 실행할 수 있습니다. 요청시 호출 할 수있는 페이지가 서버에 있어야합니다.

SMPT 클라이언트를 구현하는 것이 '답변'인 것 같습니다. email.js 참조SMTP 클라이언트가있는 JavaScript 라이브러리에 를 .

SMTP 클라이언트 용 GitHub 리포지토리 는 다음과 같습니다 . repo의 README를 기반으로 클라이언트 브라우저에 따라 다양한 심 또는 폴리 필이 필요할 수 있지만 전반적으로 합리적으로 쉽게 설명 할 수없는 방식으로 보이지는 않습니다. 긴 대답입니다.

조합 서비스가 있습니다. mandrill과 같은 위에 나열된 솔루션을 서비스 EmailJS와 결합하여 시스템을보다 안전하게 만들 수 있습니다. 그들은 아직 서비스를 시작하지 않았습니다.

JavaScript에서 이메일을 보내는 다른 방법 은 다음과 같이 directtomx.com 을 사용 하는 것입니다.

 Email = {
 Send : function (to,from,subject,body,apikey)
    {
        if (apikey == undefined)
        {
            apikey = Email.apikey;
        }
        var nocache= Math.floor((Math.random() * 1000000) + 1);
        var strUrl = "http://directtomx.azurewebsites.net/mx.asmx/Send?";
        strUrl += "apikey=" + apikey;
        strUrl += "&from=" + from;
        strUrl += "&to=" + to;
        strUrl += "&subject=" + encodeURIComponent(subject);
        strUrl += "&body=" + encodeURIComponent(body);
        strUrl += "&cachebuster=" + nocache;
        Email.addScript(strUrl);
    },
    apikey : "",
    addScript : function(src){
            var s = document.createElement( 'link' );
            s.setAttribute( 'rel', 'stylesheet' );
            s.setAttribute( 'type', 'text/xml' );
            s.setAttribute( 'href', src);
            document.body.appendChild( s );
    }
};

그런 다음 페이지에서 다음과 같이 호출하십시오.

 window.onload = function(){
    Email.apikey = "-- Your api key ---";
    Email.Send("to@domain.com","from@domain.com","Sent","Worked!");
 }

내가 함께 할 것이라고 SMTPJs 등 사용자 이름, 암호 등의 자격 증명에 library.It 제공 암호화

자바 스크립트 만 사용하여 이메일을 보낼 수 없기 때문에 귀하의 질문에 대한 정답은 없지만, 자바 스크립트를 사용하여 이메일을 보내는 방법은 다음과 같습니다.

1) API를 사용하여 자바 스크립트를 통해 API를 호출하여 이메일을 보내십시오. 예를 들어 https://www.emailjs.com 은 아래 코드를 사용하여 설정 후 API를 호출 할 수 있다고 말합니다.

var service_id = 'my_mandrill';
var template_id = 'feedback';
var template_params = {
name: 'John',
reply_email: 'john@doe.com',
message: 'This is awesome!'
};

emailjs.send(service_id,template_id,template_params);

2) 백엔드 코드를 작성하여 이메일을 보내면 백엔드 프레임 워크를 사용하여 이메일을 보낼 수 있습니다.

3) 다음과 같은 것을 사용하십시오 :

window.open('mailto:me@http://stackoverflow.com/');

이메일 응용 프로그램이 열리면 브라우저에서 팝업이 차단 될 수 있습니다.

일반적으로 이메일 전송은 서버 작업이므로 백엔드 언어로 수행해야하지만, 자바 스크립트를 사용하여 필요한 데이터를 수집하여 서버 나 API로 전송할 수 있으며, 3 차 패리티 애플리케이션을 사용하여 열 수 있습니다. 위에서 언급 한 자바 스크립트를 사용하여 브라우저를 통해.

짧은 대답은 JavaScript만으로는 할 수 없다는 것입니다. 실제로 메일을 보내려면 SMTP 서버에 연결하려면 서버 측 처리기가 필요합니다. PHP를위한 것과 같은 많은 간단한 메일 스크립트가 온라인에 있습니다 :

Ajax 를 사용 하여 PHP 스크립트에 요청을 보내고 js를 사용하여 필수 필드가 비어 있거나 올바르지 않은지 확인하십시오. 또한 서버에서 보낸 사람이 보낸 메일 레코드를 유지하십시오.

function sendMail() is good for doing that.

스크립트에서 메일을 발송하는 동안 오류가 발생했는지 확인하고 적절한 조치를 취하십시오.
예를 들어 메일 주소가 올바르지 않거나 서버 문제로 인해 메일이 발송되지 않거나 이러한 상태에서 대기열에있는 경우이를 즉시 사용자에게보고하고 동일한 이메일을 여러 번 보내는 것을 방지하십시오. jQuery GET 및 POST를 사용하여 스크립트에서 응답 받기

$ .get (URL, 콜백); $ .post (URL, 콜백);

이것들은 모두 훌륭한 정보이기 때문에 자바 스크립트에서 메일을 보내는 Mandrill 이라는 작은 API가 있으며 완벽하게 작동합니다. 샷을 줄 수 있습니다. 시작을위한 약간의 자습서 가 있습니다.

JavaScript 또는 jQuery를 사용하여 이메일 보내기

var ConvertedFileStream;
var g_recipient;
var g_subject;
var g_body;
var g_attachmentname;


function SendMailItem(p_recipient, p_subject, p_body, p_file, p_attachmentname, progressSymbol) {

    // Email address of the recipient 
    g_recipient = p_recipient;

   // Subject line of an email
    g_subject = p_subject;

   // Body description of an email
    g_body = p_body;

    // attachments of an email
    g_attachmentname = p_attachmentname;

    SendC360Email(g_recipient, g_subject, g_body, g_attachmentname);

}

function SendC360Email(g_recipient, g_subject, g_body, g_attachmentname) {
    var flag = confirm('Would you like continue with email');
    if (flag == true) {

        try {
            //p_file = g_attachmentname;
            //var FileExtension = p_file.substring(p_file.lastIndexOf(".") + 1);
           // FileExtension = FileExtension.toUpperCase();
            //alert(FileExtension);
            SendMailHere = true;

            //if (FileExtension != "PDF") {

            //    if (confirm('Convert to PDF?')) {
            //        SendMailHere = false;                    
            //    }

            //}
            if (SendMailHere) {
                var objO = new ActiveXObject('Outlook.Application');

                var objNS = objO.GetNameSpace('MAPI');

                var mItm = objO.CreateItem(0);

                if (g_recipient.length > 0) {
                    mItm.To = g_recipient;
                }

                mItm.Subject = g_subject;

                // if there is only one attachment                 
                // p_file = g_attachmentname;
                // mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);

                // If there are multiple attachment files
                //Split the  files names
                var arrFileName = g_attachmentname.split(";");
                 // alert(g_attachmentname);
                //alert(arrFileName.length);
                var mAts = mItm.Attachments;

                for (var i = 0; i < arrFileName.length; i++)
                {
                    //alert(arrFileName[i]);
                    p_file = arrFileName[i];
                    if (p_file.length > 0)
                    {                     
                        //mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);
                        mAts.add(p_file, i, g_body.length + 1, p_file);

                    }
                }

                mItm.Display();

                mItm.Body = g_body;

                mItm.GetInspector.WindowState = 2;

            }
            //hideProgressDiv();

        } catch (e) {
            //debugger;
            //hideProgressDiv();
            alert('Unable to send email.  Please check the following: \n' +
                    '1. Microsoft Outlook is installed.\n' +
                    '2. In IE the SharePoint Site is trusted.\n' +
                    '3. In IE the setting for Initialize and Script ActiveX controls not marked as safe is Enabled in the Trusted zone.');
        }
    }
  }