Keycloak 및 BFF 패턴을 사용한 Angular 앱 보안 강화

2025-01-28

이 글에서는 Backend for Frontend (BFF) 패턴을 사용하여 Keycloak과 Angular를 통합한 안전한 웹 애플리케이션을 구축하는 방법을 보여줍니다. 브라우저에 민감한 데이터를 저장하지 않기 위해 Keycloak과의 인증 흐름은 전용 BFF 서버에서 완전히 처리됩니다. BFF는 Keycloak과 Angular 앱 간의 안전한 중개자 역할을 하며, OAuth2 및 PKCE 흐름을 관리하고, 토큰을 안전하게 저장하며, 민감한 작업(토큰 갱신 등)이 브라우저에 도달하는 것을 방지합니다. Angular 앱은 BFF가 제공하는 간소화된 엔드포인트와만 상호 작용하며, Keycloak과의 직접 통신은 하지 않습니다. 이 글에서는 Keycloak 구성, BFF 서버 설정(Express.js 사용), Angular 앱 개발에 대한 자세한 내용을 설명하고, 이 아키텍처의 보안상 이점을 강조합니다.

개발 BFF 패턴