web-dev-qa-db-ja.com

メールクライアントを開かずにJavaScriptでメールを送信するにはどうすればよいですか?

ローカルのメールクライアントを開かずに、静かにメールを送信する登録ボタンを含むHTMLページを作成しています。これが私のHTMLです。

<form method="post" action="">
    <input type="text" id="email_address" name="name" placeholder="Enter your email address..." required>
    <button onclick="sendMail(); return false">Send Email</button>
</form>

...そしてここに私のJavaScriptコードがあります:

<script type="text/javascript">
  function sendMail() {
    var link = 'mailto:[email protected]?subject=Message from '
             +document.getElementById('email_address').value
             +'&body='+document.getElementById('email_address').value;
    window.location.href = link;
}
</script>

上記のコードは機能しますが、ローカルの電子メールクライアントを開きます。次のようにreturn属性のonclickステートメントを削除すると:

<form method="post" action="">
    <input type="text" id="email_address" name="name" placeholder="Enter your email address..." required>
    <button onclick="sendMail()">Send Email</button>
</form>

...その後、メールはまったく送信されません。何か不足していますか?

どんな助けも大歓迎です:-)

18
j3d

これを実現するには、サーバー側のサポートが必要です。基本的に、フォームをサーバーに投稿し(AJAXも問題ありません)、そのサーバーはSMTPを介してメールプロバイダーに接続し、その電子メールを送信する必要があります。

JavaScriptを使用して(つまりユーザーのコンピューターから)電子メールを直接送信できた場合でも、ユーザーは(gmail.comなどの)SMTPサーバーに接続し、SMTP資格情報を提供する必要があります。これは通常、これらの資格情報を知っているサーバー側(アプリケーション内)。

13

ユーザーのブラウザにメールをサイレント送信させることはできません。どのWebサイトでもシステムをスパムリレーとして使用したり、電子メールアドレスを収集したりする可能性があるため、これは恐ろしいセキュリティ問題になります。

サーバーからメールを送信するサーバー側プロセス(選択した言語で記述された)に対してHTTP要求を行う必要があります。

14
Quentin

クライアントから直接


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': '[email protected]',
          'to': [
              {
                'email': '[email protected]',
                '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キーは誰でも見ることができるため、悪意のあるユーザーはこのキーを使用してクォータを使い果たす可能性のあるメールを送信する可能性があることに注意してください。


サーバー経由の間接-安全


上記の脆弱性を克服するために、セッションベースの認証後にメールを送信するように独自のサーバーを変更できます。

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: '[email protected]',
            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を呼び出します。

7
rahulroy9202

クライアント側のスクリプトのみではできません...メールを送信するサーバー側のコードをAJAX呼び出し...

4
Ads

smtpjs.com を使用できると思います

2
Louis

電子メールを送信するには、何らかのタイプのバックエンドフレームワークが必要です。これは、PHP/ASP.NET経由で、またはローカルメールクライアントを使用して実行できます。ユーザーに何も表示させたくない場合、最良の方法は、別のsend_emailファイルへのAJAX呼び出しによってこれらを利用することです。

1
PlantTheIdea

サーバーで直接実行する必要があります。しかし、より良い方法はPHPを使用することです。 PHPには、メールクライアントを開かずに電子メールを直接送信できる特別なコードがあります。

0
Tiago Salzmann