วิธีรับอีเมลจากไซต์ของคุณ ติดต่อเรา แบบฟอร์มโดยใช้ AWS SES, Lambda และ API Gateway

ฉันเพิ่งสร้างเว็บไซต์แลนดิ้งเพจแบบง่ายสำหรับลูกค้าที่ต้องการรับอีเมลผ่านเว็บไซต์ของตนโดยไม่เปิดเผยอีเมล

สุจริตฉันไม่เคยพยายามใช้ฟังก์ชันนั้นมาก่อน ฉันเคยชินกับการมีปุ่ม "ติดต่อเรา" ง่ายๆ ที่มีแท็ก anchor และ mailto ใน href คุณลักษณะเช่นนี้:

<button>
	<a href="mailto:[email protected]">Contact Me</a>
</button>

แต่วิธีนี้มีความไม่สะดวกสองประการ:

บังคับทั้งสองฝ่าย ผู้ใช้ที่ต้องการส่งข้อความและเจ้าของไซต์ที่ได้รับข้อความ ให้แบ่งปันอีเมลของตนกับอีกฝ่ายหนึ่ง แม้ว่าจะเป็นเรื่องปกติสำหรับบางคน แต่ก็ไม่เหมาะสำหรับผู้ที่มีความเป็นส่วนตัว
สำหรับผู้เยี่ยมชมไซต์ การคลิกลิงก์บังคับให้พวกเขาเปิดโปรแกรมอีเมลเริ่มต้นบนอุปกรณ์ของตน ซึ่งอาจทำให้หงุดหงิด เกิดอะไรขึ้นถ้าพวกเขากำลังใช้คอมพิวเตอร์สาธารณะ เกิดอะไรขึ้นถ้าพวกเขาไม่ได้เข้าสู่ระบบ? จะเกิดอะไรขึ้นหากพวกเขาไม่ต้องการใช้โปรแกรมอีเมลของตน
ได้ ในทางเทคนิคแล้ว พวกเขาสามารถคว้าที่อยู่อีเมลของผู้รับและส่งข้อความผ่านเบราว์เซอร์หรือที่ใดก็ตามที่ลงชื่อเข้าใช้ แต่สิ่งเหล่านี้เป็นขั้นตอนและอุปสรรคเพิ่มเติมทั้งหมดที่อาจกีดกันผู้ใช้จากการส่งข้อความ และธุรกิจอาจสูญเสียความคิดเห็นที่อาจเกิดขึ้นหรือ โอกาส.

ด้วยเหตุนี้ เราจึงเลือกใช้แบบฟอร์มอีเมลที่ผู้ใช้สามารถเขียนข้อความและคลิกส่ง ส่งอีเมลไปยังเจ้าของเว็บไซต์โดยไม่ต้องออกจากเว็บไซต์เลย

การค้นหาโดย Google อย่างรวดเร็วแสดงให้เห็นว่ามีเครื่องมือ/วิดเจ็ตของบุคคลที่สามที่คุณสามารถฝังในเว็บไซต์ได้ แต่ส่วนใหญ่มีตราสินค้าและต้องสมัครสมาชิกแบบชำระเงินสำหรับการปรับแต่งแบบเต็ม

และถ้าคุณไม่ใช้ CMS เช่น WordPress ที่มีปลั๊กอินในตัวที่สามารถทำได้ นั่นเป็นค่าใช้จ่ายที่เกิดซ้ำซึ่งไม่สะดวก

ฉันเลือกที่จะเขียนโค้ดที่มีคุณสมบัติด้วยตัวเองแทน ดังนั้นฉันจึงสามารถควบคุมได้อย่างเต็มที่

สำหรับวัตถุประสงค์ของคู่มือนี้ ฉันจะสร้างขั้นตอนที่ฉันทำขึ้นใหม่เพื่อใช้ฟังก์ชันนั้นโดยใช้บริการ HTML และ AWS

แบบฟอร์ม HTML

ฉันจะทำให้มันง่ายสุด ๆ ที่นี่และไปกับรูปแบบ HTML พื้นฐานที่ไม่มี CSS เพียงเพื่อทดสอบการทำงานที่ต้องการของเรา

