Gần đây tôi đang xây dựng một trang web trang đích đơn giản cho một khách hàng muốn nhận email qua trang web của họ mà không cần chia sẻ email của họ.
Thành thật mà nói, tôi chưa bao giờ cố gắng tự triển khai chức năng đó trước đây. Tôi luôn quen với việc có một nút "Liên hệ với chúng tôi" đơn giản với thẻ liên kết và mailto trong href thuộc tính như thế này:
<button>
<a href="mailto:[email protected]">Contact Me</a>
</button>
Nhưng cách tiếp cận này có hai điểm bất tiện:
- Nó buộc cả hai bên, người dùng muốn gửi tin nhắn và chủ sở hữu trang web nhận được nó, chia sẻ email của họ với nhau. Mặc dù điều này là ổn đối với một số người, nhưng nó không lý tưởng đối với những người quan tâm đến quyền riêng tư.
- Đối với khách truy cập trang web, việc nhấp vào liên kết buộc họ phải mở chương trình thư mặc định trên thiết bị của họ và điều đó có thể gây khó chịu. Điều gì sẽ xảy ra nếu họ đang sử dụng máy tính công cộng? Điều gì sẽ xảy ra nếu họ không đăng nhập? Điều gì sẽ xảy ra nếu họ chỉ đơn giản là không muốn sử dụng chương trình thư của họ?
Đúng, về mặt kỹ thuật, họ có thể chỉ lấy địa chỉ email của người nhận và gửi tin nhắn qua trình duyệt của họ hoặc bất cứ nơi nào họ đăng nhập. Nhưng đó là tất cả các bước bổ sung và trở ngại có thể không khuyến khích người dùng gửi tin nhắn của họ và doanh nghiệp có thể mất phản hồi tiềm năng hoặc cơ hội.
Vì lý do này, chúng tôi đã chọn sử dụng một biểu mẫu email mà từ đó người dùng có thể chỉ cần viết thư của họ và nhấp vào gửi, gửi email đến chủ sở hữu trang web mà không cần rời khỏi trang web.
Tìm kiếm nhanh trên Google cho thấy rằng có các công cụ / tiện ích của bên thứ ba mà bạn có thể nhúng vào trang web, nhưng hầu hết chúng đều có thương hiệu và yêu cầu đăng ký trả phí để tùy chỉnh đầy đủ.
Và trừ khi bạn đang sử dụng CMS như WordPress có một plugin tích hợp có thể làm điều đó, đó là một chi phí định kỳ bất tiện.
Thay vào đó, tôi chọn tự viết mã tính năng đó để tôi có toàn quyền kiểm soát.
Vì mục đích của hướng dẫn này, tôi sẽ tạo lại các bước tôi đã thực hiện để triển khai chức năng đó bằng cách sử dụng các dịch vụ HTML và AWS.
Biểu mẫu HTML
Tôi sẽ giữ cho nó cực kỳ đơn giản ở đây và đi với một biểu mẫu HTML cơ bản không có CSS, chỉ để kiểm tra chức năng mong muốn của chúng tôi.
<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>
Bây giờ chúng tôi muốn xử lý chức năng gửi bằng 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)
})
Tại thời điểm này, chúng ta có một biểu mẫu nhận đầu vào từ người dùng và mã JavaScript chỉ hiển thị kết quả trên bảng điều khiển.
Chúng tôi có thể để nó ở đó bây giờ và bắt đầu làm việc trên các dịch vụ phụ trợ sẽ nhận dữ liệu biểu mẫu và gửi email với dữ liệu đó.
Tổng quan về Backend
Hãy đi sâu vào AWS và những dịch vụ nào chúng tôi sẽ sử dụng và cách thức sử dụng.
Như đã đề cập trong tiêu đề, chúng tôi sẽ sử dụng AWS Lambda và Dịch vụ Email Đơn giản (SES). SES là một dịch vụ nhắn tin không máy chủ cho phép bạn gửi tin nhắn email khi được gọi. AWS Lambda cho phép bạn viết mã phía máy chủ để thực thi phản hồi các sự kiện.
Chúng tôi cũng sẽ sử dụng API Gateway cho phép chúng tôi gọi các hàm Lambda qua HTTP.
Trong trường hợp này, khi biểu mẫu của chúng tôi được gửi, quy trình làm việc sau sẽ xảy ra:
- Trình duyệt của chúng tôi (JavaScript) sẽ thực hiện một yêu cầu đăng, với dữ liệu biểu mẫu trong nội dung yêu cầu, tới một URL điểm cuối được AWS API Gateway chỉ định
- Cổng API sẽ xác thực yêu cầu này. Sau đó, nó sẽ kích hoạt hàm Lambda chấp nhận một tham số sự kiện. API Gateway sẽ đưa dữ liệu biểu mẫu vào thuộc tính nội dung của thông số sự kiện.
- Hàm Lambda của chúng tôi sẽ trích xuất dữ liệu từ nội dung sự kiện và sau đó chúng tôi sẽ sử dụng dữ liệu này để xây dựng nội dung email mà chúng tôi muốn gửi cũng như người nhận. Sau đó, chức năng của chúng tôi sẽ sử dụng AWS SDK để gọi SES cùng với dữ liệu email.
- Sau khi SES nhận được sendMail yêu cầu, nó biến dữ liệu email thành một email văn bản thực tế và gửi đến người nhận thông qua máy chủ thư riêng của AWS.
Sau khi email được gửi đi, trình duyệt của chúng tôi sẽ nhận được phản hồi với mã trạng thái 200 và thông báo thành công. Nếu bất kỳ bước nào trong đám mây AWS không thành công, phản hồi sẽ có mã trạng thái 500.
Bước 1:Cách thiết lập SES
Chúng tôi thực sự sẽ thiết lập từng bước trong số các bước này theo thứ tự ngược lại, bắt đầu với SES, việc này sẽ dễ dàng hơn.
Đầu tiên trong bảng điều khiển AWS của bạn, hãy truy cập dịch vụ SES -> sau đó nhấp vào Địa chỉ Email trong menu bên -> sau đó nhấp vào nút "Xác minh Địa chỉ Email Mới".
Trong hộp thoại mở ra, hãy nhập địa chỉ email mà bạn muốn dịch vụ SES đặt làm người gửi khi nó gửi email.
Thao tác này sẽ gửi một email đến địa chỉ email bạn đặt với một liên kết để nhấp vào để xác minh. Đây là cách AWS biết rằng chủ sở hữu email đồng ý sử dụng địa chỉ email của họ làm địa chỉ người gửi.
Cho đến khi bạn xác minh email, trang tổng quan email SES sẽ giữ trạng thái xác minh là đang chờ xử lý.
Sau khi chủ sở hữu email mở email mà họ nhận được từ AWS và nhấp vào liên kết xác minh trong đó, trạng thái xác minh sẽ chuyển thành đã xác minh (làm mới trang để xem thay đổi).
Và đó là tất cả những gì bạn phải làm đối với SES. Bạn có thể tùy chọn kiểm tra dịch vụ bằng cách chọn email đã xác minh của mình trong danh sách và nhấp vào nút "Gửi Email Kiểm tra". Điều này sẽ cho phép bạn nhập địa chỉ email của người nhận, chủ đề và thông điệp và gửi nó.
Email được gửi sẽ được máy chủ AWS ký và địa chỉ đã xác minh của bạn phải là người gửi. Nó sẽ trông như thế này:
Bước 2:Cách thiết lập Lambda
Bây giờ đây là phần thú vị nhất. Chúng ta sẽ tạo một hàm nhận dữ liệu biểu mẫu và gọi SES.
Vẻ đẹp của các chức năng Lambda là bạn không phải lo lắng về việc chạy mã phụ trợ của mình trên máy chủ 24/7 và duy trì máy chủ đó. Đó là không có máy chủ .
Nhưng điều đó không có nghĩa là không có máy chủ nào tham gia. AWS sẽ giải quyết vấn đề đó nên bạn chỉ có thể tập trung vào việc viết mã chứ không phải duy trì máy chủ. Ngoài ra, bạn chỉ bị tính phí cho số lần hàm của bạn được gọi và lượng thời gian nó thực thi và nó cực kỳ rẻ!
Tạo và định cấu hình vai trò IAM
Trước khi bắt đầu viết hàm lambda, chúng ta cần tạo một IAM role để đính kèm nó vào chức năng và cấp cho nó quyền (được gọi là các chính sách trong AWS) để gọi dịch vụ SES.
Từ bảng điều khiển AWS của bạn, đi tới dịch vụ IAM -> nhấp vào Chính sách trong menu bên -> sau đó nhấp vào nút "Tạo chính sách".
Trong trang tạo chính sách, hãy chuyển đến tab JSON và dán các quyền sau, sau đó nhấp vào Tiếp theo.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"ses:SendEmail",
"ses:SendRawEmail"
],
"Resource": "*"
}
]
}
Trong màn hình thứ ba, đặt tên cho chính sách và nhấp vào nút "Tạo chính sách".
Bây giờ chúng tôi tạo một IAM vai trò sẽ được đính kèm với lambda và liên kết nó với chính sách quyền mà chúng tôi vừa tạo.
Từ menu bên IAM, nhấp vào Vai trò rồi nhấp vào nút "Tạo vai trò".
Trong màn hình tạo vai trò, hãy đảm bảo loại được chọn là "Dịch vụ AWS" và chọn trường hợp Lambda, sau đó nhấp vào nút "Tiếp theo:Quyền".
Trên màn hình tiếp theo, hãy tìm kiếm chính sách mà chúng tôi đã tạo trước đó theo tên của nó và chọn nó, sau đó nhấp vào tiếp theo.
Trên màn hình đánh giá, đặt tên cho vai trò mà bạn có thể nhớ, sau đó nhấp vào "Tạo vai trò".
Bây giờ chúng ta có thể tạo một hàm lambda mới. Đi tới bảng điều khiển dịch vụ Lambda và nhấp vào nút "Tạo chức năng".
Trong màn hình tạo hàm, đặt tên cho hàm của bạn, chọn tùy chọn "Tác giả từ đầu" và chọn Node.js làm thời gian chạy.
Trong "Thay đổi vai trò thực thi mặc định", hãy chọn tùy chọn "Sử dụng vai trò hiện có", sau đó chọn tên của vai trò bạn đã tạo ở bước trước từ menu thả xuống "Vai trò hiện có".
Cuối cùng, nhấp vào nút "Tạo chức năng" để tạo chức năng.
Viết mã và kiểm tra nó
Trong trình chỉnh sửa, hãy mở tệp index.js (đây là tệp sẽ được thực thi khi lambda của bạn được gọi) và thay thế nội dung của nó bằng mã sau:
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()
};
Lưu ý rằng trên dòng 2, chúng tôi đang sử dụng AWS SDK và tạo một phiên bản SES. Lý do tôi chọn us-East-1 như khu vực vì đó là nơi tôi đã đăng ký và xác minh email của mình . Đảm bảo thay thế email và sử dụng khu vực AWS nơi bạn đã đăng ký email của mình.
Bây giờ để kiểm tra chức năng này, hãy nhấp vào nút "Triển khai". Sau đó nhấp vào nút Kiểm tra -> Định cấu hình sự kiện kiểm tra sẽ mở ra hộp thoại cấu hình kiểm tra nơi bạn có thể tạo một sự kiện kiểm tra mới.
Trong trình chỉnh sửa nội dung sự kiện thử nghiệm, hãy nhập JSON sau đây bắt chước những gì cuối cùng sẽ đến từ yêu cầu trình duyệt của chúng tôi. Sau đó nhấp vào tạo.
{
"body": {
"senderName": "Namo",
"senderEmail": "[email protected]",
"message": "I love trains!"
}
}
Bây giờ nhấp vào nút kiểm tra sẽ chạy thử nghiệm mà chúng tôi vừa tạo. Nó sẽ mở một tab mới trong trình chỉnh sửa để hiển thị cho chúng tôi nhật ký được tạo từ việc chạy chức năng, trông giống như sau:
Lưu ý rằng đối tượng sự kiện mà chúng tôi đã đăng xuất hiển thị ở đây trong Nhật ký hàm với dữ liệu nội dung mà chúng tôi đã sử dụng trong sự kiện thử nghiệm.
Bài kiểm tra này cũng nên gửi một email đến hộp thư đến của tôi - hãy xem điều đó có xảy ra không.
Đúng, đúng như mong đợi. Và điều đó xảy ra gần như ngay lập tức sau khi chạy thử nghiệm.
Bây giờ, hãy sửa đổi mã chức năng của chúng ta để nhận được thông báo có ý nghĩa hơn từ dữ liệu thử nghiệm.
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();
};
Điều quan trọng cần lưu ý là khi API Gateway gọi hàm của chúng ta, nó sẽ chuyển một chuỗi đến phần nội dung sự kiện. Đây là lý do tại sao tôi sử dụng JSON.parse trên event.body, để biến nó thành JSON và trích xuất email, tên và tin nhắn của người gửi của chúng tôi. Sau đó, tôi sử dụng các biến đó trong văn bản nội dung email và chủ đề bằng cách sử dụng nội suy chuỗi.
Nếu bạn thử kiểm tra nó, mã sẽ trả về một lỗi. Điều này là do thử nghiệm đang chuyển một đối tượng JSON tới event.body và chúng tôi đang sử dụng JSON.parse trên JSON, điều này gây ra lỗi trong JavaScript.
Đáng buồn thay, trình chỉnh sửa thử nghiệm không cho phép chúng tôi chuyển các chuỗi đến sự kiện, vì vậy chúng tôi sẽ phải kiểm tra điều đó sau từ một nơi khác.
Bước 3:Cách thiết lập API Gateway
Tiếp theo, dịch vụ AWS cuối cùng mà chúng tôi sẽ sử dụng là API Gateway, sẽ cho phép trình duyệt của chúng tôi gửi các yêu cầu HTTP đến hàm Lambda mà chúng tôi đã tạo.
Không rời khỏi trang hàm lambda của bạn, hãy mở rộng phần "Tổng quan về hàm" và nhấp vào "Thêm trình kích hoạt".
Tiếp theo, chọn API Gateway từ menu thả xuống, HTTP API làm loại API, "Mở" làm cơ chế bảo mật và chọn tùy chọn hộp kiểm CORS. Sau đó nhấp vào "Thêm".
Bạn sẽ được chuyển hướng đến tab "Cấu hình" trong chức năng của mình, hiển thị cho bạn trình kích hoạt API Gateway mới mà bạn vừa tạo. Từ đó, hãy lưu ý đến điểm cuối API . Đây là URL mà chúng tôi sẽ gọi từ trình duyệt của chúng tôi với dữ liệu biểu mẫu.
Quay lại HTML
Cuối cùng, chúng tôi có thể kiểm tra biểu mẫu để xem nó có gửi email hay không.
Hãy sửa đổi JavaScript của chúng tôi để xử lý việc gửi yêu cầu khi biểu mẫu được gửi.
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.";
});
});
Bây giờ, thời điểm của sự thật:điền vào biểu mẫu và nhấp vào gửi. Nếu bạn thấy thông báo thành công, điều đó có nghĩa là email đã được gửi.
Vì tôi sở hữu email mà tin nhắn được gửi đến, tôi xem nhanh hộp thư đến để thấy rằng tôi đã nhận được email từ chính mình với các chi tiết tôi đã sử dụng trong biểu mẫu!
Nếu bạn đã theo dõi, bạn hiện có một biểu mẫu "Liên hệ với chúng tôi" đang hoạt động mà bạn có thể kết nối với bất kỳ trang web nào. Và bạn sẽ chỉ được lập hóa đơn khi nó thực sự được sử dụng.
Tôi không biết về bạn, nhưng tôi nghĩ điều này khá tuyệt vời và gần như kỳ diệu! Và đó là một cách hay, thiết thực để sử dụng dịch vụ / điện toán đám mây trong quy trình làm việc của bạn.
Tất nhiên, bạn có thể tùy chỉnh quy trình này bằng cách sử dụng một khuôn khổ trên giao diện người dùng như React hoặc Vue hoặc một ngôn ngữ lập trình khác cho Lambda như Python hoặc Go.
Trước khi bạn đi ...
Cảm ơn bạn đã đọc đến đây! Tôi viết các bài đăng về JavaScript, phát triển đám mây và kinh nghiệm giáo dục và chuyên môn cá nhân của tôi với tư cách là một nhà phát triển tự học. Vì vậy, hãy thoải mái theo dõi tôi trên twitter @adham_benhawy, nơi tôi cũng tweet về họ!
Tài nguyên
- 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