# EasyOTP

**Repository Path**: gradysong/easyotp

## Basic Information

- **Project Name**: EasyOTP
- **Description**: EasyOTP 是一款开源的浏览器插件，支持 TOTP/HOTP 双因素认证（2FA），帮助用户在登录网站时自动生成一次性验证码，提升账户安全。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-08
- **Last Updated**: 2025-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# EasyOTP 浏览器插件

## 项目简介
EasyOTP 是一款开源的浏览器插件，支持 TOTP/HOTP 双因素认证（2FA），帮助用户生成一次性验证码，提升账户安全。

---

## 主要功能
- 支持多账户管理（可添加多个网站/服务的认证）
- 支持 TOTP（基于时间）和 HOTP（基于计数器）两种一次性密码协议
- 支持手动添加账户
- 自动生成6位一次性验证码，TOTP 每30秒刷新，HOTP 每次使用后计数器自动递增
- 支持手动复制验证码到任何网站或应用
- 所有密钥仅保存在本地浏览器，保障安全
- 简洁紧凑的界面设计，适合展示更多账户
- 账户支持编辑、删除，HOTP 计数器可视化
- 点击验证码可直接复制
- 支持账户信息本地持久化
- **支持通过二维码图片自动识别并提取 otpauth 协议密钥，便捷添加账户**

---

## 界面布局说明
- 账户卡片第一行：用户名、协议类型（TOTP/HOTP）、编辑/删除按钮横向排列
- 账户卡片第二行：验证码和倒计时/计数器横向排列，验证码更突出
- 卡片整体紧凑，适合展示更多账户

---

## 安装方法
1. 下载本项目源码。
2. 打开浏览器扩展管理页面（如 Chrome 的 chrome://extensions/）。
3. 开启"开发者模式"，点击"加载已解压的扩展程序"，选择本项目文件夹。
4. 安装完成后，浏览器右上角会出现 EasyOTP 图标。

![输入图片说明](%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20250712105750.png)
---

## 使用方法
1. 点击浏览器右上角 EasyOTP 图标，打开插件弹窗。
2. 点击"添加账户"，手动输入密钥。
3. 添加后，插件会自动生成一次性验证码。
4. 在登录页面，手动点击验证码进行复制，然后粘贴到相应的输入框。
5. HOTP 账户每次使用后计数器自动递增，界面实时显示。
6. **点击"扫码添加账户"或上传二维码图片，插件会自动识别二维码内容，自动填写密钥和账户信息，无需手动输入。**

---

## 参数说明
- 账户名称：自定义，便于区分不同网站
- 密钥（Secret）：用于生成验证码的私密字符串（通常通过二维码获取）
- 类型：TOTP（默认）或 HOTP
- 计数器：HOTP 专用，自动管理
- 位数：验证码长度，常用为6位
- 时间步长：TOTP 默认30秒
- **二维码图片：支持上传 PNG/JPG 等格式的二维码图片，自动识别 otpauth 协议内容**
- **解析结果：包含密钥（secret）、账户（account）、类型（type），如二维码内容不符合 otpauth 协议会有错误提示**

---

## 项目结构
```
easyotp/
├── README.md                # 项目说明文档
├── manifest.json            # 插件配置文件
├── popup.html               # 插件弹窗页面
├── popup.js                 # 弹窗逻辑脚本
├── popup.css                # 弹窗样式表
├── background.js            # 后台脚本
├── content.js               # 内容脚本（已移除自动填充功能）
├── otp.js                   # TOTP/HOTP 算法实现
├── storage.js               # 本地存储管理
├── qrcode.js                # 二维码解析模块，依赖 libs/jsQR.min.js，提供 parseQRCodeFromImage 方法，自动识别二维码图片并解析 otpauth 协议
├── libs/otplib-browser.js   # otplib 库本地依赖
├── libs/jsQR.min.js         # jsQR 二维码识别库
├── icons/                   # 插件图标
└── ...                      # 其他资源
```

---

## 主要技术说明
- **手动复制**：用户需要手动点击验证码进行复制，然后粘贴到网站的验证码输入框中。
- **HOTP 计数器**：每次使用验证码后自动递增，界面实时显示当前计数器值，保证每个验证码只用一次。
- **本地存储**：所有账户信息和密钥仅保存在本地浏览器，不上传云端，保障隐私安全。
- **界面优化**：卡片式账户展示，紧凑布局，适合展示更多账户，操作便捷。
- **二维码解析**：qrcode.js 利用 jsQR 库识别二维码图片内容，自动提取 otpauth 协议密钥和账户信息，极大简化添加账户流程。

---

## 常见问题
- **密钥安全吗？**  所有密钥仅保存在本地浏览器，不会上传云端。
- **支持哪些网站？**  只要网站支持 TOTP/HOTP 二维码或密钥，都可使用。
- **如何备份密钥？**  后续版本将支持导入/导出密钥功能。

---

## 未来计划与改进建议
- 支持密钥加密存储
- 支持云端同步（可选）
- 支持更多验证码算法和长度
- UI/UX 持续优化
- 支持二维码扫码添加账户（已支持图片上传，后续支持摄像头扫码）

---

## 详细接口说明
### 二维码解析接口

#### parseQRCodeFromImage(imageData)
- 功能：识别二维码图片内容，自动提取 otpauth 协议密钥、账户等信息
- 参数：
  - `imageData`：HTMLImageElement 或 Canvas ImageData
- 返回值：
  - `{ secret, account, type, rawText, error }`
    - `secret`：密钥字符串
    - `account`：账户名
    - `type`：类型（TOTP/HOTP）
    - `rawText`：二维码原始内容
    - `error`：错误信息（如无错误则为空字符串）

---

## 联系与反馈
如有建议或问题，欢迎提交 issue 或联系开发者。