rest api 관리 구현
This commit is contained in:
dohyeons
202
frontend/components/admin/AuthenticationConfig.tsx
Normal file
202
frontend/components/admin/AuthenticationConfig.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
"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>
|
||||
</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 === "none" && (
|
||||
<div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
|
||||
인증이 필요하지 않은 공개 API입니다.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user