feat: passkey

2026-04-29 04:28:37 +00:00 · 2025-09-29 17:45:09 +08:00
parent a91f3e7556
commit dcf4336c75
30 changed files with 2924 additions and 110 deletions
--- a/web/src/components/table/channels/modals/EditChannelModal.jsx
+++ b/web/src/components/table/channels/modals/EditChannelModal.jsx
@@ -56,8 +56,10 @@ import {
 } from '../../../../helpers';
 import ModelSelectModal from './ModelSelectModal';
 import JSONEditor from '../../../common/ui/JSONEditor';
-import TwoFactorAuthModal from '../../../common/modals/TwoFactorAuthModal';
+import SecureVerificationModal from '../../../common/modals/SecureVerificationModal';
 import ChannelKeyDisplay from '../../../common/ui/ChannelKeyDisplay';
+import { useSecureVerification } from '../../../../hooks/common/useSecureVerification';
+import { createApiCalls } from '../../../../services/secureVerification';
 import {
  IconSave,
  IconClose,
@@ -193,43 +195,43 @@ const EditChannelModal = (props) => {
  const [keyMode, setKeyMode] = useState('append'); // 密钥模式：replace（覆盖）或 append（追加）
  const [isEnterpriseAccount, setIsEnterpriseAccount] = useState(false); // 是否为企业账户

-  // 2FA验证查看密钥相关状态
-  const [twoFAState, setTwoFAState] = useState({
+  // 密钥显示状态
+  const [keyDisplayState, setKeyDisplayState] = useState({
    showModal: false,
-    code: '',
-    loading: false,
-    showKey: false,
    keyData: '',
  });

-  // 专门的2FA验证状态（用于TwoFactorAuthModal）
-  const [show2FAVerifyModal, setShow2FAVerifyModal] = useState(false);
-  const [verifyCode, setVerifyCode] = useState('');
-  const [verifyLoading, setVerifyLoading] = useState(false);
+  // 使用通用安全验证 Hook
+  const {
+    isModalVisible,
+    verificationMethods,
+    verificationState,
+    startVerification,
+    executeVerification,
+    cancelVerification,
+    setVerificationCode,
+    switchVerificationMethod,
+  } = useSecureVerification({
+    onSuccess: (result) => {
+      // 验证成功后显示密钥
+      if (result.success && result.data?.key) {
+        setKeyDisplayState({
+          showModal: true,
+          keyData: result.data.key,
+        });
+      }
+    },
+    successMessage: t('密钥获取成功'),
+  });

-  // 2FA状态更新辅助函数
-  const updateTwoFAState = (updates) => {
-    setTwoFAState((prev) => ({ ...prev, ...updates }));
-  };
-
-  // 重置2FA状态
-  const resetTwoFAState = () => {
-    setTwoFAState({
+  // 重置密钥显示状态
+  const resetKeyDisplayState = () => {
+    setKeyDisplayState({
      showModal: false,
-      code: '',
-      loading: false,
-      showKey: false,
      keyData: '',
    });
  };

-  // 重置2FA验证状态
-  const reset2FAVerifyState = () => {
-    setShow2FAVerifyModal(false);
-    setVerifyCode('');
-    setVerifyLoading(false);
-  };
-
  // 渠道额外设置状态
  const [channelSettings, setChannelSettings] = useState({
    force_format: false,
@@ -602,42 +604,31 @@ const EditChannelModal = (props) => {
    }
  };

-  // 使用TwoFactorAuthModal的验证函数
-  const handleVerify2FA = async () => {
-    if (!verifyCode) {
-      showError(t('请输入验证码或备用码'));
-      return;
-    }
-
-    setVerifyLoading(true);
+  // 显示安全验证模态框并开始验证流程
+  const handleShow2FAModal = async () => {
    try {
-      const res = await API.post(`/api/channel/${channelId}/key`, {
-        code: verifyCode,
+      console.log('=== handleShow2FAModal called ===');
+      console.log('channelId:', channelId);
+      console.log('startVerification function:', typeof startVerification);
+      
+      // 测试模态框状态
+      console.log('Current modal state:', isModalVisible);
+      
+      const apiCall = createApiCalls.viewChannelKey(channelId);
+      console.log('apiCall created:', typeof apiCall);
+      
+      const result = await startVerification(apiCall, {
+        title: t('查看渠道密钥'),
+        description: t('为了保护账户安全，请验证您的身份。'),
+        preferredMethod: 'passkey', // 优先使用 Passkey
      });
-      if (res.data.success) {
-        // 验证成功，显示密钥
-        updateTwoFAState({
-          showModal: true,
-          showKey: true,
-          keyData: res.data.data.key,
-        });
-        reset2FAVerifyState();
-        showSuccess(t('验证成功'));
-      } else {
-        showError(res.data.message);
-      }
+      console.log('startVerification result:', result);
    } catch (error) {
-      showError(t('获取密钥失败'));
-    } finally {
-      setVerifyLoading(false);
+      console.error('handleShow2FAModal error:', error);
+      showError(error.message || t('启动验证失败'));
    }
  };

-  // 显示2FA验证模态框 - 使用TwoFactorAuthModal
-  const handleShow2FAModal = () => {
-    setShow2FAVerifyModal(true);
-  };
-
  useEffect(() => {
    const modelMap = new Map();

@@ -741,10 +732,8 @@ const EditChannelModal = (props) => {
    }
    // 重置本地输入，避免下次打开残留上一次的 JSON 字段值
    setInputs(getInitValues());
-    // 重置2FA状态
-    resetTwoFAState();
-    // 重置2FA验证状态
-    reset2FAVerifyState();
+    // 重置密钥显示状态
+    resetKeyDisplayState();
  };

  const handleVertexUploadChange = ({ fileList }) => {
@@ -2498,17 +2487,17 @@ const EditChannelModal = (props) => {
          onVisibleChange={(visible) => setIsModalOpenurl(visible)}
        />
      </SideSheet>
-      {/* 使用TwoFactorAuthModal组件进行2FA验证 */}
-      <TwoFactorAuthModal
-        visible={show2FAVerifyModal}
-        code={verifyCode}
-        loading={verifyLoading}
-        onCodeChange={setVerifyCode}
-        onVerify={handleVerify2FA}
-        onCancel={reset2FAVerifyState}
-        title={t('查看渠道密钥')}
-        description={t('为了保护账户安全，请验证您的两步验证码。')}
-        placeholder={t('请输入验证码或备用码')}
+      {/* 使用通用安全验证模态框 */}
+      <SecureVerificationModal
+        visible={isModalVisible}
+        verificationMethods={verificationMethods}
+        verificationState={verificationState}
+        onVerify={executeVerification}
+        onCancel={cancelVerification}
+        onCodeChange={setVerificationCode}
+        onMethodSwitch={switchVerificationMethod}
+        title={verificationState.title}
+        description={verificationState.description}
      />

      {/* 使用ChannelKeyDisplay组件显示密钥 */}
@@ -2531,10 +2520,10 @@ const EditChannelModal = (props) => {
            {t('渠道密钥信息')}
          </div>
        }
-        visible={twoFAState.showModal && twoFAState.showKey}
-        onCancel={resetTwoFAState}
+        visible={keyDisplayState.showModal}
+        onCancel={resetKeyDisplayState}
        footer={
-          <Button type='primary' onClick={resetTwoFAState}>
+          <Button type='primary' onClick={resetKeyDisplayState}>
            {t('完成')}
          </Button>
        }
@@ -2542,7 +2531,7 @@ const EditChannelModal = (props) => {
        style={{ maxWidth: '90vw' }}
      >
        <ChannelKeyDisplay
-          keyData={twoFAState.keyData}
+          keyData={keyDisplayState.keyData}
          showSuccessIcon={true}
          successText={t('密钥获取成功')}
          showWarning={true}
--- a/web/src/components/table/users/UsersColumnDefs.jsx
+++ b/web/src/components/table/users/UsersColumnDefs.jsx
@@ -204,6 +204,8 @@ const renderOperations = (
    showDemoteModal,
    showEnableDisableModal,
    showDeleteModal,
+    showResetPasskeyModal,
+    showResetTwoFAModal,
    t,
  },
 ) => {
@@ -253,6 +255,20 @@ const renderOperations = (
      >
        {t('降级')}
      </Button>
+      <Button
+        type='warning'
+        size='small'
+        onClick={() => showResetPasskeyModal(record)}
+      >
+        {t('重置 Passkey')}
+      </Button>
+      <Button
+        type='warning'
+        size='small'
+        onClick={() => showResetTwoFAModal(record)}
+      >
+        {t('重置 2FA')}
+      </Button>
      <Button
        type='danger'
        size='small'
@@ -275,6 +291,8 @@ export const getUsersColumns = ({
  showDemoteModal,
  showEnableDisableModal,
  showDeleteModal,
+  showResetPasskeyModal,
+  showResetTwoFAModal,
 }) => {
  return [
    {
@@ -329,6 +347,8 @@ export const getUsersColumns = ({
          showDemoteModal,
          showEnableDisableModal,
          showDeleteModal,
+          showResetPasskeyModal,
+          showResetTwoFAModal,
          t,
        }),
    },
--- a/web/src/components/table/users/UsersTable.jsx
+++ b/web/src/components/table/users/UsersTable.jsx
@@ -29,6 +29,8 @@ import PromoteUserModal from './modals/PromoteUserModal';
 import DemoteUserModal from './modals/DemoteUserModal';
 import EnableDisableUserModal from './modals/EnableDisableUserModal';
 import DeleteUserModal from './modals/DeleteUserModal';
+import ResetPasskeyModal from './modals/ResetPasskeyModal';
+import ResetTwoFAModal from './modals/ResetTwoFAModal';

 const UsersTable = (usersData) => {
  const {
@@ -45,6 +47,8 @@ const UsersTable = (usersData) => {
    setShowEditUser,
    manageUser,
    refresh,
+    resetUserPasskey,
+    resetUserTwoFA,
    t,
  } = usersData;

@@ -55,6 +59,8 @@ const UsersTable = (usersData) => {
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [modalUser, setModalUser] = useState(null);
  const [enableDisableAction, setEnableDisableAction] = useState('');
+  const [showResetPasskeyModal, setShowResetPasskeyModal] = useState(false);
+  const [showResetTwoFAModal, setShowResetTwoFAModal] = useState(false);

  // Modal handlers
  const showPromoteUserModal = (user) => {
@@ -78,6 +84,16 @@ const UsersTable = (usersData) => {
    setShowDeleteModal(true);
  };

+  const showResetPasskeyUserModal = (user) => {
+    setModalUser(user);
+    setShowResetPasskeyModal(true);
+  };
+
+  const showResetTwoFAUserModal = (user) => {
+    setModalUser(user);
+    setShowResetTwoFAModal(true);
+  };
+
  // Modal confirm handlers
  const handlePromoteConfirm = () => {
    manageUser(modalUser.id, 'promote', modalUser);
@@ -94,6 +110,16 @@ const UsersTable = (usersData) => {
    setShowEnableDisableModal(false);
  };

+  const handleResetPasskeyConfirm = async () => {
+    await resetUserPasskey(modalUser);
+    setShowResetPasskeyModal(false);
+  };
+
+  const handleResetTwoFAConfirm = async () => {
+    await resetUserTwoFA(modalUser);
+    setShowResetTwoFAModal(false);
+  };
+
  // Get all columns
  const columns = useMemo(() => {
    return getUsersColumns({
@@ -104,8 +130,20 @@ const UsersTable = (usersData) => {
      showDemoteModal: showDemoteUserModal,
      showEnableDisableModal: showEnableDisableUserModal,
      showDeleteModal: showDeleteUserModal,
+      showResetPasskeyModal: showResetPasskeyUserModal,
+      showResetTwoFAModal: showResetTwoFAUserModal,
    });
-  }, [t, setEditingUser, setShowEditUser]);
+  }, [
+    t,
+    setEditingUser,
+    setShowEditUser,
+    showPromoteUserModal,
+    showDemoteUserModal,
+    showEnableDisableUserModal,
+    showDeleteUserModal,
+    showResetPasskeyUserModal,
+    showResetTwoFAUserModal,
+  ]);

  // Handle compact mode by removing fixed positioning
  const tableColumns = useMemo(() => {
@@ -188,6 +226,22 @@ const UsersTable = (usersData) => {
        manageUser={manageUser}
        t={t}
      />
+
+      <ResetPasskeyModal
+        visible={showResetPasskeyModal}
+        onCancel={() => setShowResetPasskeyModal(false)}
+        onConfirm={handleResetPasskeyConfirm}
+        user={modalUser}
+        t={t}
+      />
+
+      <ResetTwoFAModal
+        visible={showResetTwoFAModal}
+        onCancel={() => setShowResetTwoFAModal(false)}
+        onConfirm={handleResetTwoFAConfirm}
+        user={modalUser}
+        t={t}
+      />
    </>
  );
 };
--- a/web/src/components/table/users/modals/ResetPasskeyModal.jsx
+++ b/web/src/components/table/users/modals/ResetPasskeyModal.jsx
@@ -0,0 +1,39 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Modal } from '@douyinfe/semi-ui';
+
+const ResetPasskeyModal = ({ visible, onCancel, onConfirm, user, t }) => {
+  return (
+    <Modal
+      title={t('确认重置 Passkey')}
+      visible={visible}
+      onCancel={onCancel}
+      onOk={onConfirm}
+      type='warning'
+    >
+      {t('此操作将解绑用户当前的 Passkey，下次登录需要重新注册。')}{' '}
+      {user?.username ? t('目标用户：{{username}}', { username: user.username }) : ''}
+    </Modal>
+  );
+};
+
+export default ResetPasskeyModal;
+
--- a/web/src/components/table/users/modals/ResetTwoFAModal.jsx
+++ b/web/src/components/table/users/modals/ResetTwoFAModal.jsx
@@ -0,0 +1,39 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Modal } from '@douyinfe/semi-ui';
+
+const ResetTwoFAModal = ({ visible, onCancel, onConfirm, user, t }) => {
+  return (
+    <Modal
+      title={t('确认重置两步验证')}
+      visible={visible}
+      onCancel={onCancel}
+      onOk={onConfirm}
+      type='warning'
+    >
+      {t('此操作将禁用该用户当前的两步验证配置，下次登录将不再强制输入验证码，直到用户重新启用。')}{' '}
+      {user?.username ? t('目标用户：{{username}}', { username: user.username }) : ''}
+    </Modal>
+  );
+};
+
+export default ResetTwoFAModal;
+