15 changed files with 1329 additions and 54 deletions
@ -0,0 +1,209 @@ |
|||
# 微信小程序扫码登录功能实现 |
|||
|
|||
## 项目概述 |
|||
|
|||
本项目已完整实现微信小程序扫码登录功能，支持用户通过小程序扫描网页端二维码快速登录。 |
|||
|
|||
## 🎯 功能特性 |
|||
|
|||
- ✅ **完整的后端API** - Java Spring Boot实现 |
|||
- ✅ **多种前端集成方式** - 按钮、弹窗、页面 |
|||
- ✅ **智能二维码解析** - 支持URL、JSON、纯token格式 |
|||
- ✅ **安全可靠** - Token有效期控制，防重复使用 |
|||
- ✅ **用户体验优秀** - 实时状态反馈，错误处理完善 |
|||
- ✅ **微信深度集成** - 自动获取用户信息 |
|||
|
|||
## 📁 项目结构 |
|||
|
|||
### 后端 (Java) |
|||
``` |
|||
auto/ |
|||
├── controller/QrLoginController.java # REST API控制器 |
|||
├── service/QrLoginService.java # 业务接口 |
|||
├── service/impl/QrLoginServiceImpl.java # 业务实现 |
|||
└── dto/ # 数据传输对象 |
|||
├── QrLoginData.java |
|||
├── QrLoginConfirmRequest.java |
|||
├── QrLoginStatusResponse.java |
|||
└── QrLoginGenerateResponse.java |
|||
``` |
|||
|
|||
### 前端 (小程序) |
|||
``` |
|||
src/ |
|||
├── api/qr-login/index.ts # API接口层 |
|||
├── hooks/useQRLogin.ts # 业务逻辑Hook |
|||
├── components/ # 组件层 |
|||
│ ├── QRLoginButton.tsx # 扫码按钮组件 |
|||
│ ├── QRLoginScanner.tsx # 扫码器组件 |
|||
│ ├── QRScanModal.tsx # 扫码弹窗组件 |
|||
│ └── QRLoginDemo.tsx # 演示组件 |
|||
└── pages/ # 页面层 |
|||
├── qr-login/index.tsx # 扫码登录页面 |
|||
├── qr-confirm/index.tsx # 登录确认页面 |
|||
└── qr-test/index.tsx # 功能测试页面 |
|||
``` |
|||
|
|||
## 🚀 快速开始 |
|||
|
|||
### 1. 后端配置 |
|||
|
|||
确保Java后端服务正常运行，API接口可访问： |
|||
- `POST /api/qr-login/generate` - 生成扫码token |
|||
- `GET /api/qr-login/status/{token}` - 检查登录状态 |
|||
- `POST /api/qr-login/confirm` - 确认登录 |
|||
- `POST /api/qr-login/scan/{token}` - 扫码操作 |
|||
|
|||
### 2. 前端使用 |
|||
|
|||
#### 最简单的使用方式： |
|||
```tsx |
|||
import QRLoginButton from '@/components/QRLoginButton'; |
|||
|
|||
<QRLoginButton /> |
|||
``` |
|||
|
|||
#### 弹窗方式： |
|||
```tsx |
|||
import QRScanModal from '@/components/QRScanModal'; |
|||
|
|||
<QRScanModal |
|||
visible={showModal} |
|||
onClose={() => setShowModal(false)} |
|||
onSuccess={(result) => console.log('登录成功', result)} |
|||
/> |
|||
``` |
|||
|
|||
#### 页面跳转方式： |
|||
```tsx |
|||
import Taro from '@tarojs/taro'; |
|||
|
|||
Taro.navigateTo({ |
|||
url: '/pages/qr-login/index' |
|||
}); |
|||
``` |
|||
|
|||
## 🔧 支持的二维码格式 |
|||
|
|||
系统智能识别多种二维码格式： |
|||
|
|||
1. **URL格式**：`https://mp.websoft.top/qr-confirm?qrCodeKey=token123` |
|||
2. **JSON格式**：`{"token": "token123", "type": "qr-login"}` |
|||
3. **简单格式**：`qr-login:token123` 或直接 `token123` |
|||
|
|||
## 📱 页面说明 |
|||
|
|||
### 1. 扫码登录页面 (`/pages/qr-login/index`) |
|||
- 完整的扫码登录功能 |
|||
- 用户信息显示 |
|||
- 登录历史记录 |
|||
- 使用说明和安全提示 |
|||
|
|||
### 2. 登录确认页面 (`/pages/qr-confirm/index`) |
|||
- 处理二维码跳转确认 |
|||
- 支持URL参数：`qrCodeKey` 或 `token` |
|||
- 用户确认界面 |
|||
|
|||
### 3. 功能测试页面 (`/pages/qr-test/index`) |
|||
- 演示各种集成方式 |
|||
- 功能测试和调试 |
|||
|
|||
## 🛠️ 开发指南 |
|||
|
|||
### 1. 添加扫码按钮到现有页面 |
|||
|
|||
```tsx |
|||
import QRLoginButton from '@/components/QRLoginButton'; |
|||
|
|||
const MyPage = () => { |
|||
return ( |
|||
<View> |
|||
<QRLoginButton |
|||
text="扫码登录" |
|||
onSuccess={(result) => { |
|||
// 处理登录成功 |
|||
console.log('用户登录成功:', result); |
|||
}} |
|||
onError={(error) => { |
|||
// 处理登录失败 |
|||
console.error('登录失败:', error); |
|||
}} |
|||
/> |
|||
</View> |
|||
); |
|||
}; |
|||
``` |
|||
|
|||
### 2. 自定义扫码逻辑 |
|||
|
|||
```tsx |
|||
import { useQRLogin } from '@/hooks/useQRLogin'; |
|||
|
|||
const MyComponent = () => { |
|||
const { |
|||
startScan, |
|||
isLoading, |
|||
isSuccess, |
|||
result, |
|||
error |
|||
} = useQRLogin(); |
|||
|
|||
return ( |
|||
<Button |
|||
loading={isLoading} |
|||
onClick={startScan} |
|||
> |
|||
{isLoading ? '扫码中...' : '扫码登录'} |
|||
</Button> |
|||
); |
|||
}; |
|||
``` |
|||
|
|||
## 🔒 安全注意事项 |
|||
|
|||
1. **用户登录验证**：使用前确保用户已在小程序中登录 |
|||
2. **Token有效期**：二维码5分钟有效期，过期自动失效 |
|||
3. **权限申请**：确保小程序已申请摄像头权限 |
|||
4. **来源验证**：只扫描来自官方网站的登录二维码 |
|||
|
|||
## 🐛 常见问题 |
|||
|
|||
### Q: 提示"请先登录小程序" |
|||
A: 用户需要先在小程序中完成登录，获取用户ID和访问令牌。 |
|||
|
|||
### Q: 提示"无效的登录二维码" |
|||
A: 检查二维码格式是否正确，或者二维码是否已过期。 |
|||
|
|||
### Q: 扫码失败 |
|||
A: 检查摄像头权限，确保二维码清晰可见。 |
|||
|
|||
### Q: 网络请求失败 |
|||
A: 检查网络连接和API接口地址配置。 |
|||
|
|||
## 📚 相关文档 |
|||
|
|||
- [详细使用指南](docs/QR_LOGIN_USAGE.md) |
|||
- [API接口文档](src/api/qr-login/index.ts) |
|||
- [组件API文档](docs/QR_LOGIN_USAGE.md#组件api) |
|||
|
|||
## 🎉 测试功能 |
|||
|
|||
访问测试页面验证功能： |
|||
``` |
|||
/pages/qr-test/index |
|||
``` |
|||
|
|||
该页面包含所有集成方式的演示和测试功能。 |
|||
|
|||
## 📞 技术支持 |
|||
|
|||
如有问题，请检查： |
|||
1. 后端API服务是否正常运行 |
|||
2. 小程序用户是否已登录 |
|||
3. 网络连接是否正常 |
|||
4. 二维码格式是否正确 |
|||
|
|||
--- |
|||
|
|||
**开发者**: 科技小王子 |
|||
**更新时间**: 2025-09-20 |
|||
@ -0,0 +1,284 @@ |
|||
# 微信小程序扫码登录使用指南 |
|||
|
|||
## 概述 |
|||
|
|||
本项目已完整实现微信小程序扫码登录功能，支持用户通过小程序扫描网页端二维码快速登录。 |
|||
|
|||
## 功能特性 |
|||
|
|||
- ✅ **多种集成方式** - 按钮组件、弹窗组件、专门页面 |
|||
- ✅ **自动解析二维码** - 支持多种二维码格式（URL、JSON、纯token） |
|||
- ✅ **安全可靠** - Token有效期控制，防重复使用 |
|||
- ✅ **用户体验好** - 实时状态反馈，错误处理完善 |
|||
- ✅ **微信集成** - 自动获取微信用户信息 |
|||
|
|||
## 后端接口 |
|||
|
|||
### 1. 生成扫码token |
|||
```http |
|||
POST /api/qr-login/generate |
|||
``` |
|||
|
|||
### 2. 检查登录状态 |
|||
```http |
|||
GET /api/qr-login/status/{token} |
|||
``` |
|||
|
|||
### 3. 确认登录 |
|||
```http |
|||
POST /api/qr-login/confirm |
|||
``` |
|||
|
|||
### 4. 扫码操作（可选） |
|||
```http |
|||
POST /api/qr-login/scan/{token} |
|||
``` |
|||
|
|||
## 前端使用方式 |
|||
|
|||
### 方式1: 直接扫码按钮 |
|||
|
|||
最简单的使用方式，点击按钮直接调用扫码API： |
|||
|
|||
```tsx |
|||
import QRLoginButton from '@/components/QRLoginButton'; |
|||
|
|||
// 基础使用 |
|||
<QRLoginButton /> |
|||
|
|||
// 自定义配置 |
|||
<QRLoginButton |
|||
text="扫码登录" |
|||
type="primary" |
|||
size="large" |
|||
onSuccess={(result) => console.log('登录成功', result)} |
|||
onError={(error) => console.log('登录失败', error)} |
|||
/> |
|||
``` |
|||
|
|||
### 方式2: 弹窗扫码 |
|||
|
|||
在当前页面弹出扫码弹窗： |
|||
|
|||
```tsx |
|||
import { useState } from 'react'; |
|||
import QRScanModal from '@/components/QRScanModal'; |
|||
|
|||
const MyComponent = () => { |
|||
const [showScan, setShowScan] = useState(false); |
|||
|
|||
return ( |
|||
<> |
|||
<Button onClick={() => setShowScan(true)}> |
|||
扫码登录 |
|||
</Button> |
|||
|
|||
<QRScanModal |
|||
visible={showScan} |
|||
onClose={() => setShowScan(false)} |
|||
onSuccess={(result) => { |
|||
console.log('登录成功', result); |
|||
setShowScan(false); |
|||
}} |
|||
onError={(error) => { |
|||
console.log('登录失败', error); |
|||
}} |
|||
/> |
|||
</> |
|||
); |
|||
}; |
|||
``` |
|||
|
|||
### 方式3: 跳转到专门页面 |
|||
|
|||
跳转到专门的扫码登录页面： |
|||
|
|||
```tsx |
|||
import QRLoginButton from '@/components/QRLoginButton'; |
|||
|
|||
// 使用页面模式 |
|||
<QRLoginButton |
|||
text="进入扫码页面" |
|||
usePageMode={true} |
|||
/> |
|||
|
|||
// 或者自定义跳转 |
|||
<Button onClick={() => { |
|||
Taro.navigateTo({ |
|||
url: '/pages/qr-login/index' |
|||
}); |
|||
}}> |
|||
扫码登录 |
|||
</Button> |
|||
``` |
|||
|
|||
### 方式4: 使用Hook |
|||
|
|||
直接使用Hook进行更灵活的控制： |
|||
|
|||
```tsx |
|||
import { useQRLogin } from '@/hooks/useQRLogin'; |
|||
|
|||
const MyComponent = () => { |
|||
const { |
|||
startScan, |
|||
isLoading, |
|||
isSuccess, |
|||
isError, |
|||
error, |
|||
result, |
|||
canScan |
|||
} = useQRLogin(); |
|||
|
|||
return ( |
|||
<Button |
|||
loading={isLoading} |
|||
disabled={!canScan()} |
|||
onClick={startScan} |
|||
> |
|||
{isLoading ? '扫码中...' : '扫码登录'} |
|||
</Button> |
|||
); |
|||
}; |
|||
``` |
|||
|
|||
## 二维码格式支持 |
|||
|
|||
系统支持多种二维码格式： |
|||
|
|||
### 1. URL格式 |
|||
``` |
|||
https://mp.websoft.top/qr-confirm?qrCodeKey=02278c578d3e4aad87dece6aab2f0296 |
|||
https://example.com/login?token=abc123 |
|||
``` |
|||
|
|||
### 2. JSON格式 |
|||
```json |
|||
{ |
|||
"token": "02278c578d3e4aad87dece6aab2f0296", |
|||
"type": "qr-login" |
|||
} |
|||
``` |
|||
|
|||
### 3. 简单格式 |
|||
``` |
|||
qr-login:02278c578d3e4aad87dece6aab2f0296 |
|||
02278c578d3e4aad87dece6aab2f0296 |
|||
``` |
|||
|
|||
## 页面配置 |
|||
|
|||
确保在 `app.config.ts` 中添加了相关页面： |
|||
|
|||
```typescript |
|||
export default { |
|||
pages: [ |
|||
// ... 其他页面 |
|||
'pages/qr-login/index', // 扫码登录页面 |
|||
'pages/qr-confirm/index', // 登录确认页面 |
|||
], |
|||
// ... |
|||
} |
|||
``` |
|||
|
|||
## 使用示例 |
|||
|
|||
### 完整示例组件 |
|||
|
|||
```tsx |
|||
import React, { useState } from 'react'; |
|||
import { View } from '@tarojs/components'; |
|||
import { Button } from '@nutui/nutui-react-taro'; |
|||
import QRLoginButton from '@/components/QRLoginButton'; |
|||
import QRScanModal from '@/components/QRScanModal'; |
|||
|
|||
const LoginPage = () => { |
|||
const [showModal, setShowModal] = useState(false); |
|||
|
|||
const handleSuccess = (result) => { |
|||
console.log('登录成功:', result); |
|||
// 处理登录成功逻辑 |
|||
}; |
|||
|
|||
const handleError = (error) => { |
|||
console.error('登录失败:', error); |
|||
// 处理登录失败逻辑 |
|||
}; |
|||
|
|||
return ( |
|||
<View className="p-4"> |
|||
{/* 方式1: 直接扫码 */} |
|||
<QRLoginButton |
|||
text="扫码登录" |
|||
onSuccess={handleSuccess} |
|||
onError={handleError} |
|||
/> |
|||
|
|||
{/* 方式2: 弹窗扫码 */} |
|||
<Button onClick={() => setShowModal(true)}> |
|||
弹窗扫码 |
|||
</Button> |
|||
|
|||
{/* 方式3: 跳转页面 */} |
|||
<QRLoginButton |
|||
text="进入扫码页面" |
|||
usePageMode={true} |
|||
/> |
|||
|
|||
<QRScanModal |
|||
visible={showModal} |
|||
onClose={() => setShowModal(false)} |
|||
onSuccess={handleSuccess} |
|||
onError={handleError} |
|||
/> |
|||
</View> |
|||
); |
|||
}; |
|||
``` |
|||
|
|||
## 注意事项 |
|||
|
|||
1. **用户登录状态**: 使用扫码登录功能前，用户必须已在小程序中登录 |
|||
2. **权限申请**: 确保小程序已申请摄像头权限 |
|||
3. **网络环境**: 确保网络连接正常，API接口可访问 |
|||
4. **二维码有效期**: 二维码有5分钟有效期，过期需重新生成 |
|||
5. **安全性**: 只扫描来自官方网站的登录二维码 |
|||
|
|||
## 错误处理 |
|||
|
|||
常见错误及解决方案： |
|||
|
|||
- `请先登录小程序`: 用户未登录，需要先完成小程序登录 |
|||
- `无效的登录二维码`: 二维码格式不正确或已过期 |
|||
- `登录确认失败`: 网络问题或服务器错误，可重试 |
|||
- `扫码失败`: 摄像头权限问题或二维码不清晰 |
|||
|
|||
## API接口详情 |
|||
|
|||
详细的API接口文档请参考：`src/api/qr-login/index.ts` |
|||
|
|||
## 组件API |
|||
|
|||
### QRLoginButton Props |
|||
|
|||
| 属性 | 类型 | 默认值 | 说明 | |
|||
|------|------|--------|------| |
|||
| type | string | 'primary' | 按钮类型 | |
|||
| size | string | 'normal' | 按钮大小 | |
|||
| text | string | '扫码登录' | 按钮文本 | |
|||
| showIcon | boolean | true | 是否显示图标 | |
|||
| usePageMode | boolean | false | 是否使用页面模式 | |
|||
| onSuccess | function | - | 成功回调 | |
|||
| onError | function | - | 失败回调 | |
|||
|
|||
### QRScanModal Props |
|||
|
|||
| 属性 | 类型 | 默认值 | 说明 | |
|||
|------|------|--------|------| |
|||
| visible | boolean | false | 是否显示弹窗 | |
|||
| title | string | '扫描登录二维码' | 弹窗标题 | |
|||
| description | string | '扫描网页端显示的登录二维码' | 描述文本 | |
|||
| autoConfirm | boolean | true | 是否自动确认登录 | |
|||
| onClose | function | - | 关闭回调 | |
|||
| onSuccess | function | - | 成功回调 | |
|||
| onError | function | - | 失败回调 | |
|||
@ -0,0 +1,184 @@ |
|||
import React, { useState } from 'react'; |
|||
import { View, Text } from '@tarojs/components'; |
|||
import { Button, Card } from '@nutui/nutui-react-taro'; |
|||
import { Scan, User } from '@nutui/icons-react-taro'; |
|||
import Taro from '@tarojs/taro'; |
|||
import QRLoginButton from './QRLoginButton'; |
|||
import QRScanModal from './QRScanModal'; |
|||
import { useUser } from '@/hooks/useUser'; |
|||
|
|||
/** |
|||
* 扫码登录功能演示组件 |
|||
* 展示如何在页面中集成扫码登录功能 |
|||
*/ |
|||
const QRLoginDemo: React.FC = () => { |
|||
const { user, getDisplayName } = useUser(); |
|||
const [showScanModal, setShowScanModal] = useState(false); |
|||
const [loginHistory, setLoginHistory] = useState<any[]>([]); |
|||
|
|||
// 处理扫码成功
|
|||
const handleScanSuccess = (result: any) => { |
|||
console.log('扫码登录成功:', result); |
|||
|
|||
// 添加到历史记录
|
|||
const newRecord = { |
|||
id: Date.now(), |
|||
time: new Date().toLocaleString(), |
|||
success: true, |
|||
userInfo: result.userInfo |
|||
}; |
|||
setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]); |
|||
}; |
|||
|
|||
// 处理扫码失败
|
|||
const handleScanError = (error: string) => { |
|||
console.error('扫码登录失败:', error); |
|||
|
|||
// 添加到历史记录
|
|||
const newRecord = { |
|||
id: Date.now(), |
|||
time: new Date().toLocaleString(), |
|||
success: false, |
|||
error |
|||
}; |
|||
setLoginHistory(prev => [newRecord, ...prev.slice(0, 4)]); |
|||
}; |
|||
|
|||
// 跳转到专门的扫码页面
|
|||
const goToQRLoginPage = () => { |
|||
Taro.navigateTo({ |
|||
url: '/pages/qr-login/index' |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<View className="qr-login-demo p-4"> |
|||
{/* 用户信息 */} |
|||
<Card className="mb-4"> |
|||
<View className="p-4"> |
|||
<View className="flex items-center mb-4"> |
|||
<View className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
|||
<User className="text-blue-500" size="24" /> |
|||
</View> |
|||
<View> |
|||
<Text className="text-lg font-bold text-gray-800 block"> |
|||
{getDisplayName()} |
|||
</Text> |
|||
<Text className="text-sm text-gray-500 block"> |
|||
当前登录用户 |
|||
</Text> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
</Card> |
|||
|
|||
{/* 扫码登录方式 */} |
|||
<Card className="mb-4"> |
|||
<View className="p-4"> |
|||
<Text className="text-lg font-bold mb-4 block">扫码登录方式</Text> |
|||
|
|||
<View className="space-y-3"> |
|||
{/* 方式1: 直接扫码按钮 */} |
|||
<View> |
|||
<Text className="text-sm text-gray-600 mb-2 block"> |
|||
方式1: 直接扫码登录 |
|||
</Text> |
|||
<QRLoginButton |
|||
text="立即扫码登录" |
|||
onSuccess={handleScanSuccess} |
|||
onError={handleScanError} |
|||
/> |
|||
</View> |
|||
|
|||
{/* 方式2: 弹窗扫码 */} |
|||
<View> |
|||
<Text className="text-sm text-gray-600 mb-2 block"> |
|||
方式2: 弹窗扫码 |
|||
</Text> |
|||
<Button |
|||
type="success" |
|||
size="normal" |
|||
onClick={() => setShowScanModal(true)} |
|||
> |
|||
<Scan className="mr-2" /> |
|||
弹窗扫码 |
|||
</Button> |
|||
</View> |
|||
|
|||
{/* 方式3: 跳转到专门页面 */} |
|||
<View> |
|||
<Text className="text-sm text-gray-600 mb-2 block"> |
|||
方式3: 专门页面 |
|||
</Text> |
|||
<QRLoginButton |
|||
text="进入扫码页面" |
|||
type="warning" |
|||
usePageMode={true} |
|||
/> |
|||
</View> |
|||
|
|||
{/* 方式4: 自定义按钮 */} |
|||
<View> |
|||
<Text className="text-sm text-gray-600 mb-2 block"> |
|||
方式4: 自定义跳转 |
|||
</Text> |
|||
<Button |
|||
type="default" |
|||
size="normal" |
|||
onClick={goToQRLoginPage} |
|||
> |
|||
自定义跳转 |
|||
</Button> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
</Card> |
|||
|
|||
{/* 登录历史 */} |
|||
{loginHistory.length > 0 && ( |
|||
<Card> |
|||
<View className="p-4"> |
|||
<Text className="text-lg font-bold mb-4 block">最近登录记录</Text> |
|||
|
|||
<View className="space-y-2"> |
|||
{loginHistory.map((record) => ( |
|||
<View |
|||
key={record.id} |
|||
className="p-3 bg-gray-50 rounded-lg" |
|||
> |
|||
<View className="flex items-center justify-between"> |
|||
<View> |
|||
<Text className={`text-sm font-medium ${ |
|||
record.success ? 'text-green-600' : 'text-red-600' |
|||
} block`}>
|
|||
{record.success ? '登录成功' : '登录失败'} |
|||
</Text> |
|||
{record.error && ( |
|||
<Text className="text-xs text-red-500 block"> |
|||
{record.error} |
|||
</Text> |
|||
)} |
|||
</View> |
|||
<Text className="text-xs text-gray-500"> |
|||
{record.time} |
|||
</Text> |
|||
</View> |
|||
</View> |
|||
))} |
|||
</View> |
|||
</View> |
|||
</Card> |
|||
)} |
|||
|
|||
{/* 扫码弹窗 */} |
|||
<QRScanModal |
|||
visible={showScanModal} |
|||
onClose={() => setShowScanModal(false)} |
|||
onSuccess={handleScanSuccess} |
|||
onError={handleScanError} |
|||
/> |
|||
</View> |
|||
); |
|||
}; |
|||
|
|||
export default QRLoginDemo; |
|||
@ -0,0 +1,272 @@ |
|||
import React, { useState } from 'react'; |
|||
import { View, Text } from '@tarojs/components'; |
|||
import { Button, Popup, Loading } from '@nutui/nutui-react-taro'; |
|||
import { Scan, Close, Success, Failure } from '@nutui/icons-react-taro'; |
|||
import Taro from '@tarojs/taro'; |
|||
import { parseQRContent, confirmQRLogin } from '@/api/qr-login'; |
|||
import { useUser } from '@/hooks/useUser'; |
|||
|
|||
export interface QRScanModalProps { |
|||
/** 是否显示弹窗 */ |
|||
visible: boolean; |
|||
/** 关闭弹窗回调 */ |
|||
onClose: () => void; |
|||
/** 扫码成功回调 */ |
|||
onSuccess?: (result: any) => void; |
|||
/** 扫码失败回调 */ |
|||
onError?: (error: string) => void; |
|||
/** 弹窗标题 */ |
|||
title?: string; |
|||
/** 描述文本 */ |
|||
description?: string; |
|||
/** 是否自动确认登录 */ |
|||
autoConfirm?: boolean; |
|||
} |
|||
|
|||
/** |
|||
* 二维码扫描弹窗组件（用于扫码登录） |
|||
*/ |
|||
const QRScanModal: React.FC<QRScanModalProps> = ({ |
|||
visible, |
|||
onClose, |
|||
onSuccess, |
|||
onError, |
|||
title = '扫描登录二维码', |
|||
description = '扫描网页端显示的登录二维码', |
|||
autoConfirm = true |
|||
}) => { |
|||
const { user } = useUser(); |
|||
const [loading, setLoading] = useState(false); |
|||
const [status, setStatus] = useState<'idle' | 'scanning' | 'confirming' | 'success' | 'error'>('idle'); |
|||
const [errorMsg, setErrorMsg] = useState(''); |
|||
|
|||
// 开始扫码
|
|||
const handleScan = async () => { |
|||
if (!user?.userId) { |
|||
onError?.('请先登录小程序'); |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
setLoading(true); |
|||
setStatus('scanning'); |
|||
setErrorMsg(''); |
|||
|
|||
// 扫码
|
|||
const scanResult = await new Promise<string>((resolve, reject) => { |
|||
Taro.scanCode({ |
|||
onlyFromCamera: true, |
|||
scanType: ['qrCode'], |
|||
success: (res) => { |
|||
if (res.result) { |
|||
resolve(res.result); |
|||
} else { |
|||
reject(new Error('扫码结果为空')); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
reject(new Error(err.errMsg || '扫码失败')); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
// 解析二维码内容
|
|||
const token = parseQRContent(scanResult); |
|||
if (!token) { |
|||
throw new Error('无效的登录二维码'); |
|||
} |
|||
|
|||
if (autoConfirm) { |
|||
// 自动确认登录
|
|||
setStatus('confirming'); |
|||
const result = await confirmQRLogin({ |
|||
token, |
|||
userId: user.userId, |
|||
platform: 'wechat', |
|||
wechatInfo: { |
|||
nickname: user.nickname, |
|||
avatar: user.avatar |
|||
} |
|||
}); |
|||
|
|||
if (result.success) { |
|||
setStatus('success'); |
|||
onSuccess?.(result); |
|||
|
|||
// 显示成功提示
|
|||
Taro.showToast({ |
|||
title: '登录确认成功', |
|||
icon: 'success' |
|||
}); |
|||
|
|||
// 延迟关闭
|
|||
setTimeout(() => { |
|||
onClose(); |
|||
setStatus('idle'); |
|||
}, 1500); |
|||
} else { |
|||
throw new Error(result.message || '登录确认失败'); |
|||
} |
|||
} else { |
|||
// 只返回扫码结果
|
|||
onSuccess?.(scanResult); |
|||
onClose(); |
|||
setStatus('idle'); |
|||
} |
|||
} catch (error: any) { |
|||
setStatus('error'); |
|||
const errorMessage = error.message || '操作失败'; |
|||
setErrorMsg(errorMessage); |
|||
onError?.(errorMessage); |
|||
} finally { |
|||
setLoading(false); |
|||
} |
|||
}; |
|||
|
|||
// 重试
|
|||
const handleRetry = () => { |
|||
setStatus('idle'); |
|||
setErrorMsg(''); |
|||
handleScan(); |
|||
}; |
|||
|
|||
// 关闭弹窗
|
|||
const handleClose = () => { |
|||
setStatus('idle'); |
|||
setErrorMsg(''); |
|||
setLoading(false); |
|||
onClose(); |
|||
}; |
|||
|
|||
// 获取状态显示内容
|
|||
const getStatusContent = () => { |
|||
switch (status) { |
|||
case 'scanning': |
|||
return { |
|||
icon: <Loading className="text-blue-500" />, |
|||
title: '正在扫码...', |
|||
description: '请将二维码对准摄像头' |
|||
}; |
|||
|
|||
case 'confirming': |
|||
return { |
|||
icon: <Loading className="text-orange-500" />, |
|||
title: '正在确认登录...', |
|||
description: '请稍候，正在为您确认登录' |
|||
}; |
|||
|
|||
case 'success': |
|||
return { |
|||
icon: <Success size="32" className="text-green-500" />, |
|||
title: '登录确认成功', |
|||
description: '网页端将自动完成登录' |
|||
}; |
|||
|
|||
case 'error': |
|||
return { |
|||
icon: <Failure size="32" className="text-red-500" />, |
|||
title: '操作失败', |
|||
description: errorMsg || '请重试' |
|||
}; |
|||
|
|||
default: |
|||
return { |
|||
icon: <Scan size="32" className="text-blue-500" />, |
|||
title, |
|||
description |
|||
}; |
|||
} |
|||
}; |
|||
|
|||
const statusContent = getStatusContent(); |
|||
|
|||
return ( |
|||
<Popup |
|||
visible={visible} |
|||
position="center" |
|||
closeable={false} |
|||
onClose={handleClose} |
|||
style={{ width: '85%', borderRadius: '12px' }} |
|||
> |
|||
<View className="p-6 text-center relative"> |
|||
{/* 关闭按钮 */} |
|||
{status !== 'scanning' && status !== 'confirming' && ( |
|||
<View className="absolute top-4 right-4"> |
|||
<Button |
|||
size="small" |
|||
type="default" |
|||
onClick={handleClose} |
|||
className="w-8 h-8 p-0" |
|||
> |
|||
<Close size="16" /> |
|||
</Button> |
|||
</View> |
|||
)} |
|||
|
|||
{/* 图标 */} |
|||
<View className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4"> |
|||
{statusContent.icon} |
|||
</View> |
|||
|
|||
{/* 标题 */} |
|||
<Text className="text-lg font-bold text-gray-800 mb-2 block"> |
|||
{statusContent.title} |
|||
</Text> |
|||
|
|||
{/* 描述 */} |
|||
<Text className="text-gray-600 mb-6 block"> |
|||
{statusContent.description} |
|||
</Text> |
|||
|
|||
{/* 操作按钮 */} |
|||
{status === 'idle' && ( |
|||
<Button |
|||
type="primary" |
|||
size="large" |
|||
onClick={handleScan} |
|||
className="w-full" |
|||
disabled={!user?.userId} |
|||
> |
|||
<Scan className="mr-2" /> |
|||
{user?.userId ? '开始扫码' : '请先登录'} |
|||
</Button> |
|||
)} |
|||
|
|||
{status === 'error' && ( |
|||
<View className="space-y-2"> |
|||
<Button |
|||
type="primary" |
|||
size="large" |
|||
onClick={handleRetry} |
|||
className="w-full" |
|||
> |
|||
重试 |
|||
</Button> |
|||
<Button |
|||
type="default" |
|||
size="normal" |
|||
onClick={handleClose} |
|||
className="w-full" |
|||
> |
|||
取消 |
|||
</Button> |
|||
</View> |
|||
)} |
|||
|
|||
{(status === 'scanning' || status === 'confirming') && ( |
|||
<Button |
|||
type="default" |
|||
size="large" |
|||
onClick={handleClose} |
|||
className="w-full" |
|||
> |
|||
取消 |
|||
</Button> |
|||
)} |
|||
</View> |
|||
{loading} |
|||
</Popup> |
|||
); |
|||
}; |
|||
|
|||
export default QRScanModal; |
|||
@ -0,0 +1,5 @@ |
|||
export default { |
|||
navigationBarTitleText: '确认登录', |
|||
navigationBarTextStyle: 'black', |
|||
navigationBarBackgroundColor: '#ffffff' |
|||
} |
|||
@ -0,0 +1,239 @@ |
|||
import React, { useState, useEffect } from 'react'; |
|||
import { View, Text } from '@tarojs/components'; |
|||
import { Button, Loading, Card } from '@nutui/nutui-react-taro'; |
|||
import { Success, Failure, Tips, User } from '@nutui/icons-react-taro'; |
|||
import Taro, { useRouter } from '@tarojs/taro'; |
|||
import { confirmQRLogin } from '@/api/qr-login'; |
|||
import { useUser } from '@/hooks/useUser'; |
|||
|
|||
/** |
|||
* 扫码登录确认页面 |
|||
* 用于处理从二维码跳转过来的登录确认 |
|||
*/ |
|||
const QRConfirmPage: React.FC = () => { |
|||
const router = useRouter(); |
|||
const { user, getDisplayName } = useUser(); |
|||
const [loading, setLoading] = useState(false); |
|||
const [confirmed, setConfirmed] = useState(false); |
|||
const [error, setError] = useState<string>(''); |
|||
const [token, setToken] = useState<string>(''); |
|||
|
|||
useEffect(() => { |
|||
// 从URL参数中获取token
|
|||
const { qrCodeKey, token: urlToken } = router.params; |
|||
const loginToken = qrCodeKey || urlToken; |
|||
|
|||
if (loginToken) { |
|||
setToken(loginToken); |
|||
} else { |
|||
setError('无效的登录链接'); |
|||
} |
|||
}, [router.params]); |
|||
|
|||
// 确认登录
|
|||
const handleConfirmLogin = async () => { |
|||
if (!token) { |
|||
setError('缺少登录token'); |
|||
return; |
|||
} |
|||
|
|||
if (!user?.userId) { |
|||
setError('请先登录小程序'); |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
setLoading(true); |
|||
setError(''); |
|||
|
|||
const result = await confirmQRLogin({ |
|||
token, |
|||
userId: user.userId, |
|||
platform: 'wechat', |
|||
wechatInfo: { |
|||
nickname: user.nickname, |
|||
avatar: user.avatar |
|||
} |
|||
}); |
|||
|
|||
if (result.success) { |
|||
setConfirmed(true); |
|||
Taro.showToast({ |
|||
title: '登录确认成功', |
|||
icon: 'success', |
|||
duration: 2000 |
|||
}); |
|||
|
|||
// 3秒后自动返回
|
|||
setTimeout(() => { |
|||
Taro.navigateBack(); |
|||
}, 3000); |
|||
} else { |
|||
setError(result.message || '登录确认失败'); |
|||
} |
|||
} catch (err: any) { |
|||
setError(err.message || '登录确认失败'); |
|||
} finally { |
|||
setLoading(false); |
|||
} |
|||
}; |
|||
|
|||
// 取消登录
|
|||
const handleCancel = () => { |
|||
Taro.navigateBack(); |
|||
}; |
|||
|
|||
// 重试
|
|||
const handleRetry = () => { |
|||
setError(''); |
|||
setConfirmed(false); |
|||
handleConfirmLogin(); |
|||
}; |
|||
|
|||
return ( |
|||
<View className="qr-confirm-page min-h-screen bg-gray-50"> |
|||
<View className="p-4"> |
|||
{/* 主要内容卡片 */} |
|||
<Card className="bg-white rounded-lg shadow-sm"> |
|||
<View className="p-6 text-center"> |
|||
{/* 图标 */} |
|||
<View className="mb-6"> |
|||
{loading ? ( |
|||
<View className="w-16 h-16 mx-auto flex items-center justify-center"> |
|||
<Loading className="text-blue-500" /> |
|||
</View> |
|||
) : confirmed ? ( |
|||
<View className="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center"> |
|||
<Success className="text-green-500" /> |
|||
</View> |
|||
) : error ? ( |
|||
<View className="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center"> |
|||
<Failure className="text-red-500" /> |
|||
</View> |
|||
) : ( |
|||
<View className="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center"> |
|||
<User size="32" className="text-blue-500" /> |
|||
</View> |
|||
)} |
|||
</View> |
|||
|
|||
{/* 标题 */} |
|||
<Text className="text-xl font-bold text-gray-800 mb-2 block"> |
|||
{loading ? '正在确认登录...' : |
|||
confirmed ? '登录确认成功' : |
|||
error ? '登录确认失败' : '确认登录'} |
|||
</Text> |
|||
|
|||
{/* 描述 */} |
|||
<Text className="text-gray-600 mb-6 block"> |
|||
{loading ? '请稍候，正在为您确认登录' : |
|||
confirmed ? '您已成功确认登录，网页端将自动登录' : |
|||
error ? error : |
|||
`确认使用 ${getDisplayName()} 登录网页端？`} |
|||
</Text> |
|||
|
|||
{/* 用户信息 */} |
|||
{!loading && !confirmed && !error && user && ( |
|||
<View className="bg-gray-50 rounded-lg p-4 mb-6"> |
|||
<View className="flex items-center justify-center"> |
|||
<View className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
|||
<User className="text-blue-500" size="20" /> |
|||
</View> |
|||
<View className="text-left"> |
|||
<Text className="text-sm font-medium text-gray-800 block"> |
|||
{user.nickname || user.username || '用户'} |
|||
</Text> |
|||
<Text className="text-xs text-gray-500 block"> |
|||
ID: {user.userId} |
|||
</Text> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
)} |
|||
|
|||
{/* 操作按钮 */} |
|||
<View className="space-y-3"> |
|||
{loading ? ( |
|||
<Button |
|||
type="default" |
|||
size="large" |
|||
disabled |
|||
className="w-full" |
|||
> |
|||
确认中... |
|||
</Button> |
|||
) : confirmed ? ( |
|||
<Button |
|||
type="success" |
|||
size="large" |
|||
onClick={handleCancel} |
|||
className="w-full" |
|||
> |
|||
完成 |
|||
</Button> |
|||
) : error ? ( |
|||
<View className="space-y-2"> |
|||
<Button |
|||
type="primary" |
|||
size="large" |
|||
onClick={handleRetry} |
|||
className="w-full" |
|||
> |
|||
重试 |
|||
</Button> |
|||
<Button |
|||
type="default" |
|||
size="large" |
|||
onClick={handleCancel} |
|||
className="w-full" |
|||
> |
|||
取消 |
|||
</Button> |
|||
</View> |
|||
) : ( |
|||
<View className="space-y-2"> |
|||
<Button |
|||
type="primary" |
|||
size="large" |
|||
onClick={handleConfirmLogin} |
|||
className="w-full" |
|||
disabled={!token || !user?.userId} |
|||
> |
|||
确认登录 |
|||
</Button> |
|||
<Button |
|||
type="default" |
|||
size="large" |
|||
onClick={handleCancel} |
|||
className="w-full" |
|||
> |
|||
取消 |
|||
</Button> |
|||
</View> |
|||
)} |
|||
</View> |
|||
</View> |
|||
</Card> |
|||
|
|||
{/* 安全提示 */} |
|||
<Card className="bg-yellow-50 border border-yellow-200 rounded-lg mt-4"> |
|||
<View className="p-4"> |
|||
<View className="flex items-start"> |
|||
<Tips className="text-yellow-600 mr-2 mt-1" size="16" /> |
|||
<View> |
|||
<Text className="text-sm font-medium text-yellow-800 mb-1 block"> |
|||
安全提示 |
|||
</Text> |
|||
<Text className="text-xs text-yellow-700 block"> |
|||
请确认这是您本人的登录操作。如果不是，请点击取消并检查账户安全。 |
|||
</Text> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
</Card> |
|||
</View> |
|||
</View> |
|||
); |
|||
}; |
|||
|
|||
export default QRConfirmPage; |
|||
@ -0,0 +1,5 @@ |
|||
export default { |
|||
navigationBarTitleText: '扫码登录测试', |
|||
navigationBarTextStyle: 'black', |
|||
navigationBarBackgroundColor: '#ffffff' |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
import { View, Text } from '@tarojs/components'; |
|||
import { Card } from '@nutui/nutui-react-taro'; |
|||
import QRLoginDemo from '@/components/QRLoginDemo'; |
|||
import QRLoginButton from "@/components/QRLoginButton"; |
|||
|
|||
/** |
|||
* 扫码登录测试页面 |
|||
*/ |
|||
const QRTestPage = () => { |
|||
return ( |
|||
<View className="qr-test-page min-h-screen bg-gray-50"> |
|||
<QRLoginButton /> |
|||
<View className="p-4"> |
|||
{/* 页面标题 */} |
|||
<Card className="mb-4"> |
|||
<View className="p-4 text-center"> |
|||
<Text className="text-xl font-bold text-gray-800 mb-2 block"> |
|||
扫码登录功能测试 |
|||
</Text> |
|||
<Text className="text-sm text-gray-600 block"> |
|||
测试各种扫码登录集成方式 |
|||
</Text> |
|||
</View> |
|||
</Card> |
|||
|
|||
{/* 演示组件 */} |
|||
<QRLoginDemo /> |
|||
</View> |
|||
</View> |
|||
); |
|||
}; |
|||
|
|||
export default QRTestPage; |
|||
Loading…
Reference in new issue