AWS SES, Lambda और API Gateway के साथ संपर्क फ़ॉर्म ईमेल को सुरक्षित रूप से प्राप्त करें

परिचय

हाल ही में मैं एक क्लाइंट के लिए एक साधारण लैंडिंग पेज वेबसाइट बना रहा था जो अपनी वेबसाइट के माध्यम से ईमेल प्राप्त करना चाहते थे, बिना अपना ईमेल पता साझा किए।

ईमानदारी से कहूं तो मैंने पहले कभी खुद इस कार्यक्षमता को लागू करने की कोशिश नहीं की थी। मैं हमेशा एक साधारण "Contact Us" बटन का उपयोग करता था जिसमें एंकर टैग और mailto लिंक होता था:

<button> <a href="mailto:myemail@example.com">Contact Me</a> </button>

लेकिन इस दृष्टिकोण की दो असुविधाएं हैं:

1. यह दोनों पक्षों - संदेश भेजने वाला उपयोगकर्ता और साइट मालिक जो इसे प्राप्त करता है - को एक-दूसरे के साथ अपना ईमेल साझा करने के लिए मजबूर करता है। हालांकि यह कुछ के लिए ठीक है, लेकिन गोपनीयता के प्रति जागरूक व्यक्तियों के लिए आदर्श नहीं है।
2. साइट विज़िटर के लिए, लिंक पर क्लिक करने से उन्हें अपने डिवाइस पर डिफ़ॉल्ट मेल प्रोग्राम खोलने के लिए मजबूर होना पड़ता है, और यह निराशाजनक हो सकता है। क्या होगा यदि वे पब्लिक कंप्यूटर का उपयोग कर रहे हैं? क्या होगा यदि वे लॉग इन नहीं हैं? क्या होगा यदि वे बस अपने मेल प्रोग्राम का उपयोग नहीं करना चाहते हैं?
   तकनीकी रूप से वे केवल प्राप्तकर्ता का ईमेल पता ले सकते हैं और अपने ब्राउज़र या जहां भी वे लॉग इन हैं, के माध्यम से संदेश भेज सकते हैं। लेकिन ये सभी अतिरिक्त चरण और बाधाएं हैं जो उपयोगकर्ताओं को अपने संदेश भेजने से हतोत्साहित कर सकती हैं और व्यवसाय संभावित फीडबैक या अवसरों को खो सकता है।

इसी कारण से, हमने एक ईमेल फ़ॉर्म के साथ जाने का फैसला किया, जिससे उपयोगकर्ता बस अपना संदेश लिख सकें और सबमिट पर क्लिक करें, बिना वेबसाइट छोड़े साइट के मालिक को एक ईमेल भेज सकें।

एक त्वरित Google खोज से पता चलता है कि ऐसे थर्ड-पार्टी टूल/विजेट हैं जिन्हें आप वेबसाइट में एम्बेड कर सकते हैं, लेकिन उनमें से अधिकांश ब्रांडेड हैं और पूर्ण अनुकूलन के लिए पेड सब्सक्रिप्शन की आवश्यकता होती है।

और जब तक आप वर्डप्रेस जैसे CMS का उपयोग नहीं कर रहे हैं जिसमें एक अंतर्निहित प्लगइन है जो ऐसा कर सकता है, यह एक असुविधाजनक आवर्ती लागत है।

मैंने इसके बजाय उस फीचर को स्वयं कोड करने का फैसला किया ताकि मेरा इस पर पूरा नियंत्रण हो।

इस गाइड के उद्देश्यों के लिए, मैं HTML और AWS सेवाओं का उपयोग करके उस कार्यक्षमता को लागू करने के लिए उठाए गए चरणों को फिर से बनाऊंगा।

HTML फ़ॉर्म

मैं इसे यहां सुपर सिंपल रखूंगा और बिना CSS के एक बुनियादी HTML फ़ॉर्म के साथ जाऊंगा, बस हमारी वांछित कार्यक्षमता का परीक्षण करने के लिए।

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

अब हम जावास्क्रिप्ट के साथ सबमिट कार्यक्षमता को संभालना चाहते हैं।

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // फॉर्म सबमिट को पेज रीफ्रेश करने से रोकें
  event.preventDefault()
  const { name, email, message } = event.target
  console.log('Name: ', name.value)
  console.log('email: ', email.value)
  console.log('Message: ', message.value)
})

