挑战
构建一个基于订阅的内容平台需要解决多个相互关联的问题:
- 用户身份验证需要在移动端(iOS/Android)和 Web 管理界面上均可使用
- 订阅管理需要跟踪计费周期、续订和访问控制
- 内容库需要为管理员提供内容管理工具
- Google OAuth 和基于电子邮件的身份验证需要无缝共存
- 移动应用需要在两个平台上都提供精致、原生体验
我们的解决方案
我们构建了一个三层应用套件,包括一个 Flutter 移动应用、一个 React 管理仪表板和一个 NestJS 后端 API。
架构
- 移动应用:Flutter,采用 Riverpod 状态管理和 GoRouter 导航
- 管理仪表板:React 19 + Vite,采用 Zustand 和 Tailwind CSS
- 后端 API:NestJS,采用 TypeScript、MongoDB、Redis
- 身份验证:JWT + Google OAuth2,支持 OTP 电子邮件验证
- 基础设施:AWS S3(存储)、AWS SES(电子邮件)、Redis(缓存)
平台组件
移动应用 (Flutter)
- MVVM 架构,结合 Riverpod 实现清晰的状态管理
- 支持电子邮件和 Google OAuth 登录/注册选项
- 带有 OTP 验证的忘记密码流程
- 基于 GoRouter 的深度链接和导航
- 安全令牌存储,实现持久会话
管理仪表板 (React)
- 用户管理,包括详细资料和活动跟踪
- 订阅跟踪,包括续订和计费状态
- 内容库管理和内容管理工具
- 设置和平台配置
- 带关键指标的仪表板分析
后端 API (NestJS)
- JWT 身份验证,支持访问/刷新令牌轮换
- Google OAuth2 集成,与基于凭据的身份验证并行
- AWS SES 电子邮件服务,用于验证和通知
- AWS S3 文件上传和管理
- 速率限制和安全节流
- Swagger/OpenAPI 文档
主要功能
- 双重身份验证方法 - 电子邮件/密码 + Google OAuth2,方便用户
- 令牌轮换 - 安全的访问/刷新令牌管理
- OTP 验证 - 基于电子邮件的验证,增强账户安全性
- 订阅跟踪 - 从注册到续订的完整生命周期管理
- 内容库 - 管理员策划的内容,供订阅者访问
- 跨平台 - Flutter 移动端 + React Web,共享 NestJS 后端
成果
技术栈
常见问题
MicrocosmWorks 构建了一个统一的订阅状态机,将来自 Stripe、Apple App Store Server Notifications V2 和 Google Play RTDN 的 webhook 事件规范化为一个规范的生命周期模型。这确保了宽限期、账单重试和取消处理的一致性,无论事件源自哪个平台。
MicrocosmWorks 实现了跨平台权益关联,将平台特定的订阅 ID 映射到单个用户账户。网页仪表板显示从所有平台拉取的实时订阅状态,尽管账单变更会根据 Apple 和 Google 的政策路由回原始平台。
MicrocosmWorks 集成了一个收入规范化层,将平台特定的交易数据(包括货币、费用和退款)转换成统一的财务报告格式。这为运营人员提供了跨所有订阅渠道的 MRR、流失率和 LTV 指标的单一仪表盘视图。
MicrocosmWorks 以每小时 $20-$45 的费率构建多平台订阅系统,此类复杂度的项目通常需要 500-800 小时的开发时间。这项投资包括 Stripe、Apple 和 Google 集成、webhook 处理、权益管理以及管理仪表板。
MicrocosmWorks 实施了设备指纹识别,并结合跨平台试用期去重,用于检测同一用户在多个平台上尝试注册免费试用。系统还强制执行并发会话限制,并标记异常使用模式以供运营人员审查。
