ساختن یک جریان تأیید ایمیل با Sailhouse ، NetLify و دوباره ارسال کنید

TL ؛ DR: من یک سیستم تأیید ایمیل منبع باز را با استفاده از معماری رویداد Sailhouse و توابع بدون سرور NetLify ، با استفاده از RESEND برای ایمیل ها ساختم. آن را بگیرید ، آن را هک کنید ، از آن استفاده کنید! github.com/sailhouse/email-confirmation

1. مقدمه: چرا تأیید ایمیل مهم است

این یکی از مواردی است که هر پروژه به آن احتیاج دارد ، اما هیچ کس به ویژه از اجرای آن هیجان زده نیست. این جریان ها موارد مهمی را انجام می دهند:

• آنها رباتها را متوقف می کنند (بیشتر)
• شما را در سمت راست قوانین حفظ حریم خصوصی نگه دارید
• به کاربران نشان دهید که نمی خواهید آنها را به فراموشی بپردازید
• به حفظ لیستی از افرادی که در واقع ایمیل های شما می خواهند کمک کنید

بعد از 20 سال کار با این کارها (و دیدن آنها در تولید 😅) ، من چیزی ساده می خواستم که فقط بدون اینکه سردرد دیگری شود ، کار کند.

2. ملاحظات تأیید ایمیل مشترک

بیایید در مورد آنچه همه ما هنگام نزدیک شدن به این مشکل فکر می کنیم واقعی باشیم:

• “آیا من واقعاً نیاز به ساخت دوباره این کار دارم؟” – ساخت ابدی در مقابل خرید معضل
• “این نباید خیلی پیچیده باشد” – با این حال به نوعی ، همیشه است
• “من نمی خواهم در هر ماه فقط برای تأیید بپردازم” – مخصوصاً برای پروژه های جانبی
• “من به پلت فرم هک کردن CRM/رشد نیاز ندارم” – یک راه حل سبک تر برای پیام های اطلاع رسانی می تواند کافی باشد
• “اما من به آن نیاز دارم تا با پرونده عجیب و غریب من کار کنم” – زیرا الزامات هرگز استاندارد نیستند
• “من بدون کابوس تعمیر و نگهداری می خواهم” – رویای توسعه دهنده

سرانجام تصمیم گرفتم چیزی قابل استفاده مجدد بسازم. حرکت کلاسیک توسعه دهنده ، درست است؟ “من در طولانی مدت وقت صرفه جویی می کنم!” 🙃 اما من از انجام این کار لذت بردم. بنابراین وجود دارد

3. قدرت معماری رویداد محور با Sailhouse

معماری رویداد محور یکی از آن رویکردهایی است که پس از امتحان کردن آن فقط منطقی است:

• مؤلفه ها از طریق رویدادها صحبت می کنند ، نه تماس های مستقیم – از راه کمتر “شما API خود را تغییر دادید و چیزهای من را شکستید” لحظات
• اگر یک قسمت شکسته شود ، کل سیستم لزوماً فروپاشیده نمی شود
• سنبله های ترافیکی را با لطف انجام می دهد – رویدادها فقط صف بالا می روند
• این حتی می تواند سیستم را آسان تر کند – “این اتفاق می افتد ، پس از آن اتفاق می افتد”

ما Sailhouse را ساختیم تا این نوع معماری را بدون نیاز به دکترا در سیستم های توزیع شده در دسترس قرار دهیم. این زیرساخت هایی است که هر دو آرزو می کنیم برای دهه گذشته پروژه ها داشته باشیم.

4. بررسی اجمالی معماری راه حل 🏗

در اینجا آنچه در زیر کاپوت اتفاق می افتد است:

• خانه دریا: تمام رویداد عبور و توالی را انجام می دهد
• توابع netLify: بیت های بدون سرور سبک که رویدادها را پردازش می کنند
• وقایع برای دولت: به پایگاه داده لازم نیست – جریان رویداد خود حالت را حفظ می کند
• تحویل ایمیل قابل انعطاف: برای ارسال ایمیل با هر آنچه استفاده می کنید کار می کند. در تولید ما از RESEND استفاده می کنیم.

از آنجا که ما از این استفاده می کنیم تا اشتراک را از طریق ایمیل به Changlog ما تأیید کنیم ، جریان بسیار ساده است:

1. کاربر ایمیل خود را ارسال می کند
2. ما آتش می زنیم changelog-subscription رویداد (مراحل 1 و 2 از وب سایت ما است)
3. Sailhouse این رویداد را پردازش می کند ، و یک اشتراک در Sailhouse برای پینگ یک عملکرد NetLify برای پردازش رویداد و ایجاد یک نشانه امن وجود دارد
4. ایمیل با لینک تأیید ارسال می شود
5. کاربر روی پیوند کلیک می کند (امیدوارم!)
6. سیستم نشانه را تأیید می کند و منتشر می کند changelog-confirmation، و آدرس ایمیل را ذخیره می کند
7. سپس ایمیل تأیید شده می تواند از طریق یک عملکرد دیگر ، یا مشترک شدن در رویدادها یا در واقع برای به روزرسانی Slack استفاده شود.

بدون پرس و جو SQL ، بدون مدیریت دولت پیچیده. رویدادها تمام راه را پایین می آورند!

اوه ، من باید ذکر کنم – ما برای ادامه داده های مشترک از فروشگاه NetLify Blob استفاده می کنیم. این یک ویژگی کوچک خوب است که NetLify از جعبه خارج می کند ، بنابراین ما نیازی به تنظیم یک پایگاه داده جداگانه نداریم. این رویدادها سیستم را هدایت می کنند ، و فروشگاه Blob به ما جایی می دهد تا داده ها را برای بازیابی یا پردازش بعدی به دست آوریم. برای چیزی که نیاز به راه اندازی صفر دارد ، به طرز حیرت انگیزی قدرتمند است!

5. برجسته های برجسته

من روی ساخت این هم محکم و هم سازگار با توسعه دهنده تمرکز کردم:

• همه چیز از طریق رویدادهای خوب تعریف شده ارتباط برقرار می کند
• نشانه ها به درستی تضمین شده اند (زیرا مسائل امنیتی)
• الگوهای ایمیل شما در واقع می توانید بدون مبارزه با سیستم سفارشی کنید. با تشکر از شما React-Email
• پیش فرض های معقول اما در جایی که حساب می شود قابل تنظیم است
• رسیدگی به خطا که شما را در ساعت 2 صبح اشکال زدایی نمی کند

سیستم با شروع می شود subscription-handler.ts عملکردی که رویدادهایی را از Sailhouse دریافت می کند و تأیید می کند که آنها واقعاً از Sailhouse بودند

const shSignature = req.headers.get('sh-signature');
if (!shSignature || shSignature !== sailhouseSignature) {
  return new Response('Unauthorized', { status: 403 });
}

این سرویس برای ایجاد الگوهای ایمیل پاسخگو و قابل تنظیم از ایمیل React استفاده می کند:

// In ConfirmationEmail.tsx
export const ConfirmationEmail: React.FC<ConfirmationEmailProps> = ({
  confirmationUrl, // Generated for you with an encoded token
  mailingListName, // Name of the list - we used Changlog here
  companyName,     // Name to be used in the email subject line - we use Sailhouse here
  baseUrl,         // url of your site
}) => {
  // Email template with your brand's styling
}

ابزار ایمیل از چندین ارائه دهنده با انتزاع ساده پشتیبانی می کند:

// In email.ts
export const sendConfirmationEmail = async (options: SendEmailOptions): Promise<boolean> => {
  const provider = getEmailProvider();
  switch (provider) {
    case 'postmark':
      return sendWithPostmark(options);
    case 'resend':
      return sendWithResend(options);
    default:
      console.error('No email provider configured');
      return false;
  }
};

وقتی کاربران روی پیوند تأیید کلیک می کنند ، confirm.ts عملکرد روند کار را انجام می دهد و اگر بتواند ایمیل را رمزگشایی کند ، یک رویداد تأیید را به Sailhouse منتشر می کند

await sailhouse.publish(process.env.CONFIRMATION_TOPIC || 'changelog-confirmation', {
email,
  confirmed: true,
  timestamp: new Date().toISOString(),
});