इस बिंदु पर, हमारे पास एक फ़ॉर्म है जो उपयोगकर्ता से इनपुट प्राप्त करता है और जावास्क्रिप्ट कोड जो केवल कंसोल पर परिणाम प्रदर्शित करता है।

हम इसे अभी के लिए छोड़ सकते हैं और उन बैकएंड सेवाओं पर काम करना शुरू कर सकते हैं जो फ़ॉर्म डेटा प्राप्त करेंगे और उस डेटा के साथ एक ईमेल भेजेंगे।

बैकएंड अवलोकन

आइए AWS में गोता लगाएं और देखें कि हम किन सेवाओं का उपयोग करने जा रहे हैं और कैसे।

शीर्षक में उल्लिखित अनुसार, हम AWS Lambda और Simple Email Service (SES) का उपयोग करेंगे। SES एक सर्वरलेस मैसेजिंग सेवा है जो आमंत्रित होने पर ईमेल संदेश भेजने की अनुमति देती है। AWS Lambda आपको सर्वर-साइड कोड लिखने की अनुमति देता है जो घटनाओं के जवाब में निष्पादित होता है।

हम API Gateway का भी उपयोग करेंगे जो हमें HTTP के माध्यम से Lambda फ़ंक्शन को आमंत्रित करने में सक्षम बनाता है।

इस मामले में, जब हमारा फ़ॉर्म सबमिट होता है, तो निम्नलिखित वर्कफ़्लो होगा:

1. हमारा ब्राउज़र (जावास्क्रिप्ट) AWS API Gateway द्वारा निर्दिष्ट एक एंडपॉइंट URL पर फ़ॉर्म डेटा के साथ अनुरोध बॉडी में एक पोस्ट अनुरोध करेगा
2. API Gateway इस अनुरोध को मान्य करेगा। फिर यह Lambda फ़ंक्शन को ट्रिगर करेगा जो एक इवेंट पैरामीटर स्वीकार करता है। API Gateway फ़ॉर्म डेटा को इवेंट पैरामीटर के बॉडी गुण में रखेगा।
3. हमारा Lambda फ़ंक्शन इवेंट बॉडी से डेटा निकालेगा और फिर हम इस डेटा का उपयोग उस ईमेल के बॉडी को बनाने के साथ-साथ उसके प्राप्तकर्ताओं के लिए करेंगे। हमारा फ़ंक्शन तब ईमेल डेटा के साथ SES को आमंत्रित करने के लिए AWS SDK का उपयोग करेगा।
4. एक बार SES को sendMail अनुरोध मिल जाता है, यह ईमेल डेटा को एक वास्तविक टेक्स्ट ईमेल में बदल देता है और इसे AWS के अपने मेल सर्वर के माध्यम से प्राप्तकर्ता को भेजता है।

एक बार ईमेल भेजे जाने के बाद, हमारा ब्राउज़र स्टेटस कोड 200 और एक सफलता संदेश के साथ एक प्रतिक्रिया प्राप्त करेगा। यदि AWS क्लाउड में कोई भी चरण विफल होता है, तो प्रतिक्रिया में 500 स्टेटस कोड होगा।

चरण 1: SES कैसे सेट करें

हम वास्तव में इनमें से प्रत्येक चरण को रिवर्स ऑर्डर में सेट करने जा रहे हैं, SES से शुरू करके, जो आसान होने वाला है।

सबसे पहले अपने AWS कंसोल में, SES सेवा पर जाएं —> फिर साइड मेनू में Email Addresses पर क्लिक करें —> फिर "Verify a New Email Address" बटन पर क्लिक करें।

खुलने वाले डायलॉग में, वह ईमेल पता दर्ज करें जिसे आप SES सेवा को ईमेल भेजते समय प्रेषक के रूप में रखना चाहते हैं।

यह आपके द्वारा डाले गए ईमेल पते पर एक लिंक के साथ एक ईमेल भेजेगा जिसे क्लिक करके सत्यापित करना होगा। इस तरह AWS जानता है कि ईमेल का मालिक अपने ईमेल पते को प्रेषक पते के रूप में उपयोग करने के लिए सहमति देता है।

जब तक आप ईमेल सत्यापित नहीं करते, SES ईमेल डैशबोर्ड सत्यापन स्थिति को लंबित रखेगा।

एक बार ईमेल मालिक AWS से प्राप्त ईमेल को खोलता है और उसमें सत्यापन लिंक पर क्लिक करता है, तो सत्यापन स्थिति को सत्यापित में बदल जाना चाहिए (परिवर्तन देखने के लिए पेज को रीफ्रेश करें)।

