अपनी साइट से ईमेल कैसे प्राप्त करें AWS SES, लैम्ब्डा, और API गेटवे का उपयोग करके हमसे संपर्क करें फ़ॉर्म

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

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

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

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

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

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

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

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

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

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

HTML फ़ॉर्म

मैं इसे यहां बहुत सरल रखूंगा और बिना किसी सीएसएस के एक मूल 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 => {
  // 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)
  
})

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

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

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

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

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

हम API गेटवे का भी उपयोग करेंगे जो हमें HTTP के माध्यम से लैम्ब्डा फ़ंक्शन को लागू करने में सक्षम बनाता है।

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

1. हमारा ब्राउज़र (जावास्क्रिप्ट) एडब्ल्यूएस एपीआई गेटवे द्वारा निर्दिष्ट एक एंडपॉइंट यूआरएल के लिए अनुरोध बॉडी में फॉर्म डेटा के साथ एक पोस्ट अनुरोध करेगा
2. एपीआई गेटवे इस अनुरोध को मान्य करेगा। फिर यह लैम्ब्डा फ़ंक्शन को ट्रिगर करेगा जो एक ईवेंट पैरामीटर स्वीकार करता है। एपीआई गेटवे फॉर्म डेटा को इवेंट पैरामीटर की बॉडी प्रॉपर्टी में डाल देगा।
3. हमारा लैम्ब्डा फ़ंक्शन इवेंट बॉडी से डेटा निकालेगा और फिर हम इस डेटा का उपयोग उस ईमेल के बॉडी बनाने के लिए करेंगे जिसे हम भेजना चाहते हैं और साथ ही इसके प्राप्तकर्ता भी। हमारा कार्य तब ईमेल डेटा के साथ एसईएस को लागू करने के लिए एडब्ल्यूएस एसडीके का उपयोग करेगा।
4. एक बार एसईएस को मेल भेजें . मिल जाता है अनुरोध, यह ईमेल डेटा को एक वास्तविक टेक्स्ट ईमेल में बदल देता है और इसे प्राप्तकर्ता को AWS के अपने मेल सर्वर के माध्यम से भेजता है।

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

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

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

सबसे पहले अपने एडब्ल्यूएस कंसोल में, एसईएस सेवा पर जाएं -> फिर साइड मेनू में ईमेल पते पर क्लिक करें -> फिर "नया ईमेल पता सत्यापित करें" बटन पर क्लिक करें।

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

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

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

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

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

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

चरण 2:लैम्ब्डा कैसे सेट करें

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

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

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

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

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

अपने एडब्ल्यूएस कंसोल से, आईएएम सेवा पर जाएं -> साइड मेनू में नीतियां पर क्लिक करें -> फिर "नीति बनाएं" बटन पर क्लिक करें।

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

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

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

अब हम एक IAM भूमिका बनाते हैं जो लैम्ब्डा से जुड़ा होगा और इसे हमारे द्वारा अभी बनाई गई अनुमति नीति से लिंक करेगा।

IAM साइड मेन्यू से, रोल्स पर क्लिक करें और फिर "क्रिएट रोल" बटन पर क्लिक करें।

भूमिका निर्माण स्क्रीन में, सुनिश्चित करें कि चयनित प्रकार "एडब्ल्यूएस सेवा" है और लैम्ब्डा केस का चयन करें और फिर "अगला:अनुमतियां" बटन पर क्लिक करें।

अगली स्क्रीन पर, हमारे द्वारा पहले बनाई गई पॉलिसी को उसके नाम से खोजें और उसका चयन करें, फिर अगला क्लिक करें।

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

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

फ़ंक्शन निर्माण स्क्रीन में, अपने फ़ंक्शन को नाम दें, "स्क्रैच से लेखक" विकल्प चुनें, और रनटाइम के रूप में 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 पर हम एडब्ल्यूएस एसडीके का उपयोग कर रहे हैं और एसईएस इंस्टेंस बना रहे हैं। कारण मैंने us-east-1 . चुना क्षेत्र इसलिए है क्योंकि वह जहां मैंने अपना ईमेल पंजीकृत और सत्यापित किया है . ईमेल को बदलना सुनिश्चित करें और उस एडब्ल्यूएस क्षेत्र का उपयोग करें जहां आपने अपना ईमेल पंजीकृत किया था।

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

टेस्ट इवेंट बॉडी एडिटर में, निम्नलिखित 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();
};

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

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

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

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

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

अपने लैम्ब्डा फ़ंक्शन पृष्ठ को छोड़े बिना, "फ़ंक्शन अवलोकन" अनुभाग का विस्तार करें और "ट्रिगर जोड़ें" पर क्लिक करें।

इसके बाद, ड्रॉपडाउन से एपीआई गेटवे चुनें, एपीआई प्रकार के रूप में HTTP एपीआई, सुरक्षा तंत्र के रूप में "ओपन" चुनें, और सीओआरएस चेकबॉक्स विकल्प की जांच करें। फिर "जोड़ें" पर क्लिक करें।

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

HTML पर वापस जाएं

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

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

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.";
    });
});

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

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

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

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

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

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

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