일반 사용자의 DevFront 접근 및 RP 관리자 권한 연동

2026-04-20 14:16:24 +09:00
parent 51e46a4d00
commit e15de6d334
12 changed files with 570 additions and 182 deletions
--- a/devfront/src/components/common/ForbiddenMessage.tsx
+++ b/devfront/src/components/common/ForbiddenMessage.tsx
@@ -30,7 +30,7 @@ export function ForbiddenMessage({ resourceToken }: Props) {
  } else if (role === "user" || role === "tenant_member") {
    explanation = t(
      "msg.dev.forbidden.user",
-      "일반 사용자는 관리자 화면에 접근할 수 없습니다.",
+      "일반 사용자 계정은 담당 RP(앱) 관리자 권한이 부여된 경우에만 해당 기능을 사용할 수 있습니다. 권한이 필요하면 관리자에게 요청하세요.",
    );
  }

--- a/devfront/src/features/clients/ClientRelationsPage.tsx
+++ b/devfront/src/features/clients/ClientRelationsPage.tsx
@@ -37,6 +37,7 @@ import { ClientDetailTabs } from "./ClientDetailTabs";
 const relationOptions = [
  "admins",
  "config_editor",
+  "secret_viewer",
  "secret_rotator",
  "jwks_viewer",
  "jwks_operator",
@@ -78,7 +79,6 @@ function ClientRelationsPage() {
    null,
  );
  const [isSearchOpen, setIsSearchOpen] = useState(false);
-
  const { data: clientData } = useQuery({
    queryKey: ["client", clientId],
    queryFn: () => fetchClient(clientId),
@@ -95,13 +95,21 @@ function ClientRelationsPage() {
    enabled: clientId.length > 0,
  });

+  const isRelationshipViewForbidden =
+    (error as AxiosError | null)?.response?.status === 403;
+  const relationshipViewForbiddenMessage = t(
+    "msg.dev.clients.relationships.view_forbidden",
+    "이 RP의 관계를 조회할 권한이 없습니다. 관리자에게 관계 조회 또는 RP 관리자 관계 부여를 요청해 주세요.",
+  );
+
  const { data: userSearchData, isFetching: isUserSearchLoading } = useQuery({
    queryKey: ["dev-users", deferredUserSearch],
-    queryFn: () => fetchDevUsers(deferredUserSearch),
+    queryFn: () => fetchDevUsers(deferredUserSearch, 10, clientId),
    enabled:
      clientId.length > 0 &&
      deferredUserSearch.length > 0 &&
-      selectedUser == null,
+      selectedUser == null &&
+      !isRelationshipViewForbidden,
  });

  const sortedItems = useMemo(() => {
@@ -342,147 +350,156 @@ function ClientRelationsPage() {
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
-          <div className="space-y-2">
-            <Label htmlFor="user-search-input">
-              {t("ui.dev.clients.relationships.user_search", "사용자")}
-            </Label>
-            <div className="relative">
-              <Input
-                id="user-search-input"
-                value={userSearch}
-                onFocus={() => {
-                  if (!selectedUser && userSearch.trim() !== "") {
-                    setIsSearchOpen(true);
-                  }
-                }}
-                onChange={(event) => {
-                  setSelectedUser(null);
-                  setUserSearch(event.target.value);
-                  setIsSearchOpen(true);
-                }}
-                placeholder={t(
-                  "ui.dev.clients.relationships.user_search_placeholder",
-                  "이름 또는 이메일 검색...",
-                )}
-              />
-              {isSearchOpen &&
-                selectedUser == null &&
-                userSearch.trim() !== "" && (
-                  <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg">
-                    {isUserSearchLoading ? (
-                      <div className="px-3 py-2 text-sm text-muted-foreground">
-                        {t(
-                          "msg.dev.clients.relationships.search_loading",
-                          "사용자를 찾는 중입니다...",
-                        )}
-                      </div>
-                    ) : (userSearchData?.items ?? []).length > 0 ? (
-                      (userSearchData?.items ?? []).map((user) => (
-                        <button
-                          key={user.id}
-                          type="button"
-                          className="flex w-full flex-col gap-1 px-3 py-2 text-left hover:bg-muted/40"
-                          onMouseDown={(event) => {
-                            event.preventDefault();
-                            handleSelectUser(user);
-                          }}
-                        >
-                          <span className="text-sm font-semibold">
-                            {user.name || user.email}
-                          </span>
-                          <span className="text-xs text-muted-foreground">
-                            {user.email}
-                            {user.loginId ? ` · ${user.loginId}` : ""}
-                          </span>
-                        </button>
-                      ))
-                    ) : (
-                      <div className="px-3 py-2 text-sm text-muted-foreground">
-                        {t(
-                          "msg.dev.clients.relationships.search_empty",
-                          "검색 결과가 없습니다.",
+          {isRelationshipViewForbidden ? (
+            <div className="rounded-md border border-border bg-muted/30 p-4 text-sm text-muted-foreground">
+              {relationshipViewForbiddenMessage}
+            </div>
+          ) : (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="user-search-input">
+                  {t("ui.dev.clients.relationships.user_search", "사용자")}
+                </Label>
+                <div className="relative">
+                  <Input
+                    id="user-search-input"
+                    value={userSearch}
+                    onFocus={() => {
+                      if (!selectedUser && userSearch.trim() !== "") {
+                        setIsSearchOpen(true);
+                      }
+                    }}
+                    onChange={(event) => {
+                      setSelectedUser(null);
+                      setUserSearch(event.target.value);
+                      setIsSearchOpen(true);
+                    }}
+                    placeholder={t(
+                      "ui.dev.clients.relationships.user_search_placeholder",
+                      "이름 또는 이메일 검색...",
+                    )}
+                  />
+                  {isSearchOpen &&
+                    selectedUser == null &&
+                    userSearch.trim() !== "" && (
+                      <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg">
+                        {isUserSearchLoading ? (
+                          <div className="px-3 py-2 text-sm text-muted-foreground">
+                            {t(
+                              "msg.dev.clients.relationships.search_loading",
+                              "사용자를 찾는 중입니다...",
+                            )}
+                          </div>
+                        ) : (userSearchData?.items ?? []).length > 0 ? (
+                          (userSearchData?.items ?? []).map((user) => (
+                            <button
+                              key={user.id}
+                              type="button"
+                              className="flex w-full flex-col gap-1 px-3 py-2 text-left hover:bg-muted/40"
+                              onMouseDown={(event) => {
+                                event.preventDefault();
+                                handleSelectUser(user);
+                              }}
+                            >
+                              <span className="text-sm font-semibold">
+                                {user.name || user.email}
+                              </span>
+                              <span className="text-xs text-muted-foreground">
+                                {user.email}
+                                {user.loginId ? ` · ${user.loginId}` : ""}
+                              </span>
+                            </button>
+                          ))
+                        ) : (
+                          <div className="px-3 py-2 text-sm text-muted-foreground">
+                            {t(
+                              "msg.dev.clients.relationships.search_empty",
+                              "검색 결과가 없습니다.",
+                            )}
+                          </div>
                        )}
                      </div>
                    )}
-                  </div>
+                </div>
+                {selectedUser && (
+                  <p className="text-xs text-muted-foreground">
+                    {t(
+                      "msg.dev.clients.relationships.selected_user",
+                      "선택된 사용자: {{user}}",
+                      { user: formatUserLabel(selectedUser) },
+                    )}
+                  </p>
                )}
-            </div>
-            {selectedUser && (
-              <p className="text-xs text-muted-foreground">
-                {t(
-                  "msg.dev.clients.relationships.selected_user",
-                  "선택된 사용자: {{user}}",
-                  { user: formatUserLabel(selectedUser) },
-                )}
-              </p>
-            )}
-          </div>
+              </div>

-          <div className="space-y-3">
-            <Label>
-              {t("ui.dev.clients.relationships.relation", "Relation")}
-            </Label>
-            <div className="grid gap-3 md:grid-cols-2">
-              {relationOptions.map((relation) => {
-                const disabled = selectedUserExistingRelations.has(relation);
-                const isSelected = selectedRelations.includes(relation);
-                return (
-                  <label
-                    key={relation}
-                    className={`flex gap-3 rounded-xl border p-4 transition-all ${
-                      disabled
-                        ? "border-border/60 bg-muted/30 opacity-60"
-                        : isSelected
-                          ? "border-primary bg-primary/10 shadow-[0_0_0_1px_rgba(59,130,246,0.35)] ring-1 ring-primary/30"
-                          : "border-border bg-background hover:border-primary/40 hover:bg-muted/20"
-                    }`}
-                  >
-                    <input
-                      type="checkbox"
-                      className="mt-1 h-4 w-4 accent-primary"
-                      checked={isSelected || disabled}
-                      disabled={disabled}
-                      onChange={() => handleRelationToggle(relation)}
-                    />
-                    <div className="space-y-1">
-                      <div
-                        className={`text-sm font-semibold ${
-                          isSelected && !disabled ? "text-primary" : ""
+              <div className="space-y-3">
+                <Label>
+                  {t("ui.dev.clients.relationships.relation", "Relation")}
+                </Label>
+                <div className="grid gap-3 md:grid-cols-2">
+                  {relationOptions.map((relation) => {
+                    const disabled =
+                      selectedUserExistingRelations.has(relation);
+                    const isSelected = selectedRelations.includes(relation);
+                    return (
+                      <label
+                        key={relation}
+                        className={`flex gap-3 rounded-xl border p-4 transition-all ${
+                          disabled
+                            ? "border-border/60 bg-muted/30 opacity-60"
+                            : isSelected
+                              ? "border-primary bg-primary/10 shadow-[0_0_0_1px_rgba(59,130,246,0.35)] ring-1 ring-primary/30"
+                              : "border-border bg-background hover:border-primary/40 hover:bg-muted/20"
                        }`}
                      >
-                        {relationLabel(relation)}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {relationDescription(relation)}
-                      </div>
-                      <div
-                        className={`text-[11px] uppercase tracking-wide ${
-                          isSelected && !disabled
-                            ? "text-primary/80"
-                            : "text-muted-foreground/80"
-                        }`}
-                      >
-                        {relation}
-                      </div>
-                    </div>
-                  </label>
-                );
-              })}
-            </div>
-          </div>
+                        <input
+                          type="checkbox"
+                          className="mt-1 h-4 w-4 accent-primary"
+                          checked={isSelected || disabled}
+                          disabled={disabled}
+                          onChange={() => handleRelationToggle(relation)}
+                        />
+                        <div className="space-y-1">
+                          <div
+                            className={`text-sm font-semibold ${
+                              isSelected && !disabled ? "text-primary" : ""
+                            }`}
+                          >
+                            {relationLabel(relation)}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {relationDescription(relation)}
+                          </div>
+                          <div
+                            className={`text-[11px] uppercase tracking-wide ${
+                              isSelected && !disabled
+                                ? "text-primary/80"
+                                : "text-muted-foreground/80"
+                            }`}
+                          >
+                            {relation}
+                          </div>
+                        </div>
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>

-          <div className="flex justify-end">
-            <Button
-              onClick={handleAdd}
-              disabled={addMutation.isPending}
-              className="gap-2"
-            >
-              <Plus className="h-4 w-4" />
-              {addMutation.isPending
-                ? t("msg.common.loading", "Loading...")
-                : t("ui.dev.clients.relationships.add", "Add")}
-            </Button>
-          </div>
+              <div className="flex justify-end">
+                <Button
+                  onClick={handleAdd}
+                  disabled={addMutation.isPending}
+                  className="gap-2"
+                >
+                  <Plus className="h-4 w-4" />
+                  {addMutation.isPending
+                    ? t("msg.common.loading", "Loading...")
+                    : t("ui.dev.clients.relationships.add", "Add")}
+                </Button>
+              </div>
+            </>
+          )}
        </CardContent>
      </Card>

@@ -503,7 +520,11 @@ function ClientRelationsPage() {
          </CardDescription>
        </CardHeader>
        <CardContent>
-          {error ? (
+          {isRelationshipViewForbidden ? (
+            <div className="rounded-md border border-border bg-muted/30 p-4 text-sm text-muted-foreground">
+              {relationshipViewForbiddenMessage}
+            </div>
+          ) : error ? (
            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
              {t(
                "msg.dev.clients.relationships.load_error",
--- a/devfront/src/lib/devApi.ts
+++ b/devfront/src/lib/devApi.ts
@@ -202,11 +202,15 @@ export async function fetchClientRelations(clientId: string) {
  return data;
 }

-export async function fetchDevUsers(search: string, limit = 10) {
+export async function fetchDevUsers(
+  search: string,
+  limit = 10,
+  clientId?: string,
+) {
  const { data } = await apiClient.get<DevAssignableUserListResponse>(
    "/dev/users",
    {
-      params: { search, limit },
+      params: { search, limit, clientId },
    },
  );
  return data;
--- a/devfront/src/locales/en.toml
+++ b/devfront/src/locales/en.toml
@@ -388,8 +388,10 @@ list_description = "Lists operator relations directly assigned to this RP."
 load_error = "Failed to load relationships: {{error}}"
 loading = "Loading relationships..."
 empty = "No direct relationships assigned."
+view_forbidden = "You do not have permission to view relationships for this RP. Ask an administrator to grant Relationship Viewer or RP Admin relationship."
 search_loading = "Searching users..."
 search_empty = "No users found."
+search_forbidden_user = "General users cannot use user search for relationship assignment."
 selected_user = "Selected user: {{user}}"

 [msg.dev.clients.federation]
@@ -1491,6 +1493,10 @@ description = "Marks the operator who created this RP."
 label = "RP General Settings"
 description = "Edit the name, redirect URIs, and general metadata."

+[ui.dev.clients.relationships.option.secret_viewer]
+label = "Secret View"
+description = "View the Client secret for this RP."
+
 [ui.dev.clients.relationships.option.secret_rotator]
 label = "Secret Rotation"
 description = "Rotate and reissue the client secret."
--- a/devfront/src/locales/ko.toml
+++ b/devfront/src/locales/ko.toml
@@ -388,8 +388,10 @@ list_description = "현재 RP에 직접 부여된 operator relation 목록입니
 load_error = "관계 조회 실패: {{error}}"
 loading = "관계를 불러오는 중입니다..."
 empty = "직접 부여된 관계가 없습니다."
+view_forbidden = "이 RP의 관계를 조회할 권한이 없습니다. 관리자에게 관계 조회 또는 RP 관리자 관계 부여를 요청해 주세요."
 search_loading = "사용자를 찾는 중입니다..."
 search_empty = "검색 결과가 없습니다."
+search_forbidden_user = "일반 사용자는 관계 추가를 위한 사용자 검색을 사용할 수 없습니다."
 selected_user = "선택된 사용자: {{user}}"

 [msg.dev.clients.federation]
@@ -1490,6 +1492,10 @@ description = "이 RP를 생성한 운영 주체를 표시합니다."
 label = "RP 일반 설정"
 description = "이름, Redirect URI, 메타데이터 같은 일반 설정을 수정합니다."

+[ui.dev.clients.relationships.option.secret_viewer]
+label = "시크릿 조회"
+description = "이 RP의 Client secret을 조회합니다."
+
 [ui.dev.clients.relationships.option.secret_rotator]
 label = "시크릿 재발급"
 description = "Client secret 재발급과 회전을 수행합니다."
--- a/devfront/src/locales/template.toml
+++ b/devfront/src/locales/template.toml
@@ -388,8 +388,10 @@ list_description = ""
 load_error = ""
 loading = ""
 empty = ""
+view_forbidden = ""
 search_loading = ""
 search_empty = ""
+search_forbidden_user = ""
 selected_user = ""

 [msg.dev.clients.federation]
@@ -1490,6 +1492,10 @@ description = ""
 label = ""
 description = ""

+[ui.dev.clients.relationships.option.secret_viewer]
+label = ""
+description = ""
+
 [ui.dev.clients.relationships.option.secret_rotator]
 label = ""
 description = ""