और SES के लिए आपको बस इतना ही करना है। आप वैकल्पिक रूप से सूची में अपने सत्यापित ईमेल का चयन करके और "Send a Test Email" बटन पर क्लिक करके सेवा का परीक्षण कर सकते हैं। यह आपको एक प्राप्तकर्ता का ईमेल पता, एक विषय, और एक संदेश डालने और इसे भेजने देगा।

भेजा गया ईमेल AWS सर्वर द्वारा हस्ताक्षरित होने वाला है और आपका सत्यापित पता प्रेषक होना चाहिए। यह ऐसा दिखना चाहिए:

चरण 2: Lambda कैसे सेट करें

अब यह सबसे मजेदार हिस्सा है। हम एक फ़ंक्शन बनाने जा रहे हैं जो फ़ॉर्म डेटा प्राप्त करेगा और SES को कॉल करेगा।

Lambda फ़ंक्शन की सुंदरता यह है कि आपको अपने बैकएंड कोड को 24/7 सर्वर पर चलाने और उस सर्वर को बनाए रखने के बारे में चिंता करने की ज़रूरत नहीं है। यह सर्वरलेस है।

लेकिन इसका मतलब यह नहीं है कि इसमें कोई सर्वर शामिल नहीं हैं। AWS हुड के नीचे इसका ख्याल रखेगा ताकि आप केवल कोड लिखने पर ध्यान केंद्रित कर सकें, सर्वर बनाए रखने पर नहीं। इसके अतिरिक्त, आपसे केवल आपके फ़ंक्शन को कॉल किए जाने की संख्या और इसे निष्पादित होने में लगने वाले समय के लिए बिल लिया जाता है, और यह अविश्वसनीय रूप से सस्ता है!

IAM भूमिका बनाएं और कॉन्फ़िगर करें

इससे पहले कि हम अपना Lambda फ़ंक्शन लिखना शुरू करें, हमें एक IAM भूमिका बनाने की आवश्यकता है जिसे फ़ंक्शन से जोड़ा जाए और SES सेवा को आमंत्रित करने के लिए इसे अनुमतियां (AWS में नीतियों के रूप में संदर्भित) प्रदान की जाएं।

अपने AWS कंसोल से, IAM सेवा पर जाएं —> साइड मेनू में Policies पर क्लिक करें —> फिर "Create Policy" बटन पर क्लिक करें।

नीति निर्माण पृष्ठ पर, JSON टैब पर जाएं और निम्नलिखित अनुमतियां पेस्ट करें, फिर Next पर क्लिक करें।

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

तीसरी स्क्रीन में, नीति को नाम दें और "Create Policy" बटन पर क्लिक करें।

अब हम एक IAM भूमिका बनाते हैं जिसे Lambda से जोड़ा जाएगा और इसे उस अनुमति नीति से जोड़ा जाएगा जिसे हमने अभी बनाया है।

IAM साइड मेनू से, Roles पर क्लिक करें फिर "Create role" बटन पर क्लिक करें।

भूमिका निर्माण स्क्रीन में, सुनिश्चित करें कि चयनित प्रकार "AWS service" है और Lambda केस चुनें फिर "Next:Permissions" बटन पर क्लिक करें।

अगली स्क्रीन पर, पहले बनाई गई नीति को उसके नाम से खोजें और इसे चुनें, फिर Next पर क्लिक करें।

समीक्षा स्क्रीन पर, भूमिका को एक ऐसा नाम दें जिसे आप याद रख सकें फिर "Create role" पर क्लिक करें।

अब हम एक नया Lambda फ़ंक्शन बना सकते हैं। Lambda सेवा डैशबोर्ड पर जाएं और "Create Function" बटन पर क्लिक करें।

फ़ंक्शन निर्माण स्क्रीन में, अपने फ़ंक्शन का नाम दें, "Author from scratch" विकल्प चुनें, और रनटाइम के रूप में Node.js चुनें।

"Change default execution role" के तहत "Use an existing role" विकल्प चुनें फिर "Existing role" ड्रॉपडाउन से पिछले चरण में बनाई गई भूमिका का नाम चुनें।

अंत में, फ़ंक्शन बनाने के लिए "Create function" बटन पर क्लिक करें।

कोड लिखें और इसका परीक्षण करें

