# Vite 企业微信网页授权登录页

一个使用 Vite + Vanilla JavaScript 构建的企业微信网页授权登录应用。

## 🎯 项目特点

- ⚡️ 基于 Vite 的超快开发体验
- 🔧 模块化代码结构
- 📱 完全响应式设计（移动端优先）
- 💾 本地存储数据持久化
- 🎨 现代化 UI 设计
- 📦 生产级别的构建优化
- 🔐 **企业微信 OAuth 2.0 集成**
- 👤 **自动获取登录用户信息**

## 📋 核心功能

### 1. 企业微信 OAuth 2.0 认证
- ✅ 自动识别企业微信环境
- ✅ 支持 OAuth 授权流程
- ✅ CSRF 防护（State 参数验证）
- ✅ 会话级数据存储

### 2. 用户信息获取
- ✅ 自动获取登录用户的身份信息
- ✅ 获取用户 ID、姓名、手机号、邮箱等
- ✅ 支持自定义权限验证

### 3. 管理员密码功能
- ✅ 手机号输入和验证
- ✅ 一键获取管理员密码
- ✅ 申请次数限制（单个手机号最多5次）
- ✅ 密码有效期72小时
- ✅ 历史记录查询
- ✅ 快速复制功能

## 📁 项目结构

```
qiyeWeComApp/
├── src/
│   ├── main.js                    # 应用入口
│   ├── js/
│   │   ├── app.js                 # 应用主逻辑
│   │   ├── wechat-oauth.js         # 企业微信 OAuth 模块
│   │   ├── wecom-config.js         # 企业微信配置
│   │   ├── api-client.js           # API 客户端
│   │   └── utils.js               # 工具函数
│   └── styles/
│       └── main.css               # 样式文件
├── index.html                      # HTML 模板
├── vite.config.js                 # Vite 配置
├── package.json                   # 项目依赖
├── .env.example                   # 环境变量示例
├── server-example.js              # Node.js 后端示例
├── WECOM_OAUTH_GUIDE.md           # OAuth 实现指南
├── WECOM_INTEGRATION_GUIDE.md     # 集成步骤指南
└── README_VITE.md                 # 本文件
```

## 🚀 快速开始

### 安装依赖

```bash
npm install
# 或
pnpm install
```

### 开发模式

```bash
npm run dev
```

浏览器会自动打开 http://localhost:5173

### 生产构建

```bash
npm run build
```

生成的文件在 `dist/` 目录中。

## 🔐 企业微信集成

### 快速配置

#### 1. 配置企业信息

编辑 `src/js/wecom-config.js`：

```javascript
export const WECOM_CONFIG = {
    corpId: 'ww1234567890abcdef',      // 企业 ID
    agentId: '1000001',                 // 应用 ID
    redirectUri: 'https://your-domain.com/',  // 回调地址
    apiBaseUrl: '/api'                  // API 基础 URL
};
```

#### 2. 企业微信管理后台配置