<h2>Contact Us</h2>
<form>
  <label for="name">Name:</label>
  <input name="name" type="text"/><br/><br/>
  <label for="email">Email:</label>
  <input name="email" type="email"/><br/><br/>
  <label for="name">Message:</label>
  <textarea name="message"></textarea><br/><br/>
  <input type="submit"/>
  <div>
    <p id="result-text"></p>
  </div>
</form>

วิธีรับอีเมลจากไซต์ของคุณ ติดต่อเรา แบบฟอร์มโดยใช้ AWS SES, Lambda และ API Gateway

ไม่มีอะไรน่าสนใจที่จะเห็นที่นี่...

ตอนนี้เราต้องการจัดการฟังก์ชันการส่งด้วย JavaScript

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // prevent the form submit from refreshing the page
  event.preventDefault()
 
  const { name, email, message } = event.target
  console.log('Name: ', name.value)
  console.log('email: ', email.value)
  console.log('Message: ', message.value)
  
})

ณ จุดนี้ เรามีแบบฟอร์มที่ได้รับอินพุตจากผู้ใช้และโค้ด JavaScript ที่แสดงผลลัพธ์ไปยังคอนโซลเท่านั้น

เราสามารถปล่อยไว้อย่างนั้นในตอนนี้และเริ่มทำงานกับบริการแบ็กเอนด์ที่จะรับข้อมูลในแบบฟอร์มและส่งอีเมลพร้อมข้อมูลนั้น

ภาพรวมแบ็กเอนด์

มาเจาะลึกเกี่ยวกับ AWS และบริการที่เราจะใช้กันและอย่างไร

ตามที่กล่าวไว้ในชื่อ เราจะใช้ AWS Lambda และ บริการอีเมลอย่างง่าย (สส.). SES เป็นบริการส่งข้อความแบบไร้เซิร์ฟเวอร์ที่ให้คุณส่งข้อความอีเมลเมื่อถูกเรียก AWS Lambda ช่วยให้คุณเขียนโค้ดฝั่งเซิร์ฟเวอร์เพื่อดำเนินการตามเหตุการณ์ได้

เราจะใช้ API Gateway . ด้วย ซึ่งช่วยให้เราสามารถเรียกใช้ฟังก์ชัน Lambda ผ่าน HTTP

ในกรณีนี้ เมื่อส่งแบบฟอร์มของเรา เวิร์กโฟลว์ต่อไปนี้จะเกิดขึ้น:

เบราว์เซอร์ของเรา (JavaScript) จะสร้างคำขอโพสต์พร้อมข้อมูลแบบฟอร์มในเนื้อหาคำขอไปยัง URL ปลายทางที่ระบุโดย AWS API Gateway
API Gateway จะตรวจสอบคำขอนี้ จากนั้นจะเรียกใช้ฟังก์ชัน Lambda ซึ่งยอมรับพารามิเตอร์เหตุการณ์ API Gateway จะใส่ข้อมูลแบบฟอร์มในคุณสมบัติ body ของพารามิเตอร์เหตุการณ์
ฟังก์ชัน Lambda ของเราจะดึงข้อมูลจากเนื้อความของเหตุการณ์ จากนั้นเราจะใช้ข้อมูลนี้เพื่อสร้างเนื้อความของอีเมลที่เราต้องการส่งเช่นเดียวกับผู้รับ จากนั้น ฟังก์ชันของเราจะใช้ AWS SDK เพื่อเรียกใช้ SES ด้วยข้อมูลอีเมล
เมื่อ SES ได้รับ sendMail คำขอจะเปลี่ยนข้อมูลอีเมลเป็นอีเมลข้อความจริงและส่งไปยังผู้รับผ่านเซิร์ฟเวอร์อีเมลของ AWS

เมื่อส่งอีเมลแล้ว เบราว์เซอร์ของเราจะได้รับการตอบกลับพร้อมรหัสสถานะ 200 และข้อความแสดงความสำเร็จ หากขั้นตอนใดๆ ใน AWS Cloud ล้มเหลว การตอบกลับจะมีรหัสสถานะ 500 รายการ

ขั้นตอนที่ 1:วิธีการตั้งค่า SES

