基于腾讯云开发 CloudBase AI ToolKit 构建的认证系统，提供完整的手机号注册、登录功能。

本项目基于 CloudBase AI ToolKit 开发，通过AI提示词和 MCP 协议+云开发，让开发更智能、更高效，支持AI生成全栈代码、一键部署至腾讯云开发（免服务器）、智能日志修复。

本项目提供基于 CloudBase Auth SDK 的手机号验证码注册/登录功能，适用于 Web 应用和小程序场景。代码遵循最佳实践，具有良好的可维护性和扩展性。

• ✅ 手机号注册（独立入口）
• ✅ 手机号登录
• ✅ 验证码发送和验证
• ✅ 用户信息展示
• ✅ 退出登录
• ✅ 验证码频率限制（防刷）
• ✅ 验证码输入次数限制
• ✅ 响应式设计，支持移动端

• 📦 单例模式管理认证实例
• 🛡️ 完整的 JSDoc 文档
• 🔒 统一的错误处理机制
• 🎯 输入验证和参数校验
• 📊 状态管理优化
• 🎨 良好的用户体验

cloudbase-auth/
├── auth/                    # 认证模块
│   ├── auth.js             # Auth SDK 封装类（核心）
│   ├── auth-common.js      # 通用工具函数
│   ├── login.js            # 登录逻辑
│   ├── register.js         # 注册逻辑
│   ├── config.js           # CloudBase 配置
│   ├── index.html          # 用户中心页面
│   ├── login.html          # 登录页面
│   ├── register.html       # 注册页面
│   ├── styles.css          # 样式文件
│   └── README.md           # 模块说明文档
├── rules/                  # AI 规则配置
│   ├── auth-http-api/      # Auth HTTP API 规则
│   ├── auth-nodejs/        # Node.js Auth 规则
│   ├── auth-web/           # Web Auth 规则
│   └── ...
├── .env.example            # 环境变量模板
├── .gitignore              # Git 忽略文件配置
├── package.json            # 项目配置和依赖
├── cloudbaserc.json        # CloudBase 配置
├── CODE_STANDARDS.md       # 代码规范文档
└── README.md               # 项目说明文档

┌─────────────────────────────────────┐
│         Presentation Layer          │  ← HTML/CSS
│  (login.html, register.html, ...)   │
└─────────────────────────────────────┘
                 ↓
┌─────────────────────────────────────┐
│          Business Logic Layer       │  ← JavaScript
│   (login.js, register.js, ...)      │
└─────────────────────────────────────┘
                 ↓
┌─────────────────────────────────────┐
│          Service Layer              │  ← Auth SDK
│        (auth.js, auth-common.js)    │
└─────────────────────────────────────┘
                 ↓
┌─────────────────────────────────────┐
│          CloudBase SDK              │  ← CloudBase
│       (@cloudbase/js-sdk)           │
└─────────────────────────────────────┘

auth.js（核心层）

• CloudBaseAuth 类：封装认证功能
• 提供单例模式管理认证实例
• 处理 SDK 初始化和认证状态监听
• 定义公共 API 接口

auth-common.js（工具层）

• 表单验证函数（手机号、验证码、昵称）
• 错误处理函数
• 频率限制管理
• UI 交互工具（Toast、倒计时）

login.js & register.js（业务层）

• 页面初始化和事件绑定
• 验证码发送逻辑
• 验证码验证逻辑
• 状态管理和 UI 更新

用户输入
   ↓
表单验证（auth-common.js）
   ↓
业务逻辑（login.js/register.js）
   ↓
认证服务（auth.js）
   ↓
CloudBase SDK
   ↓
云端服务

// 全局状态（login.js / register.js）
verifyFunction      // 验证函数
countdownTimer      // 倒计时定时器
currentPhone        // 当前手机号
verifyAttempts      // 验证次数

// 单例状态（auth.js）
authInstance        // 认证实例

// 临时状态（auth-common.js）
codeSendRecords     // 验证码发送记录（频率限制）

确保你已经安装了以下工具：

• Node.js >= 14.0.0
• 现代浏览器（Chrome、Firefox、Safari、Edge）

git clone https://github.com/yunjinhong/cloudbase-auth.git
cd cloudbase-auth

复制环境变量模板并填写配置：

cp .env.example .env

编辑 .env 文件，填写你的 CloudBase 配置：

CLOUDBASE_ENV=hjhsite-4gwrqvh455f57d20
CLOUDBASE_REGION=ap-shanghai
CLOUDBASE_ACCESS_KEY=your-publishable-key

1. 访问云开发控制台：https://tcb.cloud.tencent.com/dev?envId=YOUR_ENV_ID#/env/apikey
2. 找到 publishable key
3. 复制到 .env 文件的 CLOUDBASE_ACCESS_KEY 字段