1. 登录 [企业微信管理后台](https://work.weixin.qq.com/)
2. **应用管理** → 创建应用（或编辑现有应用）
3. **设置** → 启用 **OAuth 2.0 授权企业号管理员登录**
4. 配置 **授权完成后的跳转链接**：`https://your-domain.com/`
5. 配置 **可信域名**：`your-domain.com`

#### 3. 后端配置

复制 `.env.example` 为 `.env`，填入企业微信配置：

```bash
cp .env.example .env
```

编辑 `.env`：

```env
WECOM_CORP_ID=ww1234567890abcdef
WECOM_APP_SECRET=your_app_secret
WECOM_AGENT_ID=1000001
NODE_ENV=development
PORT=3000
```

### 使用流程

```
用户在企业微信中打开应用
        ↓
前端检查是否有授权码
        ↓
如果无授权码，重定向到企业微信授权页面
        ↓
用户授权，企业微信返回授权码和用户信息
        ↓
前端将授权码发送到后端
        ↓
后端使用授权码交换用户详细信息
        ↓
前端显示用户信息和应用功能
```

### 获取用户信息

授权成功后，可以通过以下方式访问用户信息：

```javascript
// 全局访问
const user = window.currentUser;
console.log(user.userid);    // 用户 ID
console.log(user.name);      // 用户名
console.log(user.mobile);    // 手机号
console.log(user.email);     // 邮箱
```

### 后端 API 端点

| 端点 | 方法 | 说明 |
|------|------|------|
| `/api/wecom/getUserInfo` | POST | 使用授权码获取用户信息 |
| `/api/wecom/userDetail/:userId` | GET | 获取用户详情 |
| `/api/wecom/verify/:userId` | GET | 验证用户权限 |

## 📚 详细文档

- **[WECOM_INTEGRATION_GUIDE.md](./WECOM_INTEGRATION_GUIDE.md)** - 完整集成步骤和故障排查
- **[WECOM_OAUTH_GUIDE.md](./WECOM_OAUTH_GUIDE.md)** - OAuth 后端实现指南

## 🔒 安全说明

### 前端安全

- ✅ 使用 HTTPS 传输所有数据
- ✅ State 参数防止 CSRF 攻击
- ✅ 授权码存储在 sessionStorage（会话级）
- ✅ 敏感信息不存储在 localStorage

### 后端安全

- ✅ 验证 access_token
- ✅ 实现速率限制
- ✅ 记录审计日志
- ✅ 定期轮换 Secret

## 🛠 技术栈

- **Vite 5.0+**: 现代化的前端构建工具
- **HTML5**: 页面结构
- **CSS3**: 样式设计（含动画和响应式）
- **JavaScript (ES6+)**: 交互逻辑
- **LocalStorage**: 数据持久化
- **Node.js + Express**: 后端服务（可选示例）

## 📱 响应式设计

支持所有设备：
- 📱 手机（320px+）
- 📱 平板（768px+）
- 💻 桌面（1024px+）

## ❓ 常见问题

**Q: 如何在非企业微信环境测试？**
A: 使用 `src/js/app.js` 中的 `showAuthPrompt()` 显示授权按钮。

**Q: 获取的用户信息中没有手机号？**
A: 需要在企业微信应用设置中配置权限范围。

**Q: 如何实现自动登录？**
A: 检查 `oauth.isAuthorized()` 是否为 true，否则自动跳转授权。

**Q: 如何退出登录？**
A: 调用 `oauth.clearUserInfo()` 清除用户信息。

更多问题见 [集成指南](./WECOM_INTEGRATION_GUIDE.md#常见问题)

## 🚀 部署指南

### 1. 构建应用

```bash
npm run build
```

### 2. 启动后端服务

```bash
# 使用示例后端
node server-example.js

# 或使用你的后端服务
npm start
```

### 3. 配置反向代理

**Nginx** 示例：
```nginx
server {
    listen 443 ssl;
    server_name your-domain.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    location /api/ {
        proxy_pass http://localhost:3000/api/;
        proxy_set_header Host $host;
    }
}
```

### 4. 验证部署

访问 `https://your-domain.com` 并在企业微信中打开

## 📊 性能指标

- ⚡ 首屏加载时间 < 2s
- 🎯 Lighthouse 分数 > 90
- 📦 构建产物大小 < 100KB (gzipped)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request

## 📄 许可证

MIT

## 📞 联系方式

如有问题，请通过以下方式联系：
- 查看 [集成指南](./WECOM_INTEGRATION_GUIDE.md#故障排查)
- 查看 [OAuth 实现指南](./WECOM_OAUTH_GUIDE.md)
- 提交 GitHub Issue

---

**更新时间**: 2025年12月9日

**相关资源**:
- [企业微信开发文档](https://work.weixin.qq.com/api/doc)
- [OAuth 2.0 规范](https://oauth.net/2/)
- [Vite 文档](https://vitejs.dev/)


## 📋 功能特性

### 1. 用户信息展示
- 个人头像展示
- 用户名称和所属企业信息
- 专业的渐变色背景设计

### 2. 密码申请功能
- 手机号输入和验证
- 一键获取管理员密码
- 申请次数限制（单个手机号最多5次）
- 密码有效期72小时
- 实时显示剩余申请次数

### 3. 历史记录管理
- 展示所有有效的密码记录
- 包含密码、申请时间、有效期、剩余时间等信息
- 快速复制功能
- 自动过期处理

### 4. 数据存储
- 使用 localStorage 本地存储历史记录
- 数据持久化，刷新页面不丢失
- 自动清理过期记录

## 📁 项目结构

```
qiyeWeComApp/
├── src/
│   ├── main.js              # 应用入口
│   ├── js/
│   │   ├── app.js           # 应用主逻辑
│   │   └── utils.js         # 工具函数
│   └── styles/
│       └── main.css         # 样式文件
├── index.html               # HTML 模板
├── vite.config.js          # Vite 配置
├── package.json            # 项目依赖
└── README.md               # 项目说明
```

## 🚀 快速开始

### 安装依赖

```bash
npm install
# 或
pnpm install
# 或
yarn install
```

### 开发模式

```bash
npm run dev
```

浏览器会自动打开 http://localhost:5173

### 生产构建

```bash
npm run build
```

生成的文件在 `dist/` 目录中

### 预览生产构建

```bash
npm run preview
```

## 🔧 技术栈

- **Vite 5.0+**: 现代化的前端构建工具
- **HTML5**: 页面结构
- **CSS3**: 样式设计（含动画和响应式）
- **JavaScript (ES6+)**: 交互逻辑
- **LocalStorage**: 数据持久化

## 📝 使用说明

### 手机号要求
- 必须输入有效的中国手机号
- 格式：1开头，11位数字

### 密码规则
- 6位随机数字
- 自动生成，无需手动设置
- 有效期：72小时
- 每个手机号最多申请5次

### 功能演示

1. **输入手机号** → 在输入框中输入有效的手机号码
2. **点击"获取管理员密码"** → 系统生成6位密码
3. **查看历史记录** → 所有申请的密码及其状态
4. **复制密码** → 点击操作栏的"复制"按钮，快速复制到剪贴板

## 🌐 浏览器兼容性

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- 移动浏览器（iOS Safari、Android Chrome）

## 📱 响应式设计

- 桌面端：优化布局，最大宽度 600px
- 平板端：自适应缩放
- 手机端：全屏展示，字体和按钮合理调整

## 💾 数据持久化

所有数据保存在浏览器的 localStorage 中：
- 键名：`loginHistory`
- 存储结构：JSON 数组，包含所有密码申请记录

## 🔒 安全建议

1. **HTTPS 部署**：生产环境必须使用 HTTPS
2. **CSRF 防护**：如需连接服务器，实现 CSRF 防护
3. **输入验证**：服务器端需要额外验证所有输入
4. **数据加密**：敏感数据传输需加密

## 🔄 扩展建议

1. **后端接口集成**：连接企业微信 API 进行真实认证
2. **短信验证**：添加短信验证码确认身份
3. **二次验证**：重要操作需要二次确认
4. **操作日志**：记录所有操作日志用于审计
5. **权限管理**：不同角色的权限差异
6. **框架升级**：可迁移到 Vue/React 框架

## ❓ 常见问题

**Q: 密码保存在哪里？**
A: 保存在浏览器的 localStorage，仅在当前浏览器和设备上可见。

**Q: 刷新页面后历史记录还在吗？**
A: 是的，数据保存在本地，刷新不会丢失。

**Q: 可以手动删除历史记录吗？**
A: 当前版本不支持手动删除，但可以通过清空浏览器缓存实现。

**Q: 如何修改企业信息？**
A: 编辑 `index.html` 中的公司名称和公司信息文本。

**Q: 如何在生产环境部署？**
A: 运行 `npm run build`，然后将 `dist` 目录部署到服务器。

## 📄 许可证

MIT

## 👤 联系方式

如有问题或建议，请联系技术团队。

---

更新时间：2025年12月8日