เราจะตั้งค่าแต่ละขั้นตอนเหล่านี้ในลำดับย้อนกลับ โดยเริ่มจาก SES ซึ่งจะง่ายกว่า

ก่อนอื่นในคอนโซล AWS ของคุณ ให้ไปที่บริการ SES —> จากนั้นคลิกที่ที่อยู่อีเมลในเมนูด้านข้าง —> จากนั้นคลิกที่ปุ่ม "ยืนยันที่อยู่อีเมลใหม่"

ในกล่องโต้ตอบที่เปิดขึ้น ให้ป้อนที่อยู่อีเมลที่คุณต้องการให้บริการ SES ใส่เป็นผู้ส่ง เมื่อส่งอีเมล

การดำเนินการนี้จะส่งอีเมลไปยังที่อยู่อีเมลที่คุณใส่พร้อมลิงก์สำหรับคลิกเพื่อยืนยัน นี่คือวิธีที่ AWS รู้ว่าเจ้าของอีเมลยินยอมให้มีการใช้ที่อยู่อีเมลของตนเป็นที่อยู่ผู้ส่ง

จนกว่าคุณจะยืนยันอีเมล แดชบอร์ดอีเมล SES จะคงสถานะการยืนยันเป็นรอดำเนินการ

เมื่อเจ้าของอีเมลเปิดอีเมลที่ได้รับจาก AWS และคลิกลิงก์การยืนยันในนั้น สถานะการตรวจสอบควรเปลี่ยนเป็นยืนยันแล้ว (รีเฟรชหน้าเพื่อดูการเปลี่ยนแปลง)

และนั่นคือทั้งหมดที่คุณต้องทำสำหรับ SES คุณสามารถเลือกทดสอบบริการได้โดยเลือกอีเมลที่ได้รับการยืนยันของคุณในรายการแล้วคลิกปุ่ม "ส่งอีเมลทดสอบ" วิธีนี้จะทำให้คุณสามารถใส่ที่อยู่อีเมล หัวเรื่อง และข้อความของผู้รับแล้วส่งได้

อีเมลที่ส่งจะถูกลงนามโดยเซิร์ฟเวอร์ AWS และที่อยู่ที่ตรวจสอบแล้วของคุณควรเป็นผู้ส่ง ควรมีลักษณะดังนี้:

ขั้นตอนที่ 2:วิธีการตั้งค่าแลมบ์ดา

ตอนนี้เป็นส่วนที่สนุกที่สุด เรากำลังจะสร้างฟังก์ชันที่จะรับข้อมูลแบบฟอร์มและเรียก SES

ข้อดีของฟังก์ชัน Lambda คือคุณไม่ต้องกังวลกับการเรียกใช้แบ็กเอนด์โค้ดบนเซิร์ฟเวอร์ตลอด 24 ชั่วโมงทุกวัน และการบำรุงรักษาเซิร์ฟเวอร์นั้น ไร้เซิร์ฟเวอร์ .

แต่นั่นไม่ได้หมายความว่าไม่มีเซิร์ฟเวอร์ที่เกี่ยวข้อง AWS จะจัดการเรื่องนั้นภายใต้ประทุน ดังนั้นคุณสามารถมุ่งความสนใจไปที่การเขียนโค้ดเท่านั้น ไม่ใช่ดูแลเซิร์ฟเวอร์ นอกจากนี้ คุณจะถูกเรียกเก็บเงินตามจำนวนครั้งที่ฟังก์ชันของคุณถูกเรียกใช้และระยะเวลาที่ใช้ในการดำเนินการเท่านั้น และราคาถูกอย่างเหลือเชื่อ!

สร้างบทบาท IAM และกำหนดค่า

ก่อนที่เราจะเริ่มเขียนฟังก์ชัน lambda เราต้องสร้าง IAM role เพื่อแนบไปกับฟังก์ชันและให้สิทธิ์ (เรียกว่านโยบายใน AWS) เพื่อเรียกใช้บริการ SES

จากคอนโซล AWS ของคุณ ไปที่บริการ IAM —> คลิกนโยบายในเมนูด้านข้าง —> จากนั้นคลิกที่ปุ่ม "สร้างนโยบาย"