注意：publishable key 可以安全地暴露在前端代码中，不同于 secret key。

1. 访问身份认证配置：https://tcb.cloud.tencent.com/dev?envId=YOUR_ENV_ID#/identity/login-manage
2. 启用「短信登录」功能
3. 配置短信模板（如果需要）

npm run start

访问：http://localhost:8000

npm install -g live-server
npm run dev

访问：http://localhost:8000

• 注册页面：http://localhost:8000/register.html
• 登录页面：http://localhost:8000/login.html
• 用户中心：http://localhost:8000/index.html

1. 输入手机号（可选输入昵称）
   ↓
2. 点击「获取验证码」
   ↓
3. 查收短信
   ↓
4. 输入6位验证码
   ↓
5. 点击「注册」
   ↓
6. 注册成功，自动登录

1. 输入手机号
   ↓
2. 点击「获取验证码」
   ↓
3. 查收短信
   ↓
4. 输入6位验证码
   ↓
5. 点击「登录」
   ↓
6. 登录成功，跳转到用户中心

• 验证码发送限制：60秒内只能发送一次
• 最大发送次数：同一手机号最多发送5次
• 验证码输入限制：最多尝试3次，超过需要重新获取

• 手机号格式错误：实时提示
• 验证码错误：提示剩余次数
• 网络错误：自动重试机制
• 频率限制：显示剩余等待时间

const auth = new CloudBaseAuth({
  env: 'your-env-id',
  region: 'ap-shanghai',
  accessKey: 'your-publishable-key'
});

发送手机验证码（注册）

const result = await auth.signUp('13800138000', '张三');
// 返回: { success, verifyFunction, message }

发送手机验证码（登录）

const result = await auth.signInWithOtp('13800138000');
// 返回: { success, verifyFunction, message }

验证验证码

const result = await auth.verifyOtp(verifyFunction, '123456');
// 返回: { success, user, session, message }

获取当前用户信息

const result = await auth.getCurrentUser();
// 返回: { success, user }

退出登录

const result = await auth.signOut();
// 返回: { success, message }

检查登录状态

const state = await auth.checkLoginState();
// 返回: { isLoggedIn, session }

登录成功事件

window.addEventListener('auth:signin', (event) => {
  const session = event.detail;
  console.log('用户登录:', session);
});

退出登录事件

window.addEventListener('auth:signout', () => {
  console.log('用户退出');
});

本项目遵循严格的代码规范，详见 CODE_STANDARDS.md。

• ✅ 所有公共 API 添加 JSDoc 注释
• ✅ 使用 camelCase 命名变量和函数
• ✅ 常量使用 UPPER_SNAKE_CASE
• ✅ 所有异步操作添加错误处理
• ✅ 使用 async/await 而不是 Promise.then()
• ✅ 所有用户输入必须验证
• ✅ 避免硬编码敏感信息

运行 ESLint 检查代码质量：

npm run lint

• 不要将 .env 文件提交到 Git
• 不要在代码中硬编码 accessKey
• 使用环境变量管理配置

• 所有用户输入必须验证
• 使用白名单验证手机号
• 防止 XSS 攻击

• 启用验证码发送频率限制
• 限制验证码输入次数
• 监控异常请求

• 使用 CloudBase 的会话管理
• 定期检查登录状态
• 安全退出登录

• ✅ Chrome/Edge（最新版本）
• ✅ Firefox（最新版本）
• ✅ Safari（最新版本）
• ✅ 移动端浏览器

A: 请检查：

1. 手机号是否正确
2. 是否启用了短信登录功能
3. 短信模板是否配置正确
4. 是否在云开发控制台配置了短信服务

A: 请在 .env 文件中配置 CLOUDBASE_ACCESS_KEY（publishable key）

A: 在 auth-common.js 中修改 redirectToHome() 函数的跳转地址

A: 修改 auth/styles.css 文件

A: 目前支持手机号验证码登录/注册，可以扩展支持其他登录方式

• CloudBase Auth SDK - 认证服务
• JavaScript (ES6+) - 编程语言
• CSS3 - 样式和布局
• HTML5 - 页面结构

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'feat: add some amazing feature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

提交消息遵循 Conventional Commits 规范：

• feat: 新功能
• fix: 修复 Bug
• docs: 文档更新
• refactor: 代码重构
• test: 测试相关
• chore: 构建/工具相关

• ✅ 初始版本发布
• ✅ 手机号注册/登录功能
• ✅ 验证码频率限制
• ✅ 完整的 JSDoc 文档
• ✅ 代码规范化
• ✅ 安全增强

MIT License

• 项目地址：https://github.com/yunjinhong/cloudbase-auth
• 问题反馈：https://github.com/yunjinhong/cloudbase-auth/issues

感谢 CloudBase AI ToolKit 提供的强大功能支持。