企业微信应用
编辑 | blame | 历史 | 原始文档

企业微信网页授权登录页

一个基于企业微信需求的网页授权登录页面，支持手机号管理员密码申请和历史记录查询。

功能特性

1. 用户信息展示

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

2. 密码申请功能

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

3. 历史记录管理

  • 展示所有有效的密码记录
  • 包含生成密码、申请时间、有效期、剩余时间等信息
  • 快速复制功能
  • 自动过期处理

4. 数据存储

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

技术栈

  • HTML5: 页面结构
  • CSS3: 样式设计（含动画和响应式）
  • JavaScript (Vanilla): 交互逻辑
  • LocalStorage: 数据持久化

文件说明

qiyeWeComApp/
├── index.html      # 页面结构
├── styles.css      # 样式文件
├── script.js       # 交互逻辑
└── README.md       # 使用说明

使用说明

本地运行

  1. 在浏览器中直接打开 index.html 文件
  2. 或使用本地服务器运行（推荐）
# 使用 Python 3
python -m http.server 8000

# 使用 Python 2
python -m SimpleHTTPServer 8000

# 使用 Node.js http-server
http-server

然后访问 http://localhost:8000

手机号要求

  • 必须输入有效的中国手机号
  • 格式：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. 权限管理：不同角色的权限差异

常见问题

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

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

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

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

联系方式

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

更新时间：2025年12月8日