ในหน้าการสร้างนโยบาย ให้ไปที่แท็บ JSON และวางสิทธิ์ต่อไปนี้ จากนั้นคลิกถัดไป

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "ses:SendEmail",
                "ses:SendRawEmail"
            ],
            "Resource": "*"
        }
    ]
}

ในหน้าจอที่สาม ตั้งชื่อนโยบายแล้วคลิกปุ่ม "สร้างนโยบาย"

ตอนนี้เราสร้าง IAM บทบาท ซึ่งจะแนบไปกับแลมบ์ดาและเชื่อมโยงกับนโยบายการอนุญาตที่เราเพิ่งสร้างขึ้น

จากเมนูด้านข้าง IAM คลิกบทบาท จากนั้นคลิกปุ่ม "สร้างบทบาท"

ในหน้าจอการสร้างบทบาท ตรวจสอบให้แน่ใจว่าประเภทที่เลือกคือ "บริการ AWS" และเลือกกรณีของ Lambda จากนั้นคลิกที่ปุ่ม "ถัดไป:สิทธิ์"

ในหน้าจอถัดไป ให้ค้นหานโยบายที่เราสร้างไว้ก่อนหน้านี้โดยใช้ชื่อนโยบายแล้วเลือก จากนั้นคลิกถัดไป

ในหน้าจอตรวจสอบ ให้ตั้งชื่อบทบาทที่คุณจำได้ จากนั้นคลิก "สร้างบทบาท"

ตอนนี้เราสามารถสร้างฟังก์ชันแลมบ์ดาใหม่ได้แล้ว ไปที่แดชบอร์ดบริการของ Lambda แล้วคลิกปุ่ม "สร้างฟังก์ชัน"

ในหน้าจอการสร้างฟังก์ชัน ให้ตั้งชื่อฟังก์ชันของคุณ เลือกตัวเลือก "ผู้เขียนตั้งแต่เริ่มต้น" และเลือก Node.js เป็นรันไทม์

ภายใต้ "เปลี่ยนบทบาทการดำเนินการเริ่มต้น" ให้เลือกตัวเลือก "ใช้บทบาทที่มีอยู่" จากนั้นเลือกชื่อของบทบาทที่คุณสร้างในขั้นตอนก่อนหน้าจากดรอปดาวน์ "บทบาทที่มีอยู่"

สุดท้าย ให้คลิกปุ่ม "สร้างฟังก์ชัน" เพื่อสร้างฟังก์ชัน

เขียนโค้ดและทดสอบ

ในตัวแก้ไข ให้เปิดไฟล์ index.js (นี่คือไฟล์ที่จะดำเนินการเมื่อมีการเรียกแลมบ์ดาของคุณ) และแทนที่เนื้อหาด้วยโค้ดต่อไปนี้:

const aws = require("aws-sdk");
const ses = new aws.SES({ region: "us-east-1" });
exports.handler = async function (event) {
  console.log('EVENT: ', event)
  const params = {
    Destination: {
      ToAddresses: ["[email protected]"],
    },
    Message: {
      Body: {
        Text: { 
            Data: `Hello from Lambda!` 
        },
      },
      Subject: { Data: `Message from AWS Lambda` },
    },
    Source: "[email protected]",
  };

  return ses.sendEmail(params).promise()
};

โปรดสังเกตว่าในบรรทัดที่ 2 เรากำลังใช้ AWS SDK และสร้างอินสแตนซ์ SES เหตุผลที่ฉันเลือก us-east-1 ตามภูมิภาคนั้นเพราะนั่นคือ ที่ที่ฉันลงทะเบียนและยืนยันอีเมลของฉัน . อย่าลืมเปลี่ยนอีเมลและใช้ภูมิภาค AWS ที่คุณลงทะเบียนอีเมล

ตอนนี้เพื่อทดสอบฟังก์ชันนี้ ให้คลิกที่ปุ่ม "ปรับใช้" จากนั้นคลิกที่ปุ่มทดสอบ -> กำหนดค่าเหตุการณ์การทดสอบซึ่งควรเปิดกล่องโต้ตอบการกำหนดค่าการทดสอบซึ่งคุณสามารถสร้างเหตุการณ์การทดสอบใหม่ได้

