一个使用 Vite + Vanilla JavaScript 构建的企业微信网页授权登录应用。
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 # 本文件
npm install
# 或
pnpm install
npm run dev
浏览器会自动打开 http://localhost:5173
npm run build
生成的文件在 dist/ 目录中。
编辑 src/js/wecom-config.js：
export const WECOM_CONFIG = {
corpId: 'ww1234567890abcdef', // 企业 ID
agentId: '1000001', // 应用 ID
redirectUri: 'https://your-domain.com/', // 回调地址
apiBaseUrl: '/api' // API 基础 URL
};
https://your-domain.com/your-domain.com复制 .env.example 为 .env，填入企业微信配置：
cp .env.example .env
编辑 .env：
WECOM_CORP_ID=ww1234567890abcdef
WECOM_APP_SECRET=your_app_secret
WECOM_AGENT_ID=1000001
NODE_ENV=development
PORT=3000
用户在企业微信中打开应用
↓
前端检查是否有授权码
↓
如果无授权码，重定向到企业微信授权页面
↓
用户授权，企业微信返回授权码和用户信息
↓
前端将授权码发送到后端
↓
后端使用授权码交换用户详细信息
↓
前端显示用户信息和应用功能
授权成功后，可以通过以下方式访问用户信息：
// 全局访问
const user = window.currentUser;
console.log(user.userid); // 用户 ID
console.log(user.name); // 用户名
console.log(user.mobile); // 手机号
console.log(user.email); // 邮箱
| 端点 | 方法 | 说明 |
|---|---|---|
/api/wecom/getUserInfo |
POST | 使用授权码获取用户信息 |
/api/wecom/userDetail/:userId |
GET | 获取用户详情 |
/api/wecom/verify/:userId |
GET | 验证用户权限 |
支持所有设备：
- 📱 手机（320px+）
- 📱 平板（768px+）
- 💻 桌面（1024px+）
Q: 如何在非企业微信环境测试？
A: 使用 src/js/app.js 中的 showAuthPrompt() 显示授权按钮。
Q: 获取的用户信息中没有手机号？
A: 需要在企业微信应用设置中配置权限范围。
Q: 如何实现自动登录？
A: 检查 oauth.isAuthorized() 是否为 true，否则自动跳转授权。
Q: 如何退出登录？
A: 调用 oauth.clearUserInfo() 清除用户信息。
更多问题见 集成指南
npm run build
# 使用示例后端
node server-example.js
# 或使用你的后端服务
npm start
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;
}
}
```
访问 https://your-domain.com 并在企业微信中打开
欢迎提交 Issue 和 Pull Request
MIT
如有问题，请通过以下方式联系：
- 查看 集成指南
- 查看 OAuth 实现指南
- 提交 GitHub Issue
更新时间: 2025年12月9日
相关资源:
- 企业微信开发文档
- OAuth 2.0 规范
- Vite 文档
qiyeWeComApp/
├── src/
│ ├── main.js # 应用入口
│ ├── js/
│ │ ├── app.js # 应用主逻辑
│ │ └── utils.js # 工具函数
│ └── styles/
│ └── main.css # 样式文件
├── index.html # HTML 模板
├── vite.config.js # Vite 配置
├── package.json # 项目依赖
└── README.md # 项目说明
npm install
# 或
pnpm install
# 或
yarn install
npm run dev
浏览器会自动打开 http://localhost:5173
npm run build
生成的文件在 dist/ 目录中
npm run preview
所有数据保存在浏览器的 localStorage 中：
- 键名：loginHistory
- 存储结构：JSON 数组，包含所有密码申请记录
Q: 密码保存在哪里？
A: 保存在浏览器的 localStorage，仅在当前浏览器和设备上可见。
Q: 刷新页面后历史记录还在吗？
A: 是的，数据保存在本地，刷新不会丢失。
Q: 可以手动删除历史记录吗？
A: 当前版本不支持手动删除，但可以通过清空浏览器缓存实现。
Q: 如何修改企业信息？
A: 编辑 index.html 中的公司名称和公司信息文本。
Q: 如何在生产环境部署？
A: 运行 npm run build，然后将 dist 目录部署到服务器。
MIT
如有问题或建议，请联系技术团队。
更新时间：2025年12月8日