Sveltia CMS + GitHub OAuth로 Hugo 블로그 관리자 패널 구축하기 — 4편

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

your-blog/
├── static/
│   └── admin/
│       ├── index.html      # CMS 진입점
│       └── config.yml      # CMS 설정
└── functions/
    ├── auth/
    │   └── [...auth].js    # OAuth 시작 엔드포인트
    └── callback/
        └── [...callback].js # OAuth 콜백 처리

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
  <title>Content Manager</title>
</head>
<body>
  <!-- Sveltia CMS -->
  <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

backend:
  name: github
  repo: up21001/blog          # GitHub 저장소 (username/repo)
  branch: main                # 편집할 브랜치
  base_url: https://blog-8ye.pages.dev  # 배포된 사이트 URL
  auth_endpoint: auth         # OAuth 엔드포인트 경로
  site_id: blog-8ye.pages.dev # Cloudflare Pages 사이트 ID

# 미디어 파일 설정
media_folder: static/images   # 저장소 내 이미지 저장 경로
public_folder: /images        # HTML에서 이미지 참조 경로

# 콘텐츠 컬렉션 정의
collections:
  - name: posts
    label: 포스트
    folder: content/posts
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - { label: "제목", name: "title", widget: "string" }
      - { label: "날짜", name: "date", widget: "datetime", format: "YYYY-MM-DDTHH:mm:ssZ" }
      - { label: "최종 수정일", name: "lastmod", widget: "datetime", format: "YYYY-MM-DDTHH:mm:ssZ" }
      - { label: "설명", name: "description", widget: "text" }
      - { label: "Slug", name: "slug", widget: "string" }
      - label: "카테고리"
        name: "categories"
        widget: "select"
        multiple: true
        options:
          - { label: "AI와 자동화", value: "ai-automation" }
          - { label: "개발 일지", value: "dev-log" }
          - { label: "아키텍처", value: "architecture" }
          - { label: "일상", value: "life" }
      - { label: "태그", name: "tags", widget: "list" }
      - { label: "임시저장", name: "draft", widget: "boolean", default: false }
      - { label: "본문", name: "body", widget: "markdown" }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

export async function onRequest(context) {
  const { env } = context;
  const clientId = env.GITHUB_CLIENT_ID;

  const params = new URLSearchParams({
    client_id: clientId,
    scope: "repo,user",
    redirect_uri: `${new URL(context.request.url).origin}/callback`,
  });

  return Response.redirect(
    `https://github.com/login/oauth/authorize?${params}`,
    302
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

export async function onRequest(context) {
  const { request, env } = context;
  const url = new URL(request.url);
  const code = url.searchParams.get("code");

  if (!code) {
    return new Response("Missing code parameter", { status: 400 });
  }

  // GitHub에서 액세스 토큰 교환
  const tokenResponse = await fetch(
    "https://github.com/login/oauth/access_token",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({
        client_id: env.GITHUB_CLIENT_ID,
        client_secret: env.GITHUB_CLIENT_SECRET,
        code,
      }),
    }
  );

  const tokenData = await tokenResponse.json();

  if (tokenData.error) {
    return new Response(`OAuth error: ${tokenData.error_description}`, {
      status: 400,
    });
  }

  // Sveltia CMS가 기대하는 형식으로 토큰 전달
  const script = `
    <script>
      const receiveMessage = (message) => {
        window.opener.postMessage(
          'authorization:github:success:${JSON.stringify({
            token: tokenData.access_token,
            provider: "github",
          })}',
          message.origin
        );
        window.removeEventListener("message", receiveMessage, false);
      };
      window.addEventListener("message", receiveMessage, false);
      window.opener.postMessage("authorizing:github", "*");
    </script>
  `;

  return new Response(script, {
    headers: { "Content-Type": "text/html" },
  });
}

1
2
3

git add static/admin/ functions/
git commit -m "feat: Sveltia CMS 관리자 패널 추가"
git push origin main