ในตัวแก้ไขเนื้อหาของเหตุการณ์ทดสอบ ให้ป้อน JSON ต่อไปนี้ ซึ่งเลียนแบบสิ่งที่จะมาจากคำขอเบราว์เซอร์ของเราในที่สุด จากนั้นคลิกสร้าง

{
  "body": {
        "senderName": "Namo",
        "senderEmail": "[email protected]",
        "message": "I love trains!"
    }
}

ตอนนี้การคลิกปุ่มทดสอบจะเป็นการเรียกใช้การทดสอบที่เราเพิ่งสร้างขึ้น ควรเปิดแท็บใหม่ในโปรแกรมแก้ไขเพื่อแสดงบันทึกที่สร้างขึ้นจากการเรียกใช้ฟังก์ชัน ซึ่งควรมีลักษณะดังนี้:

สังเกตว่าอ็อบเจกต์เหตุการณ์ที่เราออกจากระบบจะแสดงที่นี่ภายใต้บันทึกฟังก์ชันพร้อมข้อมูลเนื้อหาที่เราใช้ในเหตุการณ์ทดสอบ

การทดสอบนี้น่าจะส่งอีเมลไปที่กล่องจดหมายของฉันด้วย – มาดูกันว่าเกิดอะไรขึ้น

ใช่ตามที่คาดไว้ และนั่นก็เกิดขึ้นเกือบจะทันทีหลังจากทำการทดสอบ

ตอนนี้ มาแก้ไขโค้ดฟังก์ชันของเราเพื่อรับข้อความที่มีความหมายมากขึ้นจากข้อมูลทดสอบ

const aws = require("aws-sdk");
const ses = new aws.SES({ region: "us-east-1" });
exports.handler = async function (event) {
  console.log('EVENT: ', event)
	// Extract the properties from the event body
  const { senderEmail, senderName, message } = JSON.parse(event.body)
  const params = {
    Destination: {
      ToAddresses: ["[email protected]"],
    },
		// Interpolate the data in the strings to send
    Message: {
      Body: {
        Text: { 
            Data: `You just got a message from ${senderName} - ${senderEmail}:
            ${message}` 
        },
      },
      Subject: { Data: `Message from ${senderName}` },
    },
    Source: "[email protected]",
  };

  return ses.sendEmail(params).promise();
};

สิ่งสำคัญคือต้องทราบว่าเมื่อ API Gateway เรียกใช้ฟังก์ชันของเรา จะส่งสตริงไปยังเนื้อหาของเหตุการณ์ นี่คือเหตุผลที่ฉันใช้ JSON.parse บน event.body เพื่อเปลี่ยนเป็น JSON และแยกอีเมล ชื่อ และข้อความของผู้ส่งของเรา จากนั้นฉันก็ใช้ตัวแปรเหล่านั้นในข้อความเนื้อหาอีเมลและหัวเรื่องโดยใช้การแก้ไขสตริง

หากคุณลองทดสอบ รหัสจะส่งคืนข้อผิดพลาด เนื่องจากการทดสอบกำลังส่งผ่านอ็อบเจ็กต์ JSON ไปยัง event.body และเรากำลังใช้ JSON.parse บน JSON ซึ่งทำให้เกิดข้อผิดพลาดใน JavaScript

น่าเศร้าที่ตัวแก้ไขการทดสอบไม่อนุญาตให้เราส่งผ่านสตริงไปยังเหตุการณ์ ดังนั้นเราจะต้องทดสอบสิ่งนั้นในภายหลังจากที่อื่น

ขั้นตอนที่ 3:วิธีการตั้งค่าเกตเวย์ API

ต่อไป บริการ AWS สุดท้ายที่เราจะใช้คือ API Gateway ซึ่งจะทำให้เบราว์เซอร์ของเราสามารถส่งคำขอ HTTP ไปยังฟังก์ชัน Lambda ที่เราสร้างขึ้นได้

โดยไม่ต้องออกจากหน้าฟังก์ชันแลมบ์ดา ให้ขยายส่วน "ภาพรวมฟังก์ชัน" แล้วคลิก "เพิ่มทริกเกอร์"

จากนั้นเลือก API Gateway จากดรอปดาวน์ HTTP API เป็นประเภท API "เปิด" เป็นกลไกการรักษาความปลอดภัย และทำเครื่องหมายในช่องตัวเลือก CORS จากนั้นคลิก "เพิ่ม"

