authlib-flask-test/oauth2-client

OAuth2 Client

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

기능

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

설정 방법

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

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

1. OAuth2 서버 실행:

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

2. 브라우저에서 http://localhost:5000 접속

3. 사용자 생성 (예: 사용자명 "testuser")

4. "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 사용 시)

5. 생성된 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에서 실행됩니다.

사용법

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

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가 올바른지 확인
• 네트워크 연결 상태 확인