feat(passport): 优化扫码登录确认流程,改用 wx.login + loginByOpenId 验证身份
- 移除 useUser 依赖,采用微信 wx.login 获取 code 并调用 loginByOpenId 接口验证用户身份 - 登录流程调整为先通过 code 校验用户是否存在,存在则自动确认登录, 不存在跳转注册页面 - 增加用户信息本地缓存及优先使用 wx.login 返回的用户数据 - 修改二维码确认登录页面 UI,展示微信登录用户头像及昵称 - 新增 wx-login API 接口,实现通过 code 换取用户身份信息及 OpenId 获取接口 - 强化登录失败及用户未注册状态的提示和跳转逻辑
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user