امنیت با جریان تأیید بسیار مهم است. من توکن های مبتنی بر HMAC را پیاده سازی کرده ام تا مطمئن شوم که هیچ کس نمی تواند پیوندهای تأیید ما را دستکاری کند.

  // Create HMAC signature
  const hmac = crypto.createHmac('sha256', process.env.TOKEN_SECRET);
  hmac.update(email);
  const signature = hmac.digest('hex');

  // Combine email and signature in the token
  const tokenData = {
    email,
    signature,
  };

این روش آدرس ایمیل را با امضای رمزنگاری ترکیب می کند ، بنابراین می توانیم تأیید کنیم که وقتی کاربر روی پیوند کلیک می کند ، دست به دست هم داده نشده است. و از آنجا که ما توسعه دهندگان هستیم که از ابزارهای خوب قدردانی می کنیم ، من حتی یک اسکریپت ابزار برای آزمایش تولید و تأیید در طول توسعه نیز درج کردم.

برای ذخیره مشترکان تأیید شده ، من در حال استفاده از فروشگاه NetLify Blob هستم که بدون هیچ گونه تنظیم پایگاه داده به ما پایداری می دهد:

  await blobStore.setJSON(email, {
    email,
    timestamp,
  });

کد به گونه ای طراحی شده است که به راحتی قابل تنظیم باشد:

• متغیرهای محیطی ارائه دهندگان ایمیل ، اطلاعات فرستنده و موضوعات را کنترل می کنند
• الگوهای HTML و React را می توان اصلاح کرد تا با سبک شرکت شما برای صفحات وب و ایمیلی که ارسال می شود مطابقت داشته باشد
• مباحث Sailhouse را می توان تنظیم کرد تا متناسب با طرح رویداد شما باشد

6. نقاط سفارشی سازی سازگار با توسعه دهنده

در اینجا سرگرم کننده است – این چیز به گونه ای طراحی شده است که هک شود:

• راه اندازی فوق العاده سریع: کلون repo ، به NetLify متصل شوید ، اشتراک از Sailhouse را که به سایت خود در NetLify اشاره می کند ، تنظیم کنید و به معنای واقعی کلمه در کمتر از 5 دقیقه انجام می شوید. حتی اغراق آمیز نیست.
• پیکربندی ساده: فقط کپی کنید .env.example و ارزش های خود را رها کنید. حتی می توانید نام موضوع رویداد را تغییر دهید.
• الگوهای ایمیل: آنها فقط با برخی از غرفه های اساسی منتقل شده واکنش نشان می دهند. هیچ موتور الگوی فانتزی برای یادگیری وجود ندارد. آیا می خواهید آرم و رنگ های خود را اضافه کنید؟ فقط آن را انجام دهید!
• منطق خود را اضافه کنید: الگوی مشترکین باعث می شود که پس از وقوع تأیید ، گسترش آن ساده شود

من ردیابی Analytics ، به روزرسانی های CRM و حتی یک دنباله خوش آمدید ویژه برای دامنه های خاص را اضافه کرده ام – همه بدون لمس کد اصلی. این زیبایی طراحی رویداد محور است.

برای نشان دادن این موضوع ، من همچنین در یک ویژگی گزارش خلاصه ساختم که به روزرسانی ها را به Slack ارسال می کند. این برای پیگیری مشترکان جدید بدون نیاز به ورود به داشبورد دیگر بسیار مفید است. نکته جالب این است که همه این اتفاق به طور خودکار با استفاده از یک کار دریایی Sailhouse اتفاق می افتد. شما فقط یک رویداد مکرر را در Sailhouse تنظیم کرده اید که باعث می شود این عملکرد روزانه اجرا شود و رونق – گزارش خودکار!
و می خواهید ارائه دهندگان ایمیل را تغییر دهید؟ آسان این سیستم از هر دو پست پشتیبانی می کند و از جعبه خارج می شود و اضافه کردن دیگری فقط موضوع اجرای یک عملکرد واحد است که از این الگوی پیروی می کند. فقط یک متغیر محیط را تغییر دهید تا ارائه دهندگان را تغییر دهید – بدون تغییر کد مورد نیاز است.
اوه ، و اگر تعجب می کنید که ادغام NetLify چگونه کار می کند – این کار را انجام می دهد! این سرویس به طور خودکار از شیء متن NetLify برای تعیین URL سایت شما استفاده می کند ، بنابراین هیچ پیکربندی لازم نیست. یک چیز کمتر برای نگرانی