संपादक में, index.js फ़ाइल खोलें (यह वह फ़ाइल है जिसे आपके Lambda को कॉल किए जाने पर निष्पादित किया जाएगा), और इसकी सामग्री को निम्नलिखित कोड से बदलें:

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: ["your@email.com"],
    },
    Message: {
      Body: {
        Text: {
          Data: `Hello from Lambda!`
        },
      },
      Subject: {
        Data: `Message from AWS Lambda`
      },
    },
    Source: "your@email.com",
  };
  return ses.sendEmail(params).promise()
};

ध्यान दें कि लाइन 2 पर हम AWS SDK का उपयोग कर रहे हैं और एक SES इंस्टेंस बना रहे हैं। मैंने us-east-1 को क्षेत्र के रूप में चुना क्योंकि वहीं मैंने अपना ईमेल पंजीकृत और सत्यापित किया था। ईमेल को बदलना सुनिश्चित करें और उस AWS क्षेत्र का उपयोग करें जहां आपने अपना ईमेल पंजीकृत किया था।

अब इस फ़ंक्शन का परीक्षण करने के लिए, "Deploy" बटन पर क्लिक करें। फिर Test बटन पर क्लिक करें —> Configure test event जो एक टेस्ट कॉन्फ़िगरेशन डायलॉग खोलेगा जहां आप एक नया टेस्ट इवेंट बना सकते हैं।

टेस्ट इवेंट बॉडी एडिटर में, निम्नलिखित JSON दर्ज करें जो अंततः हमारे ब्राउज़र अनुरोध से आने वाली चीज़ की नकल करता है। फिर Create पर क्लिक करें।

{
  "body": {
    "senderName": "Namo",
    "senderEmail": "namo@trains.com",
    "message": "I love trains!"
  }
}

अब टेस्ट बटन पर क्लिक करने से हमारे द्वारा अभी बनाया गया टेस्ट चलेगा। यह संपादक में एक नया टैब खोलना चाहिए जो फ़ंक्शन चलाने से बने लॉग दिखाता है, जो ऐसा दिखना चाहिए:

ध्यान दें कि हमने जो इवेंट ऑब्जेक्ट लॉग किया था, वह यहां Function logs के तहत टेस्ट इवेंट में उपयोग किए गए बॉडी डेटा के साथ दिखाई देता है।

इस टेस्ट ने मेरे इनबॉक्स में एक ईमेल भी भेजा होगा - आइए देखें कि क्या ऐसा हुआ।

हां, उम्मीद के मुताबिक। और टेस्ट चलाने के लगभग तुरंत बाद ऐसा हुआ।

अब आइए अपने फ़ंक्शन कोड को टेस्ट डेटा से अधिक सार्थक संदेश प्राप्त करने के लिए संशोधित करें।

const aws = require("aws-sdk");
const ses = new aws.SES({ region: "us-east-1" });
exports.handler = async function (event) {
  console.log('EVENT: ', event)
  // इवेंट बॉडी से प्रॉपर्टी निकालें
  const { senderEmail, senderName, message } = JSON.parse(event.body)
  const params = {
    Destination: {
      ToAddresses: ["the.benhawy@gmail.com"],
    },
    // डेटा को स्ट्रिंग्स में इंटरपोलेट करें
    Message: {
      Body: {
        Text: {
          Data: `You just got a message from ${senderName} - ${senderEmail}: ${message}`
        },
      },
      Subject: {
        Data: `Message from ${senderName}`
      },
    },
    Source: "the.benhawy@gmail.com",
  };
  return ses.sendEmail(params).promise();
};

यह ध्यान रखना महत्वपूर्ण है कि जब API Gateway हमारे फ़ंक्शन को कॉल करता है तो यह इवेंट बॉडी में एक स्ट्रिंग पास करेगा। यही कारण है कि मैं JSON.parse का उपयोग event.body पर करता हूं, इसे JSON में बदलने और हमारे प्रेषक के ईमेल, नाम और संदेश को निकालने के लिए। फिर मैं उन चरों का उपयोग स्ट्रिंग इंटरपोलेशन का उपयोग करके ईमेल बॉडी टेक्स्ट और विषय में करता हूं।

यदि आप इसका परीक्षण करने का प्रयास करते हैं, तो कोड एक त्रुटि वापस करेगा। ऐसा इसलिए है क्योंकि टेस्ट इवेंट बॉडी में एक JSON ऑब्जेक्ट पास कर रहा है और हम JSON पर JSON.parse का उपयोग कर रहे हैं, जो जावास्क्रिप्ट में एक त्रुटि का कारण बनता है।

