JavaScript से ईमेल भेजना

JavaScript ईमेल सर्वर से भेजता है, कभी सीधे ब्राउज़र से नहीं।

JavaScript ईमेल सर्वर से भेजता है, कभी सीधे ब्राउज़र से नहीं। क्लाइंट-साइड कोड किसी भी तरह SMTP कनेक्शन नहीं खोल सकता, और पेज में ईमेल क्रेडेंशियल रखने से वे हर उस व्यक्ति को मिल जाएँगे जो डेव टूल्स खोलता है। इसलिए असली सवाल यह है कि कौन-सा सर्वर-साइड तरीका अपनाएँ: Nodemailer जैसी लाइब्रेरी के ज़रिए SMTP, या किसी ईमेल API को HTTP अनुरोध। यह पोस्ट दोनों तरीके दिखाती है।

ब्राउज़र ईमेल क्यों नहीं भेज सकता?

ईमेल डिलीवरी SMTP पर चलती है, जो एक TCP प्रोटोकॉल है। ब्राउज़र JavaScript को रॉ TCP सॉकेट उपलब्ध नहीं कराते, इसलिए क्लाइंट-साइड से मेल सर्वर से बात करने का कोई तरीका नहीं है। अगर ऐसा तरीका होता भी, तो SMTP क्रेडेंशियल या API कुंजी ऐसे कोड में होती जिसे कोई भी पढ़ सकता है। ब्राउज़र फ़ॉर्म इनपुट इकट्ठा करके आपके बैकएंड को भेजता है, और बैकएंड ईमेल भेजता है। पूरा पैटर्न इसी बँटवारे पर टिका है।

Node बैकएंड से SMTP के ज़रिए ईमेल कैसे भेजें?

Node में SMTP के लिए Nodemailer मानक लाइब्रेरी है। आप एक बार ट्रांसपोर्ट कॉन्फ़िगर करते हैं, फिर sendMail कॉल करते हैं:

import nodemailer from "nodemailer";

const transporter = nodemailer.createTransport({
  host: "smtp.example.com",
  port: 587,
  secure: false,
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

await transporter.sendMail({
  from: "you@yourdomain.com",
  to: "recipient@example.org",
  subject: "Your receipt",
  text: "Thanks for your order.",
  html: "<p>Thanks for your order.</p>",
});

यह लगातार चलने वाले सर्वर पर अच्छी तरह काम करता है। अटैचमेंट और लोकल टेस्टिंग सहित पूरी जानकारी Nodemailer से ईमेल भेजना में है।

HTTP ईमेल API से ईमेल कैसे भेजें?

दूसरा तरीका HTTP अनुरोध है। आपका बैकएंड fetch के साथ किसी ईमेल API को कॉल करता है। इससे आपको मेल सर्वर नहीं चलाना पड़ता, और यह पारंपरिक होस्ट और सर्वरलेस फ़ंक्शन दोनों पर एक जैसा काम करता है:

const res = await fetch("https://api.bird.com/v1/emails", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.BIRD_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    from: "you@yourdomain.com",
    to: "delivered@bird.dev",
    subject: "Hello from JavaScript",
    html: "<p>It works.</p>",
  }),
});

if (!res.ok) {
  throw new Error(`Send failed: ${res.status}`);
}

कुंजी फिर भी सर्वर पर, एक एनवायरनमेंट वेरिएबल में रहती है, और क्लाइंट तक कभी नहीं भेजी जाती।

Bird से भेजें

Bird Node SDK उसी HTTP कॉल को रैप करता है, इसलिए आपको मैन्युअल fetch नहीं लिखना पड़ता और आपको टाइप किए गए परिणाम मिलते हैं:

import { BirdClient } from "@messagebird/sdk";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const { data, error } = await bird.email
  .send({
    from: "you@yourdomain.com",
    to: ["delivered@bird.dev"],
    subject: "Hello from Node",
    html: "<p>It works.</p>",
  })
  .safe();

delivered@bird.dev सैंडबॉक्स पता हमेशा मेल स्वीकार करता है, इसलिए पहली बार चलाने पर ही पुष्टि हो जाती है कि आपका सेटअप सही है। अगर आप अपने ईमेल का मुख्य भाग React कंपोनेंट के रूप में बनाते हैं, तो इसके साथ React Email का उपयोग करें। यह कंपोनेंट को उस HTML में रेंडर करता है जिसे आप html में भेजते हैं।

अक्सर पूछे जाने वाले प्रश्न

क्या क्लाइंट-साइड JavaScript ईमेल भेज सकता है?

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

मुझे Nodemailer का उपयोग करना चाहिए या किसी HTTP API का?

Nodemailer लंबे समय तक चलने वाले ऐसे सर्वर के लिए उपयुक्त है जहाँ SMTP आपके नियंत्रण में हो। अगर आप मेल सर्वर चलाने से बचना चाहते हैं, तो HTTP API अधिक सरल है। सर्वरलेस प्लेटफ़ॉर्म पर, जहाँ SMTP सॉकेट उपलब्ध नहीं होते, यही भरोसेमंद विकल्प है।

मैं API कुंजी कहाँ रखूँ?

सर्वर-साइड एनवायरनमेंट वेरिएबल में, जिसे रनटाइम पर पढ़ा जाए। यह कुंजी फ्रंट-एंड कोड या किसी सार्वजनिक रिपॉज़िटरी में कभी नहीं होनी चाहिए।

JavaScript अपने आप मेल डिलीवर नहीं करता; यह काम सर्वर करता है। API वाले तरीके के बारे में और जानने के लिए ईमेल प्रोडक्ट का अवलोकन और ईमेल भेजने की गाइड देखें, जिनमें सभी हिस्से शामिल हैं।

उसी नेटवर्क पर बनाएँ।

एक टेस्ट API key आपको तुरंत मिल जाती है। भुगतान विधि जोड़ने और सेंडर सत्यापित करने पर प्रोडक्शन अनलॉक होता है।

आपका अगला आइडिया। जुड़ने के लिए तैयार।