feat: Add OAuth2 server and client implementation with PKCE support

- Implemented OAuth2 server with client registration, authorization, and token endpoints. - Created HTML templates for client authorization, client creation, and client editing. - Developed an OAuth2 client application using Hono.js and Bun, supporting authorization code grant flow. - Integrated PKCE (Proof Key for Code Exchange) for enhanced security during authorization. - Added session management using cookies for user authentication. - Included detailed README documentation for setup and usage instructions.
2025-07-13 17:08:55 +09:00 · 2025-07-13 17:08:55 +09:00 · 7cd05b5c6a
commit 7cd05b5c6a
29 changed files with 1962 additions and 0 deletions
--- a/oauth2-attacker/index.ts
+++ b/oauth2-attacker/index.ts
@ -0,0 +1,108 @@
+import { Hono } from 'hono'
+
+const app = new Hono()
+
+// define config
+const OAUTH_CONFIG = {
+    authServerUrl: 'http://localhost:3020',
+    clientId: process.env.CLIENT_ID, // 클라이언트 등록 후 설정 필요
+    clientSecret: process.env.CLIENT_SECRET, // 필요한 경우
+    redirectUri: process.env.REDIRECT_URI,
+    scope: 'profile'
+}
+
+app.get('/', (c) => {
+
+    return c.html(`
+        <h1>Attacker</h1>
+
+        <h2>Profile</h2>
+        <form action="/profile" method="get">
+            <input type="text" name="access_token" placeholder="Access Token" style="width:300px; padding:5px;" required />
+            <button type="submit" style="padding:5px 10px;">프로필 보기</button>
+        </form>
+    `)
+})
+
+
+app.get("/profile", async (c) => {
+    const accessToken = c.req.query('access_token')
+
+    try {
+        // 바로 프로필 조회
+        const profileResponse = await fetch(`${OAUTH_CONFIG.authServerUrl}/api/me`, {
+            headers: {
+                'Authorization': `Bearer ${accessToken}`
+            }
+        })
+
+        if (!profileResponse.ok) {
+            return c.html(`
+        <h1>프로필 조회 실패</h1>
+        <p>토큰은 발급되었지만 프로필 조회에 실패했습니다.</p>
+        <p>상태 코드: ${profileResponse.status}</p>
+        <a href="/">홈으로</a>
+      `)
+        }
+
+        const profile = await profileResponse.json() as any
+
+        // 토큰 정보와 프로필을 함께 표시
+        return c.html(`
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <title>인증 완료 - 프로필</title>
+        <style>
+          body { font-family: Arial, sans-serif; margin: 40px; }
+          .container { max-width: 800px; margin: 0 auto; }
+          .button { background: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block; margin: 10px 5px; }
+          .success { color: #28a745; font-size: 18px; margin-bottom: 20px; }
+          .section { background: #f8f9fa; padding: 20px; border-radius: 5px; margin: 20px 0; border-left: 4px solid #007bff; }
+          .profile-item { margin: 10px 0; }
+          .label { font-weight: bold; color: #495057; }
+          .value { color: #212529; }
+          .token-info { background: #e3f2fd; border-left-color: #2196f3; }
+          .profile-info { background: #e8f5e8; border-left-color: #28a745; }
+        </style>
+      </head>
+      <body>
+        <div class="container">
+          <div class="section profile-info">
+            <h3>👤 사용자 프로필</h3>
+            <div class="profile-item">
+              <span class="label">사용자 ID:</span> 
+              <span class="value">${profile.id || 'N/A'}</span>
+            </div>
+            <div class="profile-item">
+              <span class="label">사용자명:</span> 
+              <span class="value">${profile.username || 'N/A'}</span>
+            </div>
+            <div class="profile-item">
+              <code>
+                ${JSON.stringify(profile, null, 2)}
+              </code>
+            </div>
+          </div>
+
+          <div style="text-align: center; margin-top: 30px;">
+            <a href="/" class="button">홈으로</a>
+          </div>
+        </div>
+      </body>
+      </html>
+    `)
+
+    } catch (error: any) {
+        return c.html(`
+      <h1>오류 발생</h1>
+      <p>토큰 교환 또는 프로필 조회 중 오류가 발생했습니다: ${error?.message || '알 수 없는 오류'}</p>
+      <a href="/">홈으로</a>
+    `)
+    }
+})
+
+export default {
+    port: 5002,
+    fetch: app.fetch,
+}