TOTP V3 Authenticator

一个精美的、基于浏览器的动态口令（TOTP）验证器。无需安装任何应用，打开网页即可生成双重验证码。

✨ 特性

• 纯前端实现：所有计算在浏览器本地完成，密钥不上传服务器
• 现代化 UI：基于 Tailwind CSS 构建，支持深色/浅色模式自适应
• 实时倒计时圆环：可视化显示验证码刷新周期（30秒）
• 隐私保护模式：模糊隐藏验证码，防偷窥
• 一键复制：点击验证码即可复制，支持粘贴板操作
• 本地加密存储：密钥在 LocalStorage 中混淆存储
• URL 参数支持：可通过 ?secret= 或 ?key= 参数快速加载密钥

🚀 快速使用

方式一：直接打开

1. 下载 TOTP V3.html 文件
2. 在浏览器中打开
3. 输入你的 Base32 密钥
4. 即可获取实时动态验证码

方式二：URL 参数

在 URL 中添加密钥参数快速加载：

index.html?secret=JBSWY3DPEHPK3PXP

或

index.html?key=JBSWY3DPEHPK3PXP

🔧 技术栈

• HTML5 + CSS3 + Vanilla JavaScript
• Tailwind CSS (CDN) - 样式框架
• CryptoJS (CDN) - HMAC-SHA1 计算
• SVG 圆环 - 倒计时可视化
• Google Fonts - JetBrains Mono & Inter 字体

📝 核心算法

实现标准的 RFC 6238 TOTP 算法：

1. Base32 解码：将输入密钥解码为字节数组
2. 时间计数器：计算当前时间步（30秒间隔）
3. HMAC-SHA1：使用密钥对时间计数器进行签名
4. 动态截断：从 HMAC 结果中提取 4 字节，生成 6 位数字

🔒 隐私安全

• 所有计算在浏览器本地完成
• 密钥仅存储在本地 LocalStorage（混淆处理）
• 支持隐私模式，模糊显示验证码
• 无网络请求，完全离线可用

🎨 功能预览

功能	说明
密钥输入	支持 Base32 格式，自动校验
一键粘贴	点击粘贴按钮快速从剪贴板输入
实时验证码	每 30 秒自动刷新
倒计时圆环	红/黄/蓝三色渐变，直观显示剩余时间
点击复制	点击验证码区域即可复制到剪贴板
隐私模式	顶部眼睛图标切换，模糊保护
自动保存	密钥自动保存，下次打开自动加载

⚙️ 配置

颜色主题

• 自动跟随系统深色/浅色模式
• 品牌色：#3b82f6 (蓝色)

倒计时阈值

• 剩余 ≤ 5秒：红色
• 剩余 ≤ 10秒：黄色
• 其他：蓝色

📄 文件结构

index.html          # 单页应用，所有代码内嵌
├── HTML 结构
├── CSS (Tailwind + 自定义样式)
└── JavaScript
    ├── 核心算法 (base32Decode, calculateTOTP)
    ├── UI 控制 (隐私、复制、动画)
    └── 存储管理 (LocalStorage)

🛠️ 开发说明

本项目为单 HTML 文件，所有依赖通过 CDN 加载。如需离线使用：

1. 下载所有 CDN 资源到本地
2. 修改 script 和 link 标签的引用路径
3. 或者直接将依赖内联到 HTML 中

📌 注意事项

• 请确保密钥为有效的 Base32 格式
• 验证码每 30 秒 刷新一次
• 时间同步：依赖客户端时间，请确保系统时间准确
• 支持 Google Authenticator 兼容的密钥格式

📜 许可

由 Jquan 制作 本项目仅供参考和学习使用。

---

💡 提示：此工具适用于快速查看双重验证码，建议仅在可信设备上使用。