292 lines
9.8 KiB
TypeScript
292 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { AuthType } from "@/lib/api/externalRestApiConnection";
|
|
|
|
interface AuthenticationConfigProps {
|
|
authType: AuthType;
|
|
authConfig: any;
|
|
onAuthTypeChange: (type: AuthType) => void;
|
|
onAuthConfigChange: (config: any) => void;
|
|
}
|
|
|
|
export function AuthenticationConfig({
|
|
authType,
|
|
authConfig = {},
|
|
onAuthTypeChange,
|
|
onAuthConfigChange,
|
|
}: AuthenticationConfigProps) {
|
|
// 인증 설정 변경
|
|
const updateAuthConfig = (field: string, value: string) => {
|
|
onAuthConfigChange({
|
|
...authConfig,
|
|
[field]: value,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 인증 타입 선택 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="auth-type">인증 타입</Label>
|
|
<Select value={authType} onValueChange={(value) => onAuthTypeChange(value as AuthType)}>
|
|
<SelectTrigger id="auth-type">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">인증 없음</SelectItem>
|
|
<SelectItem value="api-key">API Key</SelectItem>
|
|
<SelectItem value="bearer">Bearer Token</SelectItem>
|
|
<SelectItem value="basic">Basic Auth</SelectItem>
|
|
<SelectItem value="oauth2">OAuth 2.0</SelectItem>
|
|
<SelectItem value="db-token">DB 토큰</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 인증 타입별 설정 필드 */}
|
|
{authType === "api-key" && (
|
|
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
|
<h4 className="text-sm font-medium">API Key 설정</h4>
|
|
|
|
{/* 키 위치 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="key-location">키 위치</Label>
|
|
<Select
|
|
value={authConfig.keyLocation || "header"}
|
|
onValueChange={(value) => updateAuthConfig("keyLocation", value)}
|
|
>
|
|
<SelectTrigger id="key-location">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="header">Header</SelectItem>
|
|
<SelectItem value="query">Query Parameter</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 키 이름 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="key-name">키 이름</Label>
|
|
<Input
|
|
id="key-name"
|
|
type="text"
|
|
value={authConfig.keyName || ""}
|
|
onChange={(e) => updateAuthConfig("keyName", e.target.value)}
|
|
placeholder="예: X-API-Key"
|
|
/>
|
|
</div>
|
|
|
|
{/* 키 값 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="key-value">키 값</Label>
|
|
<Input
|
|
id="key-value"
|
|
type="password"
|
|
value={authConfig.keyValue || ""}
|
|
onChange={(e) => updateAuthConfig("keyValue", e.target.value)}
|
|
placeholder="API Key를 입력하세요"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{authType === "bearer" && (
|
|
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
|
<h4 className="text-sm font-medium">Bearer Token 설정</h4>
|
|
|
|
{/* 토큰 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="token">Token</Label>
|
|
<Input
|
|
id="token"
|
|
type="password"
|
|
value={authConfig.token || ""}
|
|
onChange={(e) => updateAuthConfig("token", e.target.value)}
|
|
placeholder="Bearer Token을 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500">
|
|
* Authorization 헤더에 "Bearer {token}" 형식으로 전송됩니다.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{authType === "basic" && (
|
|
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
|
<h4 className="text-sm font-medium">Basic Auth 설정</h4>
|
|
|
|
{/* 사용자명 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="username">사용자명</Label>
|
|
<Input
|
|
id="username"
|
|
type="text"
|
|
value={authConfig.username || ""}
|
|
onChange={(e) => updateAuthConfig("username", e.target.value)}
|
|
placeholder="사용자명을 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
{/* 비밀번호 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">비밀번호</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
value={authConfig.password || ""}
|
|
onChange={(e) => updateAuthConfig("password", e.target.value)}
|
|
placeholder="비밀번호를 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500">* Authorization 헤더에 Base64 인코딩된 인증 정보가 전송됩니다.</p>
|
|
</div>
|
|
)}
|
|
|
|
{authType === "oauth2" && (
|
|
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
|
<h4 className="text-sm font-medium">OAuth 2.0 설정</h4>
|
|
|
|
{/* Client ID */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="client-id">Client ID</Label>
|
|
<Input
|
|
id="client-id"
|
|
type="text"
|
|
value={authConfig.clientId || ""}
|
|
onChange={(e) => updateAuthConfig("clientId", e.target.value)}
|
|
placeholder="Client ID를 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
{/* Client Secret */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="client-secret">Client Secret</Label>
|
|
<Input
|
|
id="client-secret"
|
|
type="password"
|
|
value={authConfig.clientSecret || ""}
|
|
onChange={(e) => updateAuthConfig("clientSecret", e.target.value)}
|
|
placeholder="Client Secret을 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
{/* Token URL */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="token-url">Token URL</Label>
|
|
<Input
|
|
id="token-url"
|
|
type="text"
|
|
value={authConfig.tokenUrl || ""}
|
|
onChange={(e) => updateAuthConfig("tokenUrl", e.target.value)}
|
|
placeholder="예: https://oauth.example.com/token"
|
|
/>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500">* OAuth 2.0 Client Credentials Grant 방식을 사용합니다.</p>
|
|
</div>
|
|
)}
|
|
|
|
{authType === "db-token" && (
|
|
<div className="space-y-4 rounded-md border bg-gray-50 p-4">
|
|
<h4 className="text-sm font-medium">DB 기반 토큰 설정</h4>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="db-table-name">테이블명</Label>
|
|
<Input
|
|
id="db-table-name"
|
|
type="text"
|
|
value={authConfig.dbTableName || ""}
|
|
onChange={(e) => updateAuthConfig("dbTableName", e.target.value)}
|
|
placeholder="예: auth_tokens"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="db-value-column">값 컬럼명</Label>
|
|
<Input
|
|
id="db-value-column"
|
|
type="text"
|
|
value={authConfig.dbValueColumn || ""}
|
|
onChange={(e) =>
|
|
updateAuthConfig("dbValueColumn", e.target.value)
|
|
}
|
|
placeholder="예: access_token"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="db-where-column">조건 컬럼명</Label>
|
|
<Input
|
|
id="db-where-column"
|
|
type="text"
|
|
value={authConfig.dbWhereColumn || ""}
|
|
onChange={(e) =>
|
|
updateAuthConfig("dbWhereColumn", e.target.value)
|
|
}
|
|
placeholder="예: service_name"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="db-where-value">조건 값</Label>
|
|
<Input
|
|
id="db-where-value"
|
|
type="text"
|
|
value={authConfig.dbWhereValue || ""}
|
|
onChange={(e) =>
|
|
updateAuthConfig("dbWhereValue", e.target.value)
|
|
}
|
|
placeholder="예: kakao"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="db-header-name">헤더 이름 (선택)</Label>
|
|
<Input
|
|
id="db-header-name"
|
|
type="text"
|
|
value={authConfig.dbHeaderName || ""}
|
|
onChange={(e) =>
|
|
updateAuthConfig("dbHeaderName", e.target.value)
|
|
}
|
|
placeholder="기본값: Authorization"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="db-header-template">
|
|
헤더 템플릿 (선택, {{value}} 치환)
|
|
</Label>
|
|
<Input
|
|
id="db-header-template"
|
|
type="text"
|
|
value={authConfig.dbHeaderTemplate || ""}
|
|
onChange={(e) =>
|
|
updateAuthConfig("dbHeaderTemplate", e.target.value)
|
|
}
|
|
placeholder='기본값: "Bearer {{value}}"'
|
|
/>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500">
|
|
company_code는 현재 로그인한 사용자의 회사 코드로 자동 필터링됩니다.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{authType === "none" && (
|
|
<div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
|
|
인증이 필요하지 않은 공개 API입니다.
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|