दुर्भाग्य से, टेस्ट एडिटर हमें इवेंट में स्ट्रिंग पास करने की अनुमति नहीं देता है, इसलिए हमें बाद में कहीं और से इसका परीक्षण करना होगा।

चरण 3: API Gateway कैसे सेट करें

अगला, अंतिम AWS सेवा जिसका हम उपयोग करने जा रहे हैं वह है API Gateway, जो हमारे ब्राउज़र को हमारे द्वारा बनाए गए Lambda फ़ंक्शन पर HTTP अनुरोध भेजने में सक्षम करेगा।

अपने Lambda फ़ंक्शन पेज को छोड़े बिना, "Function overview" सेक्शन का विस्तार करें और "Add trigger" पर क्लिक करें।

अगला, ड्रॉपडाउन से API Gateway चुनें, API प्रकार के रूप में HTTP API, सुरक्षा तंत्र के रूप में "Open", और CORS चेकबॉक्स विकल्प को चेक करें। फिर "Add" पर क्लिक करें।

आपको अपने फ़ंक्शन के "Configuration" टैब पर रीडायरेक्ट किया जाना चाहिए, जो आपके द्वारा अभी बनाए गए नए API Gateway ट्रिगर को दिखा रहा है। वहां से, API endpoint को नोट करें। यह वह URL है जिसे हम फ़ॉर्म डेटा के साथ अपने ब्राउज़र से कॉल करने जा रहे हैं।

HTML पर वापस

हम अंततः फ़ॉर्म का परीक्षण कर सकते हैं कि यह ईमेल भेजता है या नहीं।

आइए अपने जावास्क्रिप्ट को संशोधित करें ताकि जब फ़ॉर्म सबमिट हो तो अनुरोध भेजने को संभाला जा सके।

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  // फॉर्म सबमिट को पेज रीफ्रेश करने से रोकें
  event.preventDefault();
  const { name, email, message } = event.target;
  // पिछले चरण से कॉपी किया गया अपना API एंडपॉइंट URL उपयोग करें
  const endpoint = "https://5ntvcwwmec.execute-api.us-east-1.amazonaws.com/default/sendContactEmail";
  // हम JSON.stringify का उपयोग यहां करते हैं ताकि डेटा को 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 unknown error occurred.";
    });
});

अब, सच्चाई का क्षण: फ़ॉर्म भरें और सबमिट पर क्लिक करें। यदि आप सफलता संदेश देखते हैं, तो इसका मतलब है कि ईमेल भेजा गया था।

चूंकि मैं उस ईमेल का मालिक हूं जिसे संदेश भेजा गया था, मैं यह देखने के लिए अपने इनबॉक्स पर एक त्वरित नज़र डालता हूं कि मुझे फ़ॉर्म में उपयोग किए गए विवरणों के साथ खुद से एक ईमेल प्राप्त हुआ!

यदि आपने साथ पालन किया है, तो आपके पास अब एक कार्यशील "Contact Us" फ़ॉर्म है जिसे आप किसी भी वेबसाइट में प्लग इन कर सकते हैं। और आपसे केवल तभी बिल लिया जाएगा जब इसका वास्तव में उपयोग किया जाता है।

मुझे नहीं पता कि आपका क्या ख्याल है, लेकिन मुझे लगता है कि यह बहुत बढ़िया और लगभग जादुई है! और अपने वर्कफ़्लो में क्लाउड कंप्यूटिंग/सेवाओं का उपयोग करने का यह एक अच्छा, व्यावहारिक तरीका है।

बेशक आप इस फ्लो को फ्रंटएंड पर React या Vue जैसे फ्रेमवर्क का उपयोग करके या Lambda के लिए Python या Go जैसी विभिन्न प्रोग्रामिंग भाषा का उपयोग करके अनुकूलित कर सकते हैं।

जाने से पहले...

इतनी दूर पढ़ने के लिए धन्यवाद! मैं जावास्क्रिप्ट, क्लाउड डेवलपमेंट, और एक सेल्फ-टॉट डेवलपर के रूप में अपने व्यक्तिगत शैक्षिक और व्यावसायिक अनुभवों के बारे में पोस्ट लिखता हूं। तो बेझिझक मुझे ट्विटर @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