feat(passport): 优化扫码登录确认流程,改用 wx.login + loginByOpenId 验证身份

- 移除 useUser 依赖,采用微信 wx.login 获取 code 并调用 loginByOpenId 接口验证用户身份
- 登录流程调整为先通过 code 校验用户是否存在,存在则自动确认登录, 不存在跳转注册页面
- 增加用户信息本地缓存及优先使用 wx.login 返回的用户数据
- 修改二维码确认登录页面 UI,展示微信登录用户头像及昵称
- 新增 wx-login API 接口,实现通过 code 换取用户身份信息及 OpenId 获取接口
- 强化登录失败及用户未注册状态的提示和跳转逻辑
This commit is contained in:
2026-04-07 23:49:05 +08:00
parent dd4d5576b0
commit 27641e4c8c
2 changed files with 220 additions and 38 deletions

View File

@@ -4,7 +4,7 @@ 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/passport/qr-login';
import { useUser } from '@/hooks/useUser';
import { loginByOpenId } from '@/api/passport/wx-login';
/**
* 扫码登录确认页面
@@ -17,15 +17,23 @@ import { useUser } from '@/hooks/useUser';
* - 微信「扫普通链接二维码打开小程序」配置的二维码规则:`https://websopy.websoft.top/wx-scan/`
* - 扫码后 URL`https://websopy.websoft.top/wx-scan?token=xxx`
* - 小程序接收到参数后自动确认登录
*
* 登录流程2026-04-07 实现):
* 1. 用户扫码 → 进入 qr-confirm 页面
* 2. 页面立即调用 wx.login() 获取 code
* 3. 用 code 调用 /api/wx-login/loginByOpenId 获取/验证用户身份
* 4. 如果用户不存在 → 跳转到用户页引导注册
* 5. 如果用户存在 → 自动调用 confirmQRLogin 确认登录
*/
const QRConfirmPage: React.FC = () => {
const router = useRouter();
const { user, getDisplayName, isLoggedIn } = useUser();
// 移除 useUser 依赖,改用 wx.login() + loginByOpenId 方式验证用户身份
const [loading, setLoading] = useState(false);
const [confirmed, setConfirmed] = useState(false);
const [error, setError] = useState<string>('');
const [token, setToken] = useState<string>('');
const [loginMethod, setLoginMethod] = useState<'scan' | 'url'>('url');
const [userInfo, setUserInfo] = useState<any>(null);
useEffect(() => {
// 从 URL 参数中获取 token
@@ -80,32 +88,74 @@ const QRConfirmPage: React.FC = () => {
/**
* 自动确认登录URL 扫码场景)
*
* 新的登录流程2026-04-07
* 1. 调用 wx.login() 获取 code
* 2. 用 code 调用后端 loginByOpenId 接口验证用户身份
* 3. 用户存在 → 调用 confirmQRLogin 确认登录
* 4. 用户不存在 → 跳转到用户页引导注册
*/
const handleAutoConfirm = async (loginToken: string) => {
if (!isLoggedIn || !user?.userId) {
// 用户未登录,跳转到登录页面
console.log('[QRConfirm] 用户未登录,跳转到登录页');
Taro.showToast({
title: '请先登录小程序',
icon: 'none',
duration: 2000
try {
setLoading(true);
// 1. 调用微信登录获取 code
console.log('[QRConfirm] 调用 wx.login() 获取 code...');
const loginResult = await Taro.login();
if (!loginResult.code) {
throw new Error('获取微信登录凭证失败');
}
console.log('[QRConfirm] 获取到 code:', loginResult.code);
// 2. 用 code 调用后端接口验证用户身份
console.log('[QRConfirm] 调用后端 loginByOpenId...');
const wxLoginResult = await loginByOpenId({
code: loginResult.code,
tenantId: 10398 // 使用固定租户ID
});
setTimeout(() => {
Taro.redirectTo({
url: '/passport/login'
console.log('[QRConfirm] loginByOpenId 结果:', wxLoginResult);
// 3. 判断用户是否存在
if (wxLoginResult.success && wxLoginResult.data) {
// 用户已注册,保存用户信息并继续确认登录
console.log('[QRConfirm] 用户已注册,开始确认登录...');
setUserInfo(wxLoginResult.data.user);
// 调用确认登录
await handleConfirmLogin(loginToken, wxLoginResult.data.user);
} else {
// 用户未注册,跳转到用户页引导注册
console.log('[QRConfirm] 用户未注册,跳转到用户页引导注册');
Taro.showToast({
title: '请先注册/登录小程序',
icon: 'none',
duration: 2000
});
}, 2000);
return;
setTimeout(() => {
// 跳转到用户中心,在那里可以完成注册和登录
Taro.switchTab({
url: '/pages/user/user'
});
}, 2000);
}
} catch (err: any) {
console.error('[QRConfirm] 自动确认登录失败:', err);
setError(err.message || '自动确认登录失败');
} finally {
setLoading(false);
}
await handleConfirmLogin(loginToken);
};
/**
* 确认登录
* @param loginToken - 可选的登录token默认使用页面token
* @param wxUserInfo - 微信登录获取的用户信息(可选)
*/
const handleConfirmLogin = async (loginToken?: string) => {
const handleConfirmLogin = async (loginToken?: string, wxUserInfo?: any) => {
const confirmToken = loginToken || token;
if (!confirmToken) {
@@ -113,19 +163,27 @@ const QRConfirmPage: React.FC = () => {
return;
}
if (!user?.userId) {
setError('请先登录小程序');
Taro.showToast({
title: '请先登录小程序',
icon: 'none'
});
setTimeout(() => {
Taro.redirectTo({
url: '/passport/login'
// 优先使用传入的用户信息,否则尝试从本地存储获取
const currentUser = wxUserInfo || userInfo;
if (!currentUser?.userId) {
// 没有用户信息,尝试从本地存储获取
const userId = Taro.getStorageSync('UserId');
if (!userId) {
setError('请先登录小程序');
Taro.showToast({
title: '请先登录小程序',
icon: 'none'
});
}, 1500);
return;
setTimeout(() => {
Taro.switchTab({
url: '/pages/user/user'
});
}, 1500);
return;
}
currentUser && (currentUser.userId = Number(userId));
}
try {
@@ -134,11 +192,11 @@ const QRConfirmPage: React.FC = () => {
const result = await confirmQRLogin({
token: confirmToken,
userId: user.userId,
userId: currentUser.userId,
platform: 'wechat',
wechatInfo: {
nickname: user.nickname,
avatar: user.avatar
nickname: currentUser.nickname || currentUser.username,
avatar: currentUser.avatar
}
});
@@ -324,7 +382,8 @@ const QRConfirmPage: React.FC = () => {
if (loginMethod === 'url') {
return '检测到登录请求,是否确认登录?';
}
return `确认使用 ${getDisplayName()} 登录网页端?`;
const displayName = userInfo?.nickname || userInfo?.username || '当前用户';
return `确认使用 ${displayName} 登录网页端?`;
};
return (
@@ -355,13 +414,13 @@ const QRConfirmPage: React.FC = () => {
</Text>
{/* 用户信息 */}
{!loading && !confirmed && !error && user && (
{!loading && !confirmed && !error && userInfo && (
<View className="bg-gray-50 rounded-xl p-4 mb-6">
<View className="flex items-center justify-center">
{user.avatar ? (
{userInfo.avatar ? (
<View
className="w-12 h-12 rounded-full bg-blue-100 mr-3 overflow-hidden"
style={{ backgroundImage: `url(${user.avatar})`, backgroundSize: 'cover' }}
style={{ backgroundImage: `url(${userInfo.avatar})`, backgroundSize: 'cover' }}
/>
) : (
<View className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3">
@@ -370,10 +429,10 @@ const QRConfirmPage: React.FC = () => {
)}
<View className="text-left">
<Text className="text-sm font-medium text-gray-800 block">
{user.nickname || user.username || '用户'}
{userInfo.nickname || userInfo.username || '用户'}
</Text>
<Text className="text-xs text-gray-500 block">
ID: {user.userId}
ID: {userInfo.userId}
</Text>
</View>
</View>