คุณควรเปลี่ยนเส้นทางไปที่แท็บ "การกำหนดค่า" ของฟังก์ชันของคุณ โดยแสดงทริกเกอร์ API Gateway ใหม่ที่คุณเพิ่งสร้างขึ้น จากนั้น ให้สังเกต ปลายทาง API . นี่คือ URL ที่เราจะเรียกจากเบราว์เซอร์ของเราพร้อมกับข้อมูลแบบฟอร์ม

กลับไปที่ HTML

ในที่สุดเราก็สามารถทดสอบแบบฟอร์มเพื่อดูว่าส่งอีเมล์หรือไม่

มาแก้ไข JavaScript ของเราเพื่อจัดการกับการส่งคำขอเมื่อส่งแบบฟอร์ม

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  // prevent the form submit from refreshing the page
  event.preventDefault();

  const { name, email, message } = event.target;

	// Use your API endpoint URL you copied from the previous step
  const endpoint =
    "<https://5ntvcwwmec.execute-api.us-east-1.amazonaws.com/default/sendContactEmail>";
  // We use JSON.stringify here so the data can be sent as a string via HTTP
	const body = JSON.stringify({
    senderName: name.value,
    senderEmail: email.value,
    message: message.value
  });
  const requestOptions = {
    method: "POST",
    body
  };

  fetch(endpoint, requestOptions)
    .then((response) => {
      if (!response.ok) throw new Error("Error in fetch");
      return response.json();
    })
    .then((response) => {
      document.getElementById("result-text").innerText =
        "Email sent successfully!";
    })
    .catch((error) => {
      document.getElementById("result-text").innerText =
        "An unkown error occured.";
    });
});

ตอนนี้ ช่วงเวลาแห่งความจริง:กรอกแบบฟอร์มแล้วคลิกส่ง หากคุณเห็นข้อความแสดงความสำเร็จ แสดงว่าส่งอีเมลแล้ว

เนื่องจากฉันเป็นเจ้าของอีเมลที่ส่งข้อความถึง ฉันจึงดูกล่องจดหมายของฉันอย่างรวดเร็วเพื่อดูว่าฉันได้รับอีเมลจากตัวเองพร้อมรายละเอียดที่ฉันใช้ในแบบฟอร์ม!

หากคุณได้ปฏิบัติตาม ตอนนี้คุณมีแบบฟอร์ม "ติดต่อเรา" ที่ใช้งานได้ ซึ่งคุณสามารถเชื่อมต่อกับเว็บไซต์ใดก็ได้ และคุณจะได้รับการเรียกเก็บเงินเมื่อมีการใช้งานจริงเท่านั้น

ฉันไม่รู้เกี่ยวกับคุณ แต่ฉันคิดว่ามันค่อนข้างเจ๋งและเกือบจะวิเศษมาก! และเป็นวิธีที่ดีและเป็นประโยชน์ในการใช้การประมวลผลแบบคลาวด์/บริการในเวิร์กโฟลว์ของคุณ

แน่นอน คุณสามารถปรับแต่งโฟลว์นี้ในแง่ของการใช้เฟรมเวิร์กในส่วนหน้า เช่น React หรือ Vue หรือภาษาการเขียนโปรแกรมอื่นสำหรับ Lambda เช่น Python หรือ Go

ก่อนไป...

ขอบคุณที่อ่านมาถึงตรงนี้! ฉันเขียนโพสต์เกี่ยวกับ JavaScript การพัฒนาระบบคลาวด์ และประสบการณ์ด้านการศึกษาและวิชาชีพส่วนตัวของฉันในฐานะนักพัฒนาที่เรียนรู้ด้วยตนเอง ดังนั้นโปรดติดตามฉันที่ twitter @adham_benhawy ที่ฉันทวีตเกี่ยวกับพวกเขาด้วย!

ทรัพยากร

https://aws.amazon.com/premiumsupport/knowledge-center/lambda-send-email-ses/
https://docs.aws.amazon.com/lambda/latest/dg/lambda-invocation.html
https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway.html?icmpid=docs_lambda_console