7. فراتر از تأیید ایمیل: سایر موارد جالب که می توانید بسازید

پس از پایین آمدن این الگوی ، می توانید آن را در تن از جریان های دیگر اعمال کنید:

• جریان Auth دو عاملی: “کدی را که فقط برای شما ارسال کرده ایم وارد کنید”
• مدیریت اولویت: “برای به روزرسانی تنظیمات خود اینجا را کلیک کنید”
• زنجیره های تصویب: “باب قبل از ادامه کار باید این کار را تأیید کند”
• سیستم های اعلان: “اتفاقی افتاد که شما به آن اهمیت می دهید”

مهمترین قسمت این است که برای این موارد استفاده ، کد کمی لازم دارید. الگوی رویداد محور به زیبایی با مشکلات مختلف مقیاس می شود.

8. چرا این کار را در Sailhouse ساختیم

لحظه کاملاً صادقانه – ما این کار را به چند دلیل ساختیم:

• غذای سگ خودمان: هیچ چیز یک سکوی مانند استفاده از آن را آزمایش نمی کند. بله من آن را شکستم. این انجام چنین کارهایی اجباری است
• خارش خودمان: ما به هر حال به این مورد نیاز داشتیم
• به اشتراک گذاری چیز مفید: چرا برای دیگران در آنجا مفید نیستید؟
• نشان دادن الگوهای رویداد محور: برای این جریان ها به طرز شگفت آور ظریف است
• یادگیری از استفاده واقعی: ساختن چیزهای واقعی به شما می آموزد که چه چیزی مهم است

این یک برنامه عالی برای ایجاد راه حل نهایی تأیید ایمیل نبود – این فقط ما یک مشکل مشترک را به روشی که معقول باشد حل می کنیم ، سپس فکر می کنیم “سلام ، دیگران ممکن است این موضوع را نیز مفید بدانند.”

9. شروع کار

می خواهید آن را امتحان کنید؟ فوق العاده ساده است:

1. Fork the Repo: github.com/sailhouse/email-confirmation
2. متغیرهای محیط خود را تنظیم کنید
3. دکمه Deploy NetLify Deploy را بزنید (یا آن را به پلت فرم بدون سرور مورد نظر خود وصل کنید)
4. اشتراک فشار را در Sailhouse تنظیم کنید
5. برای امتیازات جایزه ، یک کار کرون خانه Sailhouse را تنظیم کنید تا گزارش های خلاصه روزانه را تحریک کند:
   • یک ماشه کرون را در Sailhouse ایجاد کنید (به عنوان مثال ، روزانه ساعت 9 صبح)
   • آیا آن را به موضوعی منتشر کنید که دارای فشار فشار به شما باشد /api/summary نقطه پایانی
   • پیکربندی CONFIRMATION_SUBSCRIPTION متغیر محیط برای اشاره به اشتراک شما
6. استفاده از رویدادهای برنامه خود را شروع کنید

یک اشکال پیدا کردید؟ ایده ای برای بهبود دارید؟ PRS کاملاً استقبال می شود! این یک ابزار جامعه است ، بنابراین به بهتر شدن آن کمک کنید.

10. بسته بندی

تأیید ایمیل مهیج ترین قسمت برنامه شما نیست ، اما این یکی از آن بخش های مهم زیرساخت ها است که باید جامد سنگ باشد. این راه حل یک روش سبک و مقیاس پذیر را به شما می دهد که می توانید در چند دقیقه تنظیم کنید و به محتوای قلب خود سفارشی کنید.

معماری محور رویداد ، گسترش ، اشکال زدایی و دلیل آن را بسیار آسان می کند – این بدان معنی است که زمان کمتری با زیرساخت ها و ساخت زمان بیشتری برای ساختن چیزهایی که محصول شما را منحصر به فرد می کند ، می باشد.

به آن چرخش دهید ، آن را به قطعات هک کنید ، آن را خودتان درست کنید! و قطعاً به من اطلاع دهید که با آن چه می کنید – من عاشق دیدن چگونگی گسترش و بهبود این الگوهای هستم.

برنامه نویسی مبارک!