자바스크립트 이메일 보내기

Migel Hewage Nimesha 2024년2월15일

JavaScript JavaScript Email

JavaScript로 이메일 보내기
서버 자격 증명을 JavaScript 코드로 설정
결론

웹 응용 프로그램을 사용하여 전자 메일을 보내는 표준 방법을 사용하려면 전자 메일을 SMTP 서버로 보내도록 특정 웹 응용 프로그램의 서버 측 구성을 설정해야 합니다. Simple Mail Transfer Protocol이라고도 하는 SMTP는 인터넷 브라우저의 클라이언트 측에서 이메일을 전송하는 데 사용할 수 있습니다. 클라이언트 측에서 서버 측으로 이메일을 보내도록 요청하면 백엔드에서 이메일을 생성한 다음 SMTP 서버로 보냅니다.

JavaScript를 사용하여 서버 측의 도움 없이 클라이언트 측에서 이메일을 보내는 방법이 있습니다.

JavaScript로 이메일 보내기

서버 소켓에 대한 지원이 적기 때문에 JavaScript 코드를 사용하는 것만으로 직접 이메일을 보낼 수 없다는 것은 일반적인 사실입니다. 그러나 브라우저를 통한 이메일 전송 프로세스에서는 SMTPJS를 사용할 수 있습니다. JavaScript에서 제공되는 타사 무료 라이브러리.

이 라이브러리는 JavaScript에서 이메일을 보내는 Email.send() 메서드를 제공합니다. 일반적으로 연락처 포럼은 브라우저를 통해 이메일을 보냅니다.

예를 들어 다음 HTML 및 CSS 코드를 사용하여 문의 양식을 만들 수 있습니다. 그런 다음 JavaScript 코드를 추가하여 이메일을 보낼 수 있습니다.

코드 예:

<!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>

위의 코드를 지원하는 양식을 만들 수 있습니다. 다음으로 HTML 파일에 다음 JavaScript 코드를 포함해야 합니다.

<script src="https://smtpjs.com/v3/smtp.js"></script>

위의 코드를 포함하여 smtpJS.com에서 사용할 수 있는 코드에 SMTPJS 라이브러리를 추가했습니다. 브라우저를 통해 이메일을 보내는 추가 절차에는 서버가 설정되고 실행 중이어야 합니다.

다음 단계에서는 이메일을 받는 사람에게 보낼 SMTP 서버를 만들어야 합니다. 무료 서버 서비스를 제공하는 Elastic Email로 SMTP 서버를 생성할 수 있습니다.

smtpJS.com은 Elastic Email 웹 애플리케이션으로 연결됩니다. “SMTP 자격 증명 만들기"에서 세부 정보를 설정하여 계정과 SMTP 서버를 만들 수 있습니다.

자격 증명을 생성하면 새 서버의 자격 증명을 포함하는 팝업 창이 나타납니다. 암호를 복사하여 나중에 사용할 수 있도록 저장하는 것이 좋습니다.

서버 자격 증명을 JavaScript 코드로 설정

서버를 만든 후 smtpJS.com으로 돌아갑니다. 다음과 같이 Email.send() 함수를 통해 사용할 수 있습니다.

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));

이 코드 조각에는 관련 세부 정보를 대체하는 HTML 코드가 포함되어야 합니다. 사용자 이름은 우리가 생성한 이메일, Elastic 이메일 계정 및 비밀번호입니다.

To는 수신자의 이메일 주소이고 From은 발신자의 이메일 주소를 대체해야 합니다. 또한 보내기 버튼은 다음과 같이 JavaScript 기능을 트리거해야 합니다.

<button type="button" value="send email" onclick="sendEmail()">Send</button>

Email.send() 메서드를 포함하여 다음 코드에서 전체 코드를 빌드할 수 있습니다.

이 코드는 SMTP 서버를 생성할 때 탄력적 이메일에서 제공한 자격 증명을 포함할 때까지 작동하지 않습니다. 코드를 실행할 사용자 이름과 암호를 포함합니다.

<!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>

이메일을 수신할 수신자가 여러 명인 경우 이메일 주소 배열로 To를 설정할 수 있습니다.

출력:

javascript 이메일 보내기

중요한 것은 클라이언트 측 서버에서 사용자 이름과 암호를 볼 수 없도록 SMTP 자격 증명을 암호화할 수 있다는 것입니다. smtpJS.com은 “SMTP 자격 증명 암호화"라는 기능을 제공합니다.

이 기능을 사용하면 서버 자격 증명을 암호화하여 필수 필드를 채울 수 있습니다. 그런 다음 자격 증명을 구성하기 위해 HTML 코드에 아래 JS 코드를 포함할 수 있습니다.

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));

HTML 코드의 보안 토큰 대신 자격 증명용으로 생성된 토큰을 추가할 수 있습니다. 자격 증명을 암호화하기 위해 코드에 포함할 수 있습니다.

이 방법을 사용하면 JavaScript를 사용하여 이메일을 보낼 수 있습니다.

결론

웹사이트의 프런트 엔드에서 이메일을 보내는 것은 사용자 상호작용 웹 애플리케이션을 구축하는 데 매우 유용합니다. JavaScript는 SMTPJs 라이브러리를 사용하여 프런트엔드 도움말에서 이메일을 보낼 수 있는 방법을 제공합니다.

페이지를 새로 고치지 않고 서버 측 코딩 없이 이메일을 보낼 수 있습니다.

작가: Migel Hewage Nimesha

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.