imnyang 7cd05b5c6a 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

3.1 KiB

Raw Permalink Blame History

OAuth2 Client

이 프로젝트는 OAuth2 서버와 연동하는 클라이언트 애플리케이션입니다. Hono.js와 Bun을 사용하여 구축되었습니다.

기능

OAuth2 Authorization Code Grant 플로우 구현
PKCE (Proof Key for Code Exchange) 지원
사용자 프로필 조회
쿠키 기반 세션 관리

설정 방법

1. OAuth2 서버에서 클라이언트 등록

먼저 OAuth2 서버에서 클라이언트를 등록해야 합니다:

OAuth2 서버 실행:

cd ../example-oauth2-server
python app.py

브라우저에서 http://localhost:5000 접속
사용자 생성 (예: 사용자명 "testuser")
"Create Client" 클릭하여 새 클라이언트 생성:
- Client Name: "OAuth2 Client Demo"
- Client URI: "http://localhost:3000"
- Grant Type: "authorization_code"
- Redirect URI: "http://localhost:3000/callback"
- Response Type: "code"
- Scope: "profile"
- Token Endpoint Auth Method: "none" (PKCE 사용 시)
생성된 Client ID를 복사

2. 클라이언트 설정

index.ts 파일에서 OAUTH_CONFIG.clientId를 설정:

const OAUTH_CONFIG = {
  authServerUrl: 'http://localhost:5000',
  clientId: 'YOUR_CLIENT_ID_HERE', // 복사한 Client ID 입력
  clientSecret: '', // PKCE 사용 시 불필요
  redirectUri: 'http://localhost:3000/callback',
  scope: 'profile'
}

3. 클라이언트 실행

bun run dev

또는

bun index.ts

기본적으로 http://localhost:3000에서 실행됩니다.

사용법

브라우저에서 http://localhost:3000 접속
"OAuth2로 로그인" 버튼 클릭
OAuth2 서버로 리다이렉트됨
권한 승인
클라이언트로 다시 리다이렉트되어 로그인 완료
"내 프로필 보기"로 사용자 정보 확인 가능

API 엔드포인트

GET / - 홈페이지
GET /login - OAuth2 로그인 시작
GET /callback - OAuth2 콜백 처리
GET /profile - 사용자 프로필 조회
GET /logout - 로그아웃

보안 기능

PKCE: Code Injection 공격 방지
State 매개변수: CSRF 공격 방지
HTTP-only 쿠키: XSS 공격 방지
세션 타임아웃: 일회용 세션 데이터

주의사항

이 예제는 개발/데모 목적으로 제작되었습니다
실제 운영환경에서는 다음을 고려하세요:
- HTTPS 사용
- 안전한 세션 스토리지 (Redis 등)
- 적절한 에러 핸들링
- 로깅 및 모니터링
- 토큰 갱신 로직

트러블슈팅

"Client ID가 설정되지 않았습니다" 오류

index.ts에서 OAUTH_CONFIG.clientId를 설정했는지 확인
OAuth2 서버에서 클라이언트를 올바르게 등록했는지 확인

"유효하지 않은 redirect_uri" 오류

OAuth2 서버에 등록한 Redirect URI가 http://localhost:3000/callback인지 확인
포트 번호가 일치하는지 확인

"토큰 교환 실패" 오류

OAuth2 서버가 실행 중인지 확인
Client ID가 올바른지 확인
네트워크 연결 상태 확인

3.1 KiB Raw Permalink Blame History