邮件订阅

MkSaaS 使用 Resend 进行邮件订阅管理。这种集成为您的用户提供了一种简单而强大的方式来管理邮件订阅。

设置

在 resend.com 创建 Resend 账户
点击 API Keys > Create API Key，设置权限为 Send emails 或 Full access，点击 Create API Key
为邮件订阅订阅者创建 Audience（或使用默认的 Audience），在 API 视图中获取 Audience ID
获取 API 密钥和 Audience ID，并添加到 .env 文件：

.env

RESEND_API_KEY=re_...
RESEND_AUDIENCE_ID=your_audience_id

更新网站配置以使用 Resend 进行邮件订阅：

src/config/website.tsx

export const websiteConfig = {
  // ...其他配置
  newsletter: {
    provider: 'resend', // 要使用的邮件订阅提供商
    autoSubscribeAfterSignUp: false, // 是否在用户注册后自动订阅
  },
  // ...其他配置
}

如果您正在设置环境，现在可以回到环境配置文档并继续。本文档的其余部分可以稍后阅读。

环境配置

设置环境变量

邮件订阅系统架构

MkSaaS 中的邮件订阅系统设计包含以下组件：

index.ts

types.ts

README.md

这种模块化结构使得为邮件订阅系统扩展新的服务提供商变得容易。

核心功能

邮件列表订阅和取消订阅管理
Resend 管理订阅者列表
检查订阅状态
新用户可选是否自动订阅
简单易用的 Email API
易于扩展和切换的模块化架构

使用方法

基本用法

MkSaaS 为邮件订阅管理提供简单的实用函数：

import { subscribe, unsubscribe, isSubscribed } from '@/newsletter';

// 为用户订阅邮件列表
const success = await subscribe('user@example.com');

// 为用户取消订阅邮件列表
const success = await unsubscribe('user@example.com');

// 检查用户是否已订阅
const subscribed = await isSubscribed('user@example.com');

与邮件模板一起使用

您可以将邮件订阅功能与邮件系统结合使用来发送确认邮件：

import { subscribe } from '@/newsletter';
import { sendEmail } from '@/mail';

export async function subscribeWithConfirmation(email: string) {
  // 订阅用户
  const success = await subscribe(email);

  if (success) {
    // 发送确认邮件
    await sendEmail({
      to: email,
      template: 'subscribeNewsletter',
      context: {
        name: email.split('@')[0], // 简单的名称提取
        unsubscribeUrl: `https://example.com/unsubscribe?email=${encodeURIComponent(email)}`,
      },
    });
  }

  return success;
}

自定义

创建自定义提供商

如果您需要使用不同的邮件订阅服务，您可以创建自定义提供商：

在 src/newsletter/provider 目录中创建新文件
实现 NewsletterProvider 接口

src/newsletter/provider/custom-provider.ts

import type {
  CheckSubscribeStatusParams,
  NewsletterProvider,
  SubscribeNewsletterParams,
  UnsubscribeNewsletterParams,
} from '@/newsletter/types';

export class CustomNewsletterProvider implements NewsletterProvider {
  constructor() {
    // 初始化您的提供商
  }

  public getProviderName(): string {
    return 'CustomProvider';
  }

  async subscribe({ email }: SubscribeNewsletterParams): Promise<boolean> {
    // 订阅用户的实现
    return true;
  }

  async unsubscribe({ email }: UnsubscribeNewsletterParams): Promise<boolean> {
    // 取消订阅用户的实现
    return true;
  }

  async checkSubscribeStatus({ email }: CheckSubscribeStatusParams): Promise<boolean> {
    // 检查订阅状态的实现
    return true;
  }
}

在 index.ts 中更新提供商选择逻辑：

src/newsletter/index.ts

import { CustomNewsletterProvider } from './provider/custom-provider';

export const initializeNewsletterProvider = (): NewsletterProvider => {
  if (!newsletterProvider) {
    if (websiteConfig.newsletter.provider === 'resend') {
      newsletterProvider = new ResendNewsletterProvider();
    } else if (websiteConfig.newsletter.provider === 'custom') {
      newsletterProvider = new CustomNewsletterProvider();
    } else {
      throw new Error(
        `不支持的邮件订阅提供商: ${websiteConfig.newsletter.provider}`
      );
    }
  }

  return newsletterProvider;
};