feat(tool): add support for API key authentication via query parameter (#21656)

web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx

@@ -68,23 +68,34 @@ const ConfigCredential: FC<Props> = ({
                   text={t('tools.createTool.authMethod.types.none')}
                   value={AuthType.none}
                   isChecked={tempCredential.auth_type === AuthType.none}
-                  onClick={value => setTempCredential({ ...tempCredential, auth_type: value as AuthType })}
+                  onClick={value => setTempCredential({
+                    auth_type: value as AuthType,
+                  })}
                 />
                 <SelectItem
-                  text={t('tools.createTool.authMethod.types.api_key')}
-                  value={AuthType.apiKey}
-                  isChecked={tempCredential.auth_type === AuthType.apiKey}
+                  text={t('tools.createTool.authMethod.types.api_key_header')}
+                  value={AuthType.apiKeyHeader}
+                  isChecked={tempCredential.auth_type === AuthType.apiKeyHeader}
                   onClick={value => setTempCredential({
-                    ...tempCredential,
                     auth_type: value as AuthType,
                     api_key_header: tempCredential.api_key_header || 'Authorization',
                     api_key_value: tempCredential.api_key_value || '',
                     api_key_header_prefix: tempCredential.api_key_header_prefix || AuthHeaderPrefix.custom,
                   })}
                 />
+                <SelectItem
+                  text={t('tools.createTool.authMethod.types.api_key_query')}
+                  value={AuthType.apiKeyQuery}
+                  isChecked={tempCredential.auth_type === AuthType.apiKeyQuery}
+                  onClick={value => setTempCredential({
+                    auth_type: value as AuthType,
+                    api_key_query_param: tempCredential.api_key_query_param || 'key',
+                    api_key_value: tempCredential.api_key_value || '',
+                  })}
+                />
               </div>
             </div>
-            {tempCredential.auth_type === AuthType.apiKey && (
+            {tempCredential.auth_type === AuthType.apiKeyHeader && (
               <>
                 <div>
                   <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authHeaderPrefix.title')}</div>
@@ -136,6 +147,35 @@ const ConfigCredential: FC<Props> = ({
                   />
                 </div>
               </>)}
+            {tempCredential.auth_type === AuthType.apiKeyQuery && (
+              <>
+                <div>
+                  <div className='system-sm-medium flex items-center py-2 text-text-primary'>
+                    {t('tools.createTool.authMethod.queryParam')}
+                    <Tooltip
+                      popupContent={
+                        <div className='w-[261px] text-text-tertiary'>
+                          {t('tools.createTool.authMethod.queryParamTooltip')}
+                        </div>
+                      }
+                      triggerClassName='ml-0.5 w-4 h-4'
+                    />
+                  </div>
+                  <Input
+                    value={tempCredential.api_key_query_param}
+                    onChange={e => setTempCredential({ ...tempCredential, api_key_query_param: e.target.value })}
+                    placeholder={t('tools.createTool.authMethod.types.queryParamPlaceholder')!}
+                  />
+                </div>
+                <div>
+                  <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.value')}</div>
+                  <Input
+                    value={tempCredential.api_key_value}
+                    onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
+                    placeholder={t('tools.createTool.authMethod.types.apiValuePlaceholder')!}
+                  />
+                </div>
+              </>)}
 
           </div>
 

web/app/components/tools/types.ts

@@ -7,7 +7,8 @@ export enum LOC {
 
 export enum AuthType {
   none = 'none',
-  apiKey = 'api_key',
+  apiKeyHeader = 'api_key_header',
+  apiKeyQuery = 'api_key_query',
 }
 
 export enum AuthHeaderPrefix {
@@ -21,6 +22,7 @@ export type Credential = {
   api_key_header?: string
   api_key_value?: string
   api_key_header_prefix?: AuthHeaderPrefix
+  api_key_query_param?: string
 }
 
 export enum CollectionType {

web/i18n/en-US/tools.ts

@@ -80,11 +80,15 @@ const translation = {
       title: 'Authorization method',
       type: 'Authorization type',
       keyTooltip: 'Http Header Key, You can leave it with "Authorization" if you have no idea what it is or set it to a custom value',
+      queryParam: 'Query Parameter',
+      queryParamTooltip: 'The name of the API key query parameter to pass, e.g. "key" in "https://example.com/test?key=API_KEY".',
       types: {
         none: 'None',
-        api_key: 'API Key',
+        api_key_header: 'Header',
+        api_key_query: 'Query Param',
         apiKeyPlaceholder: 'HTTP header name for API Key',
         apiValuePlaceholder: 'Enter API Key',
+        queryParamPlaceholder: 'Query parameter name for API Key',
       },
       key: 'Key',
       value: 'Value',

web/i18n/zh-Hans/tools.ts

@@ -80,11 +80,15 @@ const translation = {
       title: '鉴权方法',
       type: '鉴权类型',
       keyTooltip: 'HTTP 头部名称，如果你不知道是什么，可以将其保留为 Authorization 或设置为自定义值',
+      queryParam: '查询参数',
+      queryParamTooltip: '用于传递 API 密钥查询参数的名称, 如 "https://example.com/test?key=API_KEY" 中的 "key"参数',
       types: {
         none: '无',
-        api_key: 'API Key',
+        api_key_header: '请求头',
+        api_key_query: '查询参数',
         apiKeyPlaceholder: 'HTTP 头部名称，用于传递 API Key',
         apiValuePlaceholder: '输入 API Key',
+        queryParamPlaceholder: '查询参数名称，用于传递 API Key',
       },
       key: '键',
       value: '值',