tool oauth

2026-05-05 09:58:04 +08:00 · 2025-07-08 18:20:30 +08:00
parent c53d5c105b
commit 0f1be60daa
23 changed files with 978 additions and 268 deletions
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@ -0,0 +1,109 @@
+import {
+  memo,
+  useCallback,
+  useRef,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiExternalLinkLine } from '@remixicon/react'
+import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import Modal from '@/app/components/base/modal/modal'
+import {
+  useAddPluginToolCredential,
+  useGetPluginToolCredentialSchema,
+  useInvalidPluginToolCredentialInfo,
+  useUpdatePluginToolCredential,
+} from '@/service/use-plugins-auth'
+import { CredentialTypeEnum } from '../types'
+import AuthForm from '@/app/components/base/form/form-scenarios/auth'
+import type { FromRefObject } from '@/app/components/base/form/types'
+import { useToastContext } from '@/app/components/base/toast'
+
+export type ApiKeyModalProps = {
+  provider: string
+  onClose?: () => void
+  editValues?: Record<string, any>
+  onRemove?: () => void
+}
+const ApiKeyModal = ({
+  provider,
+  onClose,
+  editValues,
+  onRemove,
+}: ApiKeyModalProps) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const { data } = useGetPluginToolCredentialSchema(provider, CredentialTypeEnum.API_KEY)
+  const { mutateAsync: addPluginToolCredential } = useAddPluginToolCredential(provider)
+  const { mutateAsync: updatePluginToolCredential } = useUpdatePluginToolCredential(provider)
+  const invalidatePluginToolCredentialInfo = useInvalidPluginToolCredentialInfo(provider)
+  const formRef = useRef<FromRefObject>(null)
+  const handleConfirm = useCallback(async () => {
+    const store = formRef.current?.getFormStore()
+    const values = store?.state.values
+
+    if (editValues) {
+      await updatePluginToolCredential({
+        credentials: values,
+        type: CredentialTypeEnum.API_KEY,
+      })
+    }
+    else {
+      await addPluginToolCredential({
+        credentials: values,
+        type: CredentialTypeEnum.API_KEY,
+      })
+    }
+    notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+
+    onClose?.()
+    invalidatePluginToolCredentialInfo()
+  }, [addPluginToolCredential, onClose, invalidatePluginToolCredentialInfo, updatePluginToolCredential, notify, t, editValues])
+
+  return (
+    <Modal
+      size='md'
+      title='API Key Authorization Configuration'
+      subTitle='After configuring credentials, all members within the workspace can use this tool when orchestrating applications.'
+      onClose={onClose}
+      onCancel={onClose}
+      footerSlot={
+        <a
+          className='system-xs-regular flex h-8 grow items-center text-text-accent'
+          href=''
+          target='_blank'
+        >
+          Get your API Key from OpenAI
+          <RiExternalLinkLine className='ml-1 h-3 w-3' />
+        </a>
+      }
+      bottomSlot={
+        <div className='flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary'>
+          <Lock01 className='mr-1 h-3 w-3 text-text-tertiary' />
+          {t('common.modelProvider.encrypted.front')}
+          <a
+            className='mx-1 text-text-accent'
+            target='_blank' rel='noopener noreferrer'
+            href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+          >
+            PKCS1_OAEP
+          </a>
+          {t('common.modelProvider.encrypted.back')}
+        </div>
+      }
+      onConfirm={handleConfirm}
+      showExtraButton={!!editValues}
+      onExtraButtonClick={onRemove}
+    >
+      <AuthForm
+        ref={formRef}
+        formSchemas={data}
+        defaultValues={editValues}
+      />
+    </Modal>
+  )
+}
+
+export default memo(ApiKeyModal)