Computer Science Knowledge Storage

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링 정리를 위한 포스팅입니다.
해당 포스팅은 @Slf4j 정리입니다.

로그가 뭐야?

로그(Log)는 애플리케이션이 실행되면서 발생하는 이벤트, 오류, 상태 정보 등을 기록하는 중요한 데이터입니다.
프로그램의 실행 흐름을 추적하고, 문제 발생 시 원인을 분석하는 데 필수적인 요소입니다.

로그가 중요한 이유

1. 디버깅 & 문제 해결
   • 애플리케이션에서 오류가 발생했을 때, 로그를 통해 원인을 분석하고 해결할 수 있습니다.
   • 예를 들어, 사용자가 API 요청을 보냈을 때 응답이 늦거나 실패하는 경우 로그를 확인하면 어느 단계에서 문제가 발생했는지 파악할 수 있습니다.
2. 운영 모니터링 & 시스템 분석
   • 운영 중인 서비스의 성능을 추적하고, 장애 발생 가능성을 미리 감지할 수 있습니다.
   • 로그 데이터는 시스템의 상태를 분석하고 최적화하는 데 중요한 역할을 합니다.
3. 보안 & 감사(Audit Logging)
   • 사용자 활동 기록(로그인, 결제, 데이터 변경 등)을 남겨 보안 감사(Audit) 및 문제 발생 시 추적할 수 있습니다.
   • 보안 로그는 악의적인 접근을 감지하고, 사이버 공격을 방어하는 데 사용됩니다.

로그를 남기는 방법

• Java에서는 System.out.println()을 사용하여 로그를 출력할 수 있지만, 이는 성능 저하 및 유지보수 어려움 등의 단점이 있습니다.
• 대신, Slf4j와 같은 로깅 프레임워크를 활용하면 효율적이고 확장성 있는 로깅 시스템을 구축할 수 있습니다.

Slf4j란?

Slf4j(Simple Logging Facade for Java)는 Java 애플리케이션에서 로깅을 위한 추상화 인터페이스입니다.
쉽게 말해, 특정 로깅 프레임워크(Logback, Log4j 등)에 종속되지 않고 Slf4j를 통해 원하는 로깅 시스템을 선택하여 사용할 수 있도록 도와주는 역할을 합니다.

💡 Slf4j는 로깅을 위한 "추상화 인터페이스"이며, 실제 로깅은 Logback, Log4j와 같은 구현체가 수행합니다.

Slf4j와 Logback 관계

Slf4j를 사용하는 이유

• 특정 로깅 프레임워크에 종속되지 않음
  1. Slf4j를 사용하면 코드 수정 없이 Logback, Log4j 등 원하는 로깅 프레임워크를 쉽게 교체할 수 있습니다
• System.out.println()보다 성능 우수
  
  1. System.out.println()은 단순한 콘솔 출력이지만, Slf4j는 다양한 출력 대상(파일, DB, 원격 서버 등)에 기록할 수 있습니다
  2. System.out.println()은 실행 속도가 느리지만, Slf4j는 비동기 로깅 및 레벨 제어가 가능하여 성능 최적화에 유리합니다.
• 로그레벨 지원
  
  1. Slf4j는 로그의 중요도에 따라 TRACE, DEBUG, INFO, WARN, ERROR 등의 로그 레벨을 제공하여 필요한 정보만 기록할 수 있도록 합니다.

로그 레벨설명

Slf4j 사용법

Lombok에서는 @Slf4j를 지원하여 간편하게 사용할 수 있습니다.
@Slf4j는 AOP(Aspect-Oriented Programming) 기능을 활용하여 자동으로 Logger 객체를 생성해줍니다.

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@Slf4j // Logger 객체 자동 생성
@RestController
public class LogController {

    @GetMapping("/log")
    public String logExample(@RequestParam String message) {
        log.info("INFO 로그: {}", message);
        log.warn("WARN 로그: {}", message);
        log.error("ERROR 로그: {}", message);
        return "로그 출력 완료!";
    }
}

결과

Slf4j는 Spring Boot에서 로깅을 더욱 유연하고 효율적으로 관리할 수 있도록 도와주는 필수적인 라이브러리입니다.
로깅은 디버깅, 모니터링, 보안, 성능 분석 등 여러 측면에서 필수적인 요소이므로, 올바르게 활용하는 것이 중요합니다.

이제 프로젝트에서 Slf4j를 적극 활용하여 가독성 높은 로그 관리를 해보세요!

코드

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링 정리를 위한 포스팅입니다.
해당 포스팅은 직렬화, 역직렬화 어노테이션 정리입니다.

직렬화? 역직렬화?

직렬화(Serialization)

직렬화란 객체를 JSON, XML, 바이너리 등 데이터 형식으로 변환하는 과정을 의미합니다.

이 과정을 통해 데이터를 네트워크로 전송하거나 데이터 스트림으로 전송하는데에 사용되빈다.

import com.fasterxml.jackson.databind.ObjectMapper;

public class Main {
    public static void main(String[] args) throws Exception {
        User user = new User("testUser", "password123");
        ObjectMapper objectMapper = new ObjectMapper();

        // 직렬화 (객체 → JSON)
        String json = objectMapper.writeValueAsString(user);
        System.out.println(json);
    }
}

// 출력
{
    "username": "testUser",
    "password": "password123"
}

역직렬화(Deserialization)

역직렬화란 JSON, XML, 바이너리 데이터를 객체로 변환하는 과정을 의미합니다.

이를 통해 비즈니스 로직에서 객체를 활용하여 사용할 수 있습니다.

import com.fasterxml.jackson.databind.ObjectMapper;

public class Main {
    public static void main(String[] args) throws Exception {
        String json = "{\"username\":\"testUser\",\"password\":\"password123\"}";
        ObjectMapper objectMapper = new ObjectMapper();

        // 역직렬화 (JSON → 객체)
        User user = objectMapper.readValue(json, User.class);
        System.out.println(user.getUsername());
    }
}

// 출력
testUser

@JsonIgonre

@JsonIgonre은 JSON 변환 과정에서 특정 필드를 제외할 때 사용됩니다.

import com.fasterxml.jackson.annotation.JsonIgnore;

public class User {
    private String username;

    @JsonIgnore
    private String password; // JSON 변환 시 제외됨

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }
    
    public String getUsername() { return username; }
    public String getPassword() { return password; }
}

// 출력
{
    "username": "testUser"
}

password 필드가 포함되지 않는 이유가 @JsonIgnore로 때문입니다.

보안 뿐만 아니라 무한 루프 방지 등의 용도로도 사용할 수 있습니다.

@JsonProperty

@JsonProperty는 직렬화 또는 역직렬화할 때 필드의 JSON 키 이름을 변경하는데 사용할 수 있습니다.

특정 조건에서만 JSON 처리를 제어할 수 있기에 더욱 활용도가 높습니다.

import com.fasterxml.jackson.annotation.JsonProperty;

public class User {
    private String username;

    @JsonProperty(access = JsonProperty.Access.WRITE_ONLY) // 역직렬화만 허용
    private String password;
}

// 출력
{
    "username": "testUser"
}

password는 API 응답에서는 제외되지만, JSON 응답을 받을 때는 사용이 가능합니다.

이렇게 내부적으로 보안을 위한 경우에도 사용할 수 있습니다. 

@JsonInclude

@JsonInclude는 특정 조건을 만족하는 필드만 JSON에 포함 할 수 있습니다. 예를 들어 null을 가진 필드를 제외하려면

import com.fasterxml.jackson.annotation.JsonInclude;

@JsonInclude(JsonInclude.Include.NON_NULL)
public class User {
    private String username;
    private String email;
}

// 출력: email이 null일 때
{
    "username": "testUser"
}

와 같이 구현할 수 있습니다.

@JsonIgnoreType

@JsonIgnoreType는 특정 타입의 모든 필드를 JSON 변환에서 제외할 수 있습니다.

객체 내부에 사용되는 숨겨야하는 필드에 대해서 JSON 변환을 제외합니다.

import com.fasterxml.jackson.annotation.JsonIgnoreType;

@JsonIgnoreType
public class SecretData {
    public String key = "secret";
}

public class User {
    public String username = "testUser";
    public SecretData secretData = new SecretData();
}

// 출력
{
    "username": "testUser"
}

결과

코드

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

네번째는 Security + JWT Token 로그인 구현입니다.

JwtProvider

Spring Security에서 JWT를 생성, 검증, 토큰 해석을 하는 클래스 입니다.

사용자 로그인이 완료되면 JWT 토큰을 생성하거나 인증정보를 확인합니다.

생성자

public JwtProvider(@Value("${hiro.jwtSecret}") String jwtSecret,
                   @Value("${hiro.jwtAccessExpiration}") int jwtAccessExpiration,
                   @Value("${hiro.jwtRefreshExpiration}") int jwtRefreshExpiration
) {
    this.jwtSecret = jwtSecret;
    this.jwtAccessExpiration = jwtAccessExpiration;
    this.jwtRefreshExpiration = jwtRefreshExpiration;

    this.key = Keys.hmacShaKeyFor(this.jwtSecret.getBytes());
}

• @Value 어노테이션을 통해 설정 파일(application.properties 또는 application.yml)에 저장된 JWT 관련 설정 값을 주입합니다.
  • hiro.jwtSecret → JWT 서명을 위한 비밀키
  • hiro.jwtAccessExpiration → 액세스 토큰 만료 시간(ms)
  • hiro.jwtRefreshExpiration → 리프레시 토큰 만료 시간(ms)
  • 해당 값들은 노출되면 안되기에 환경변수로 저장하는 것이 안전합니다.
• HMAC SHA 알고리즘을 사용하여 JWT 서명에 사용할 키를 생성

generateJwtToken

public String generateJwtToken(Authentication authentication) {
    String roles = authentication.getAuthorities().stream()
            .map(GrantedAuthority::getAuthority)
            .collect(Collectors.joining(","));

    return Jwts.builder()
            .setSubject(authentication.getName())  // JWT의 subject 설정 (사용자명)
            .claim("role", roles)                  // 사용자의 역할(권한) 저장
            .setIssuedAt(new Date())               // 발급 시간
            .setExpiration(new Date((new Date()).getTime() + jwtAccessExpiration)) // 만료 시간 설정
            .signWith(key, SignatureAlgorithm.HS256) // 서명 알고리즘 사용
            .compact();
}

Jwts 클래스는 Java에서 JWT를 생성하고 파싱하는데 사용하는 JJWT의 클래스입니다.

빌더 패턴을 이용하여 토큰을 생성하고 토큰을 검증하고 해석할 때에는 Jwts.parserBuilder()를 이용합니다.

JWT 구조

header.payload.signature

• Header
  • 사용화 알고리즘과 토큰 유형
• Payload(Claims)
  • sub (Subject): 토큰을 발급받은 사용자 ID
  • role: 사용자의 역할 정보 (ex: ROLE_USER, ROLE_ADMIN)
  • iat (Issued At): 토큰 발급 시간 (Unix Timestamp)
  • exp (Expiration): 토큰 만료 시간 (Unix Timestamp)
• Signature(서명)
  • 서명(Signature)은 JWT의 무결성을 보장하기 위해 사용됩니다.

주요 필드 설명

• authentication.getAuthorities() → 사용자의 권한(ROLE_USER, ROLE_ADMIN 등)을 가져옴.
• setSubject(authentication.getName()) → JWT의 subject(보통 사용자 ID/username) 설정.
• claim("role", roles) → 사용자 역할 정보를 JWT의 Claims에 추가.
• setExpiration(...) → 액세스 토큰의 만료 시간을 설정.
• signWith(key, SignatureAlgorithm.HS256) → HMAC SHA256 알고리즘을 사용하여 JWT 서명.

getAuthentication

public Authentication getAuthentication(String token) {
    try {
        Claims claims = Jwts.parserBuilder()
                .setSigningKey(key)
                .build()
                .parseClaimsJws(token)
                .getBody();

        Collection<? extends GrantedAuthority> authorities = Arrays.stream(claims.get("role").toString().split(","))
                .map(SimpleGrantedAuthority::new)
                .collect(Collectors.toList());

        return new UsernamePasswordAuthenticationToken(claims.getSubject(), token, authorities);
    } catch (MalformedJwtException e) {
        log.error("Invalid JWT token: {}", e.getMessage());
    } catch (ExpiredJwtException e) {
        log.error("JWT token is expired: {}", e.getMessage());
    } catch (UnsupportedJwtException e) {
        log.error("JWT token is unsupported: {}", e.getMessage());
    } catch (IllegalArgumentException e) {
        log.error("JWT claims string is empty: {}", e.getMessage());
    }

    return null;
}

• Jwts.parserBuilder().setSigningKey(key).build().parseClaimsJws(token).getBody()
  → JWT를 파싱하여 Claims(토큰의 정보)를 추출.
• claims.get("role").toString().split(",")
  → JWT에 저장된 사용자 권한(role)을 가져와서 리스트로 변환.
• new UsernamePasswordAuthenticationToken(claims.getSubject(), token, authorities);
  → JWT에서 가져온 사용자 정보를 기반으로 Authentication 객체 생성.
  -> UsernamePasswordAuthenticationToken은 Authentication 객체의 구현체

validateToken

public boolean validateToken(String token) {
    try {
        Jwts.parserBuilder()
                .setSigningKey(key)
                .build()
                .parseClaimsJws(token);
        return true;
    } catch (SecurityException | MalformedJwtException e) {
        log.info("Invalid JWT Token", e);
    } catch (ExpiredJwtException e) {
        log.info("Expired JWT Token", e);
    } catch (UnsupportedJwtException e) {
        log.info("Unsupported JWT Token", e);
    } catch (IllegalArgumentException e) {
        log.info("JWT claims string is empty.", e);
    }
    return false;
}

• parseClaimsJws(token)을 호출하여 토큰이 유효한지 검사.
• 예외 처리:
  • SecurityException | MalformedJwtException: 토큰이 변조되었거나 잘못된 형식인 경우.
  • ExpiredJwtException: 토큰이 만료된 경우.
  • UnsupportedJwtException: 지원되지 않는 JWT 형식.
  • IllegalArgumentException: 토큰이 비어있거나 유효하지 않은 경우.

JwtFilter

@Component
public class JwtFilter extends OncePerRequestFilter {

    private final JwtProvider jwtProvider;

    public JwtFilter(JwtProvider jwtProvider) {
        this.jwtProvider = jwtProvider;
    }

    @Override
    protected void doFilterInternal(HttpServletRequest request,
                                    HttpServletResponse response,
                                    FilterChain filterChain) throws ServletException, IOException {
        String authHeader = request.getHeader("Authorization");

        if (authHeader == null) {
            filterChain.doFilter(request, response);
        } else {
            String jwtToken = authHeader.split(" ")[1];
            if (jwtProvider.validateToken(jwtToken)) {
                Authentication authentication = jwtProvider.getAuthentication(jwtToken);
                SecurityContextHolder.getContext().setAuthentication(authentication);
                filterChain.doFilter(request, response);
            }
        }
    }
}

OncePerRequestFilter

oncePerRequestFilter는 Spring Security에서 제공되는 필터로 HTTP 요청마다 단 한번만 실행되는 필터를 구현할 때 사용됩니다.
(여러번 실행되지 않도록 보장)

따라서 JWT 검증하는 filter로 적절합니다.(요청 때 한번만 검증)

• HttpServletRequest에서 Header("Authorization")을 확인
  • 클라이언트가 보낸 HTTP 요청에서 Authorization 헤더를 가져옵니다.
  • JWT는 일반적으로 "Bearer <토큰값>" 형식으로 전달됩니다.
• authHeader == null
  • 다음 필터로 넘김.
  • 로그인, 회원가입, 공개 API 요청 등
• else => 토큰 값 읽어오기
  • Bearer <토큰값> 형식에서 공백(" ")을 기준으로 split하여 토큰만 추출.
  • authHeader.split(" ")[0] → "Bearer"
  • authHeader.split(" ")[1] → "<토큰값>"
• jwtProvider로 validateToken()를 통해 Token을 검증
  • 유효하지 않으면(만료됨, 변조됨 등) 인증을 진행하지 않고 요청을 그대로 통과.
• 인증 객체 생성 및 설정
  • jwtProvider.getAuthentication(jwtToken)을 호출하여 JWT에서 사용자 정보를 추출하고 Authentication 객체를 생성.
  • SecurityContextHolder.getContext().setAuthentication(authentication);
    → Spring Security의 SecurityContext에 인증 객체를 저장하여 이후 요청에서 인증된 사용자로 처리.

SecurityConfig

SecurityConfig는 Security의 보안 설정을 구성하는 역할을 합니다.

사용자의 권한에 따라서 API 접근 권한을 설정할 수 있고(RBAC) HttpMethod에 따라서도 설정이 가능합니다.

해당 클래스를 위해서는 @EnableWebSecurity 어노테이션이 필요합니다

@EnableWebSecurity

Spring Security를 활성화하고, 보안 구성을 정의할 수 있도록 해주는 어노테이션입니다.

• Spring Security의 기본 보안 설정을 비활성화하고, 개발자가 직접 설정을 정의할 수 있도록 함.
• SecurityFilterChain을 통해 보안 규칙을 커스터마이징할 수 있도록 해줌.

PasswordEncoder

@Bean
public PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
}

PasswordEncoder는 Spring Security에서 비밀번호를 안전하게 암호화하고, 검증하는 인터페이스입니다.

비밀번호를 평문(Plain Text)으로 저장하는 것은 보안적으로 위험하기 때문에, 해싱(Hashing) 알고리즘을 사용하여 비밀번호를 암호화하고, 로그인 시 입력된 비밀번호와 저장된 해시 값을 비교하여 검증하는 역할을 합니다.

• BCryptPasswordEncoder는 BCrypt 알고리즘을 사용하여 비밀번호를 안전하게 암호화합니다.
• @Bean을 사용하여 Spring 컨텍스트에서 PasswordEncoder 빈으로 관리하도록 설정함.

BCryptPasswordEncoder의 특징

• Salt를 자동으로 추가하여 해싱
  • 동일한 비밀번호라도 해싱 결과가 항상 다르게 생성됨 → Rainbow Table 공격 방어 가능
• 반복 연산(Work Factor) 조절 가능
  • 기본적으로 10번의 해싱 작업 수행 (BCryptPasswordEncoder(10))
  • 연산 횟수를 증가시켜 보안성을 강화할 수 있음
• 비밀번호 검증 기능 제공
  • matches(rawPassword, encodedPassword): 입력된 비밀번호와 암호화된 비밀번호 비교

AuthenticationManager

@Bean
public AuthenticationManager authenticationManager(
        AuthenticationConfiguration authConfig) throws Exception {
    return authConfig.getAuthenticationManager();
}

AuthenticationManager는 Spring Security에서 인증(Authentication) 요청을 처리하는 핵심 인터페이스입니다.

• 사용자의 로그인 요청을 받아 인증을 수행하고, 결과를 반환하는 역할을 합니다.
• 인증 과정에서 UserDetailsService를 이용해 사용자 정보를 조회하고, 비밀번호를 검증하는 등의 작업을 수행합니다.
• 해당 AuthenticationManager가 CustomDetailsService()를 호출하게 됩니다.

1. Spring Security의 AuthenticationManager 빈을 생성하는 역할
2. AuthenticationConfiguration을 통해 Spring Security의 기본 인증 설정을 가져와 AuthenticationManager를 반환
   1. Spring Security에서 AuthenticationManager의 기본 구현체는 DaoAuthenticationProvider 입니다.
   2. 따라서 여기서는 Spring Security가 자동으로 생성한 ProviderManager 인스턴스를 반환합니다.

SecurityFilterChain

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    return http
            .csrf(AbstractHttpConfigurer::disable)
            .headers(headersConfigurer -> headersConfigurer.frameOptions(HeadersConfigurer.FrameOptionsConfig::disable))
            .formLogin(AbstractHttpConfigurer::disable)
            .httpBasic(AbstractHttpConfigurer::disable)
            .sessionManagement((sessionManagement) ->
                    sessionManagement.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .authorizeHttpRequests(auth -> {
                auth.requestMatchers(permitAllUrl).permitAll();
                auth.requestMatchers(permitAdminUrl).hasRole("ADMIN");
                auth.anyRequest().authenticated();
            })
            .addFilterBefore(filter, UsernamePasswordAuthenticationFilter.class)
            .addFilter(webConfig.corsFilter())
            .build();
}

해당 메소드는 Spring Security의 SecurityFilterChain을 구성하여 애플리케이션의 보안 규칙을 설정합니다.

• CSRF 보호 비활성화 (csrf().disable())
  • REST API는 주로 JWT를 사용하여 상태(State) 없이 인증을 수행하므로 CSRF 보호가 필요 없음
  • CSRF는 세션 기반 인증에서 주로 필요하지만, JWT 인증을 사용할 경우 불필요
• X-Frame-Options 비활성화 (frameOptions().disable())
  
  • H2 데이터베이스 콘솔 같은 프레임 기반 UI를 허용하기 위해 설정
• 폼 로그인 비활성화 (formLogin().disable())
  
  • JWT 기반 인증을 사용하기 때문에 기본 로그인 폼을 사용하지 않도록 설정
• HTTP Basic 인증 비활성화 (httpBasic().disable())
  • HTTP Basic 인증(아이디 & 비밀번호를 요청 헤더에 포함하여 전송하는 방식)을 비활성화
  • JWT 인증 방식을 사용할 것이므로 필요 없음
• SessionCreationPolicy.STATELESS
  • 세션을 사용하지 않는 Stateless 인증 방식 적용
  • SessionCreationPolicy.STATELESS → Spring Security가 세션을 생성하거나 저장하지 않도록 설정
• authorizeHttpRequest -> HTTP 요청에 대한 권한 설정
  • requestMatchers(permitAllUrl).permitAll();
    → 특정 URL(로그인, 회원가입, Swagger 등)은 인증 없이 접근 허용
  • requestMatchers(permitAdminUrl).hasRole("ADMIN");
    → 관리자 페이지(예: /status/admin)는 "ADMIN" 역할이 있는 사용자만 접근 가능
  • anyRequest().authenticated();
    → 그 외 모든 요청은 인증이 필요함
• JWT Filter 및 CORS 필터 추가
  • addFilterBefore(filter, UsernamePasswordAuthenticationFilter.class)
    → JWT 필터(JwtFilter)를 UsernamePasswordAuthenticationFilter 앞에 추가
    • Spring Security의 기본 로그인 방식(폼 로그인, 세션 로그인 등)보다 먼저 JWT를 확인하도록 설정
  • .addFilter(webConfig.corsFilter())
    → CORS 필터 추가

UserDetails

@RequiredArgsConstructor
public class UserDetailsImpl implements UserDetails {

    @Getter
    private final Long id;
    private final String username;
    private final String password;
    private final Collection<? extends GrantedAuthority> authorities;

    @Override
    public String getPassword() {
        return password;
    }

    @Override
    public String getUsername() {
        return username;
    }

    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        return authorities;
    }

    @Override
    public boolean isAccountNonExpired() {
        return true;
    }

    @Override
    public boolean isAccountNonLocked() {
        return true;
    }

    @Override
    public boolean isCredentialsNonExpired() {
        return true;
    }

    @Override
    public boolean isEnabled() {
        return true;
    }

    public static UserDetailsImpl build(Member member) {
        List<GrantedAuthority> authorities = member.getRoles().stream()
                .map(role -> new SimpleGrantedAuthority("ROLE_" + role.name()))
                .collect(Collectors.toList());

        return new UserDetailsImpl(
                member.getId(),
                member.getUsername(),
                member.getPassword(),
                authorities
        );
    }
}

커스텀한 UserDetails 클래스를 생성합니다.

UserDetailsImpl이 필요한 이유

• Spring Security는 UserDetailsService를 통해 사용자 정보를 불러오며,
  이때 UserDetails를 구현한 클래스(UserDetailsImpl)가 필요
• UserDetailsImpl은 Spring Security에서 인증된 사용자의 정보를 저장하는 역할을 함.

UserDetailsService

@Service
@RequiredArgsConstructor
public class UserDetailsServiceImpl implements UserDetailsService {

    private final MemberRepository memberRepository;

    @Override
    @Transactional
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        Member member = memberRepository.findByUsername(username);

        return UserDetailsImpl.build(member);
    }
}

UserDetailsService는 Spring Security의 UserDetailsService 인터페이스를 구현한 클래스로,
Spring Security가 로그인 요청을 처리할 때 사용자 정보를 불러오는 역할을 합니다.

• Spring Security가 로그인 요청을 받을 때 자동으로 실행되는 메서드
  • 해당 메소드는 AuthenticationManager가 로그인 요청을할 때 UserDetailsService를 호출합니다.
• username을 이용해 DB에서 사용자 정보를 조회 (memberRepository.findByUsername(username))
• 조회된 Member 엔티티를 Spring Security에서 사용할 수 있도록 UserDetailsImpl로 변환
  • UserDetailsService를 구현해야 Spring Security가 사용자 인증을 수행할 수 있습니다.

AuthService

public JwtResponse loginMember(String username, String password) {
    if (!repository.existsByUsername(username)) {
        throw new RuntimeErrorException(new Error("not Found Member"));
    }
    log.info("login Member");

    final Authentication authentication = authenticationManager.authenticate(
            new UsernamePasswordAuthenticationToken(username, password)
    );

    final String jwtAccessToken = jwtProvider.generateJwtToken(authentication);
    final String jwtRefreshToken = null;

    final UserDetailsImpl userDetails = (UserDetailsImpl) authentication.getPrincipal();
    List<String> roles = userDetails.getAuthorities().stream()
            .map(GrantedAuthority::getAuthority).toList();

    return new JwtResponse(jwtAccessToken, jwtRefreshToken, userDetails.getUsername(), roles);
}

로그인 화면

다음와 같이 정상 동작하는 것을 확인할 수 있습니다.

프론트에서는 다음에 헤더에 accessToken을 추가하면 Security가 설정된 프로젝트와 통신을 할 수 있습니다.

깃허브 및 참조

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

네번째는 Security 이론입니다.

Spring Security란

스프링 보안은 강력하고 고도로 사용자 지정 가능한 인증 및 액세스 제어 프레임워크입니다. 스프링 기반 애플리케이션을 보호하기 위한 사실상의 표준입니다.

Spring Security는 Java 애플리케이션에 인증과 권한 부여를 모두 제공하는 데 중점을 둔 프레임워크입니다. 모든 Spring 프로젝트와 마찬가지로 Spring Security의 진정한 힘은 사용자 지정 요구 사항을 충족하기 위해 얼마나 쉽게 확장할 수 있는지에서 찾을 수 있습니다
- Spring Security 공식 docs

Spring Security는 Spring 기반 애플리케이션의 인증, 권한관리 그리고 데이터 보호기능을 포함하는 프레임워크입니다. 인증(Authentication), 권한 부여(Authorization), 데이터 보호 등의 기능을 제공하여 애플리케이션의 보안 요구 사항을 쉽게 해결할 수 있도록 돕습니다. 특히 웹 애플리케이션의 다양한 보안 위협(CSRF, XSS 등)을 방어하고, 사용자가 인증된 상태에서 적절한 리소스 접근 권한을 갖도록 제어합니다.

Spring Security의 핵심 역할은 다음과 같습니다:

• 사용자가 누구인지 확인(인증)
• 사용자가 무엇을 할 수 있는지 결정(권한 부여)
• 웹 애플리케이션의 데이터를 안전하게 보호

Spring Security를 사용하는 이유

1. 보안 위협 방어
   • Spring Security는 CSRF(Cross-Site Request Forgery), XSS(Cross-Site Scripting), 세션 고정 공격(Session Fixation) 등 다양한 보안 위협에 대한 기본 방어 기능을 제공합니다.
2. 인증과 권한 관리의 편의성
   • 기본적으로 제공되는 인증 및 권한 부여 로직을 활용하거나, 커스터마이징하여 복잡한 보안 요구 사항을 구현할 수 있습니다.
3. 손쉬운 통합
   • Spring Security는 Spring Framework 및 Spring Boot와 자연스럽게 통합되며, 설정과 구성이 간단합니다.
4. 확장성과 커스터마이징
   • 사용자 정의 인증, 권한 정책, 필터 등을 구현하여 프로젝트 요구 사항에 맞는 보안 구조를 설계할 수 있습니다.
   • IoC/DI 패턴과 같은 확장 패턴을 염두하여 개발이 가능하였습니다.
5. 업계 표준 준수
   • OAuth2, JWT, OpenID Connect 등 표준 보안 프로토콜을 지원하여 최신 보안 트렌드에 맞는 애플리케이션을 개발할 수 있습니다.

Spring Security 주요 개념

1. Authentication (인증)
   인증은 사용자가 본인이 맞는지를 확인하는 과정입니다. 사용자가 올바른 자격 증명(예: 아이디와 비밀번호)을 제공했는지 확인합니다.
   • AuthenticationManager: 인증 처리를 담당하는 인터페이스.
   • UserDetailsService: 사용자 정보를 로드하는 서비스.
   • PasswordEncoder: 비밀번호 암호화 및 검증 처리.
   • 인증방식
     • credential 방식: username, password를 이용하는 방식
       principal -> 아이디(username), credential -> 비밀번호(password)
     • 이중 인증(twofactor 인증): 사용자가 입력한 개인정보를 인증 후, 다른 인증 체계를 이용하여 두가지의 조합으로 인증하는 방식
     • 하드웨어 인증: 자동차 키와 같은 방식
2. Authorization (인가)
   권한 부여는 사용자가 특정 리소스나 작업을 수행할 권한이 있는지 확인하는 과정입니다.
   • GrantedAuthority: 사용자의 권한 정보.
   • AccessDecisionManager: 권한 부여 판단을 담당.
3. Security Context
   SecurityContextHolder를 통해 애플리케이션 전반에서 현재 사용자의 인증 및 권한 정보를 관리합니다.
   
   
4. Filter Chain
   Spring Security는 HTTP 요청을 처리하기 위해 여러 필터를 체인 형태로 연결합니다.
   주요 필터:
   • UsernamePasswordAuthenticationFilter: 사용자 인증 처리.
   • BasicAuthenticationFilter: HTTP Basic 인증 처리.
   • CsrfFilter: CSRF 보호.

Spring Security 동작 원리

아키텍처

1. 클라이언트가 서버에 요청을 보냅니다.
2. AuthenticationFilter가 요청을 인터셉트하고 이를 AuthenticationManager에 전달합니다.
3. AuthenticationManager는 등록된 AuthenticationProvider를 탐색하여 인증 처리를 위임합니다.
4. AuthenticationProvider는 사용자 데이터를 확인하고, 인증된 UserDetails 객체를 반환합니다.
5. 인증 결과는 SecurityContextHolder에 저장되며, 저장된 사용자 정보는 Spring Controller에서 활용할 수 있습니다.

참조

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링 정리를 위한 포스팅입니다.
해당 포스팅은 Swagger 정리입니다.

서론

Swagger는 RESTful API를 웹 단에서 설계, 빌드, 문서화, 테스트하는데 사용하는 도구입니다.
이를 통해서 프론트엔드 개발자와 백엔드 개발자가 효율적으로 협업을 진행할 수 있고, 문서화에도 도움을 줍니다.

Spring Boot와 함께 Swagger를 적용하면 백엔드 개발자는 API 문서를 자동으로 생성하고 팀 간 협업 및 테스트를 효율적으로 진행할 수 있습니다.

해당 포스팅에서는 Swagger와 OpenAPI의 개념, Spring Boot 프로젝트에서 Swagger를 설정하는 방법 등을 소개합니다.

Swagger

Swagger란 무엇인가?

Swagger는 REST API를 문서화하고, API 설계와 구현을 더 쉽게 하기 위해 제공되는 도구입니다.
현재는 OpenAPI Initiative의 표준으로 자리 잡았으며, OpenAPI 스펙 기반으로 API 문서를 자동 생성합니다.

Swagger의 주요 기능

• API 문서화: REST API의 모든 엔드포인트, 메서드, 요청/응답 형식 등을 정리
• Swagger UI 제공: API 테스트와 시뮬레이션을 위한 사용자 인터페이스
• 클라이언트 코드 생성: OpenAPI 스펙을 기반으로 클라이언트 SDK 생성

Spring Boot에서 Swagger 설정하기

1. 의존성 추가

Swagger와 OpenAPI를 사용하려면 Spring Boot 프로젝트의 build.gradle 또는 pom.xml에 의존성을 추가해야 합니다.

Gradle 예시

// Swagger
implementation group: 'org.springdoc', name: 'springdoc-openapi-starter-webmvc-ui', version: '2.6.0'

1. 기본 설정

Spring Boot에서는 별도의 설정 없이도 swagger-ui와 OpenAPI 문서를 사용할 수 있습니다.
SpringDoc 라이브러리를 추가하면 /swagger-ui.html 또는 /swagger-ui/index.html 경로에서 Swagger UI에 접근할 수 있습니다.

1. SwaggerConfig 설정

SwaggerConfig 클래스는 OpenAPI 문서의 기본적인 설정을 커스터마이징할 수 있도록 작성됩니다.
Spring Boot와 SpringDoc을 사용하면 Swagger UI와 OpenAPI 문서를 별도의 설정 없이 기본적으로 사용할 수 있지만, 프로젝트 이름, API 설명, 버전 정보 등을 명확히 하기 위해 SwaggerConfig 클래스에서 OpenAPI 객체를 설정할 수 있습니다.

@Configuration
public class SwaggerConfig {
    @Bean
    public OpenAPI openAPI() {
        return new OpenAPI()
                .info(new Info().title("Hiro Backend")
                        .description("Hiro Backend 서버")
                        .version("v0.0.1"));
    }
}

@Bean
public OpenAPI openAPI() {
    SecurityScheme securityScheme = new SecurityScheme()
            .type(SecurityScheme.Type.HTTP)
            .scheme("bearer")
            .bearerFormat("JWT")
            .in(SecurityScheme.In.HEADER)
            .name("Authorization");

    SecurityRequirement securityItem = new SecurityRequirement().addList("bearerAuth");

    return new OpenAPI()
            .openapi("3.0.1")  // OpenAPI 버전 명시
            .components(new Components().addSecuritySchemes("bearerAuth", securityScheme))
            .security(List.of(securityItem))
            .info(apiInfo());
}

@Configuration
public class SwaggerConfig {

    @Bean
    public GroupedOpenApi userApi() {
        return GroupedOpenApi.builder()
                .group("user-api") // 사용자 관련 API 그룹
                .pathsToMatch("/users/**", "/profile/**")
                .build();
    }

    @Bean
    public GroupedOpenApi adminApi() {
        return GroupedOpenApi.builder()
                .group("admin-api") // 관리자 관련 API 그룹
                .pathsToMatch("/admin/**", "/management/**")
                .build();
    }

    @Bean
    public GroupedOpenApi publicApi() {
        return GroupedOpenApi.builder()
                .group("public-api") // 공개 API 그룹
                .pathsToMatch("/public/**", "/auth/**")
                .build();
    }
    /*
     * ...
     */
}

1. 컨트롤러에 Swagger 어노테이션 추가

컨트롤러에 @Tag, @Operation, @ApiResponse 등 OpenAPI 3 스펙 기반의 애노테이션을 추가하여 API 엔드포인트를 문서화할 수 있습니다.

@RestController
@RequestMapping("/api/users")
@Tag(name = "User API", description = "Operations for managing users")
public class UserController {

    @Operation(summary = "Get all users", description = "Retrieve a list of all users.")
    @GetMapping
    public List<User> getAllUsers() {
        return List.of(new User(1L, "John", "john@example.com"));
    }

    @Operation(summary = "Create a user", description = "Add a new user to the system.")
    @ApiResponse(responseCode = "201", description = "User created successfully.")
    @PostMapping
    public User createUser(@RequestBody User user) {
        return user; // For demonstration purposes
    }
}

• @Tag
  @Tag는 OpenAPI 스펙에서 API의 그룹화를 위한 어노테이션입니다.
  주로 컨트롤러 레벨에서 사용되며, Swagger UI에서 API를 그룹별로 정리해서 보여줍니다.
  • 주요속성
    • name: 태그의 이름. Swagger UI에서 그룹명으로 표시됩니다.
    • description: 태그에 대한 설명을 작성합니다.
• @Operation
  @Operation은 API 엔드포인트(메서드) 수준에서 사용됩니다.
  해당 메서드에 대한 요약, 설명, 요청/응답에 대한 정보 등을 문서화합니다.
  • 주요속성
    • summary: API 엔드포인트에 대한 간단한 설명 (Swagger UI에서 메서드 옆에 표시).
    • description: API 엔드포인트에 대한 상세 설명.
    • tags: 이 엔드포인트에 추가적으로 적용할 태그 목록. 컨트롤러에 정의된 @Tag와는 별개로 추가 가능.
    • parameters: 요청에 필요한 매개변수 정의 (필요시 사용).
    • responses: 응답에 대한 설명을 추가 (일반적으로 @ApiResponse와 함께 사용).
• @ApiResponse
  @ApiResponse는 특정 API 엔드포인트의 응답 정보를 문서화하는 데 사용됩니다.
  응답 상태 코드와 메시지, 반환되는 데이터에 대한 설명을 추가할 수 있습니다.
  • 주요속성
    • responseCode: HTTP 응답 상태 코드 (예: "200", "404", "500").
    • description: 응답에 대한 간단한 설명.
    • content: 반환되는 데이터의 형식을 정의 (JSON, XML 등).

결과

localhost:8080/swagger-ui/index.html로 접근하면 Swagger 화면이 렌더링 됩니다.

/json-users를 클릭 후 Execute를 하면

결과가 잘 나오는 것을 확인할 수 있습니다.

코드

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

세번째는 세션을 이용한 로그인 구현입니다.

서론

이전 쿠키 포스팅에서 STATELESS한 HTTP 프로토콜에서 STATEFUL한 서비스를 위한 장치로 헤더에 쿠키를 저장하는 로직으로 설계하였습니다.

하지만 해당 방법은 개인 정보들을 브라우저 단에 저장하여 위변조 및 도용이 쉽다는 문제가 있습니다. 보안적인 부분은 클라이언트가 아닌 서버에서 관리하여 외부로 해당 개인정보를 숨겨 보안성을 높여야합니다. 따라서 클라이언트는 키만 가지고 있으며 해당 정보는 서버에서 관리하고 있는 방법을 세션이라고 합니다.

저는 이 포스팅에서 세션을 두가지 방법으로 구현합니다. 첫번째는 쿠키를 이용한 세션과 속성 기반으로 세션을 구현할 예정입니다.

세션

정의

세션(Session)은 서버가 클라이언트의 상태를 유지하기 위해 일정 기간 동안 저장하는 정보를 의미합니다. 클라이언트의 요청마다 동일한 사용자임을 식별할 수 있도록 하는 상태 관리 방식입니다. 보통 서버는 클라이언트가 전달한 세션 ID를 기반으로 특정 사용자와 연결된 정보를 조회합니다.

역할

• 사용자 식별: 세션 ID를 통해 동일 클라이언트의 요청임을 서버가 식별합니다.
• 상태 유지: 로그인 상태, 장바구니 정보 등 사용자의 상태 정보를 서버에서 저장 및 관리합니다.
• 보안 강화: 민감한 정보는 서버에 저장하고, 클라이언트는 세션 ID만 전달하므로 정보 위변조 위험을 줄입니다.

구조

• 클라이언트 측
  • 브라우저는 서버로부터 세션 ID를 받아 저장(주로 쿠키에 저장)하고, 이후 요청마다 세션 ID를 포함하여 서버에 전달합니다.
• 서버 측
  • 서버는 세션 저장소(메모리, 데이터베이스 등)에 세션 ID와 상태 정보를 저장하고, 세션 ID를 키로 사용하여 클라이언트 데이터를 관리합니다.

장점

1. 보안성
   • 민감한 데이터가 서버에 저장되므로 클라이언트에서 정보가 노출될 위험이 줄어듭니다.
2. 유연성
   • 상태 정보는 서버에 저장되므로 클라이언트가 브라우저를 닫더라도 세션이 만료되지 않으면 상태를 유지할 수 있습니다.
3. 확장성
   • 서버의 세션 저장소를 확장하여 대량의 사용자 상태를 관리할 수 있습니다.

단점

• 서버 부담
  • 세션 데이터를 서버에서 관리하므로 사용자 수가 많아질수록 서버 메모리나 저장소 사용량이 증가합니다.
• 스케일링 문제
  • 서버가 분산 환경일 경우, 세션 데이터를 공유하기 위한 추가 작업(예: 세션 클러스터링)이 필요합니다.
• 만료 관리
  • 세션 만료 시간 설정이 필요하며, 만료되지 않은 오래된 세션 데이터가 서버의 리소스를 점유할 수 있습니다.

Session-login(쿠키 기반)

Frontend

localhost:3000/login-session에 접근하기 위해 routepath를 지정합니다.

// RoutePath.ts
export enum RoutePath {
    HOMEPAGE = "/",
    COOKIE = "/login-cookie",
    SESSION = "/login-session"
}

// AppRoutes.tsx

const AppRoutes = () => {
    return (
      <Router>
          <Routes>
              <Route path={RoutePath.HOMEPAGE} element={<HomePage />} />
              <Route path={RoutePath.COOKIE} element={<CookieLogin />} />
              <Route path={RoutePath.SESSION} element={<SessionLogin />} />
          </Routes>
      </Router>
    )
  }
  
  export default AppRoutes

로그인과 로그아웃 기능입니다. 이전 쿠키와 동일하지만 credential을 include 속성을 넣어줍니다.

const loginV1 = async () => {
    try {
        const response = await fetch('http://localhost:8080/session/loginV1', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({
                username: username,
                password: password
            }),
            credentials: 'include'
        });

        if (response.ok) {
            const data = await response.text(); // 서버의 응답 메시지
            console.log(data);
            setLoginMessage(data);
            setIsAuthenticated(true);
        } else {
            const errorData = await response.text();
            setLoginMessage('Login failed: ' + errorData);
        }
    } catch (error) {
        setLoginMessage('Login failed: ' + error);
    }
};

// 로그아웃 V1 (세션 만료)
const logoutV1 = async () => {
  try {
      const response = await fetch('http://localhost:8080/session/logoutV1', {
          method: 'POST',
          credentials: 'include'
      });

      if (response.ok) {
          const data = await response.text(); // 서버의 응답 메시지
          console.log(data);
          setLogoutMessage(data);
          setIsAuthenticated(false);
      } else {
          const errorData = await response.text();
          setLogoutMessage('Logout failed: ' + errorData);
      }
  } catch (error) {
      setLogoutMessage('Logout failed: ' + error);
  }
};

Backend

마찬가지로 username과 password를 토대로 member가 존재하면 SessionManager를 통해 쿠키를 생성하여 response에 넣어줍니다.

@Slf4j
@RestController
@RequestMapping("/session")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:3000", allowedHeaders = "*", allowCredentials = "true")
public class SessionController {

    private final AuthService authService;
    private final SessionManager sessionManager;


    @PostMapping("/loginV1")
    public ResponseEntity<String> loginV1(@RequestParam String username,
                                          @RequestParam String password,
                                          HttpServletResponse response) {
        log.info("session cookie login id: {}, password: {}", username, password);

        // Authorization User
        Member member = authService.login(username, password);

        if (member != null) {
            sessionManager.createSession(member, response);
            return ResponseEntity.ok("Success session-login");
        }

        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail login");
    }

    @PostMapping("/logoutV1")
    public ResponseEntity<String> logoutV1(HttpServletRequest request) {
        log.info("logout session cookie");

        if (sessionManager.expire(request)) {
            return ResponseEntity.ok("Success session-logout");
        }

        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail logout");
    }
}

이 프로젝트에서는 sessionManager를 메모리에서 관리합니다. 쿠키 이름을 spring-react-auth의 쿠키로 sessionId를 UUID 값으로 넣어줍니다. 

@Component
public class SessionManager {

    public static final String SESSION_COOKIE_NAME = "spring-react-auth";
    private final Map<String, Object> sessionStore = new ConcurrentHashMap<>();

    public void createSession(Object value, HttpServletResponse response) {
        // Generate a unique session ID and store the session data.
        String sessionId = UUID.randomUUID().toString();
        sessionStore.put(sessionId, value);

        // Create a session cookie with the generated session ID.
        Cookie sessionCookie = new Cookie(SESSION_COOKIE_NAME, sessionId);
        sessionCookie.setHttpOnly(true); // Enhance security by restricting client-side access
//        sessionCookie.setPath("/");      // Make the cookie accessible across the application
        response.addCookie(sessionCookie);
    }
    
    public boolean expire(HttpServletRequest request) {
        Cookie sessionCookie = findCookie(request, SESSION_COOKIE_NAME);
        System.out.println("sessionCookie = " + sessionCookie.getName());

        if (sessionCookie != null) {
            sessionStore.remove(sessionCookie.getValue());
            return true;
        }
        return false;
    }

    public Cookie findCookie(HttpServletRequest request, String cookieName) {
        if (request.getCookies() == null) {
            return null; // No cookies present in the request
        }
        return Arrays.stream(request.getCookies())
                .filter(cookie -> cookie.getName().equals(cookieName))
                .findFirst()
                .orElse(null);
    }
}

Session-login(속성 기반)

Frontend

로그인과 로그아웃 기능입니다. 앞선 기능들과 동일합니다.

// 로그인 V2 (세션 객체로 로그인)
const loginV2 = async () => {
  try {
      const response = await fetch('http://localhost:8080/session/loginV2', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: new URLSearchParams({
              username: username,
              password: password
          }),
          credentials: 'include'
      });

      if (response.ok) {
          const data = await response.text(); // 서버의 응답 메시지
          setLoginMessage(data);
          setIsAuthenticated(true);
      } else {
          const errorData = await response.text();
          setLoginMessage('Login failed: ' + errorData);
      }
  } catch (error) {
      setLoginMessage('Login failed: ' + error);
  }
};
  
// 로그아웃 V2 (세션 무효화)
const logoutV2 = async () => {
  try {
      const response = await fetch('http://localhost:8080/session/logoutV2', {
          method: 'POST',
          credentials: 'include'
      });

      if (response.ok) {
          const data = await response.text(); // 서버의 응답 메시지
          setLogoutMessage(data);
          setIsAuthenticated(false);
      } else {
          const errorData = await response.text();
          setLogoutMessage('Logout failed: ' + errorData);
      }
  } catch (error) {
      setLogoutMessage('Logout failed: ' + error);
  }
};

Backend

이번에는 속성을 통해서 넣어줍니다. LOGIN_MEMBER의 속성에 member를 넣어주면 JSESSIONID가 할당됩니다.

@Slf4j
@RestController
@RequestMapping("/session")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:3000", allowedHeaders = "*", allowCredentials = "true")
public class SessionController {

    private final AuthService authService;
    private final SessionManager sessionManager;
    private final String LOGIN_MEMBER = "Spring-React-Session-Login";

    @PostMapping("/loginV2")
    public ResponseEntity<String> loginV2(@RequestParam String username,
                                          @RequestParam String password,
                                          HttpServletRequest request) {
        log.info("session Attribute login id: {}, password: {}", username, password);

        Member member = authService.login(username, password);
        if (member != null) {
            // Login success handling
            // Return the existing session if it exists; otherwise, create a new session
            HttpSession session = request.getSession();
            // Store login member information in the session
            session.setAttribute(LOGIN_MEMBER, member);

            return ResponseEntity.ok("Success session-login using request");
        }

        // Return an error response if login fails (optional: add this block for clarity)
        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");
    }

    @PostMapping("/logoutV2")
    public ResponseEntity<String> logoutV2(HttpServletRequest request) {
        log.info("logout session Attribute");

        StringBuilder sb = new StringBuilder();
        sb.append("Success session-logout: ");

        HttpSession session = request.getSession(false);
        if (session != null) {
            Member member = (Member) session.getAttribute(LOGIN_MEMBER);
            System.out.println("session value: " + (member == null ? "not found member" : member.getUsername()));
            session.invalidate();
            sb.append("expire session");
        }

        return ResponseEntity.ok(sb.toString());
    }
}

결과

깃허브 및 참조

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

두번째 쿠키를 이용한 로그인입니다.

서론

기본적으로 웹 애플리케이션 통신에서 우리가 사용하고 있는 프로토콜 HTTP는 stateless입니다. 이는 단순히 클라이언트의 요청에 대해 서버가 응답을 내려주기에 이전 정보를 기억하고 있지않습니다.

하지만 저희는 장바구니에 얼만큼의 상품이 들어가있는지 등 stateful한 구조가 필요로할 때가 있습니다.

이러한 부분에서 쿠키는 우리가 매일 사용하는 웹 애플리케이션에서 중요한 역할을 합니다. 특히, 로그인 상태를 유지하는 데 유용한 쿠키를 활용한 인증 방식을 이번 포스팅에서 설명하고 구현해 보겠습니다.

쿠키

정의

• 클라이언트와 서버와 통신을 할 때 필요한 정보를 저장해두는 작은 데이터 조각입니다.
• 브라우저에 저장된 쿠키를 통해 서버와 통신할 때 header에 있는 값으로 통신합니다.

역할

• http의 stateless한 구조를 뛰어넘어 stateful한 구조를 http내에서 구현할 수 있게 해주어 사용자 경험이 향상되는 효과를 가져옵니다.
• ex): 로그인 상태, 사용자 설정 저장(다크모드) 등..

구조

• 쿠키 이름
• 값
• 만료기간
• 경로, 도메인 등...이 있습니다

장점

• 상태 관리 간편합니다.
• 클라이언트 쪽에서 자동 전송(HTTP 요청 시 자동 포함)할 수 있습니다.

단점

• 보안에 취약합니다.(세션 하이재킹, CSRF).
• 저장 용량 제한이 있습니다.(약 4KB).

쿠키 기반 작동 원리

1. 사용자가 로그인을 할 때에 서버에서 인증 완료 후 쿠키를 생성합니다.
2. 생성된 쿠키를 클라이언트에 전달하고 브라우저에 저장합니다.

1. 쿠키를 통해 요청할 때에 브라우저는 저장된 쿠키를 서버로 전송합니다.
2. 서버는 쿠키를 검증하여 사용자의 인증상태를 확인하고 정보를 제공합니다.

Frontend

localhost:3000/login-cookie에 접근하기 위해 routepath를 지정합니다.

// RoutePath.ts
export enum RoutePath {
    HOMEPAGE = "/",
    COOKIE = "/login-cookie"
}

// AppRoutes.tsx
const AppRoutes = () => {
    return (
      <Router>
          <Routes>
              <Route path={RoutePath.HOMEPAGE} element={<HomePage />} />
              <Route path={RoutePath.COOKIE} element={<CookieLogin />} />
          </Routes>
      </Router>
    )
  }
  
  export default AppRoutes

CookieLogin

.env 파일을 생성한 후 REACT_APP_BASE_URL="http://localhost:8080"을 입력해줍니다.

쿠키를 사용하기 위해 리액트에서 제공하는 npm install react-cookie를 설치한 후 다음과 같은 코드를 작성합니다.

const CookieLogin: React.FC = () => {
  const [cookies, setCookie, removeCookie] = useCookies(['auth-token']);
  const [username, setUsername] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [error, setError] = useState<string>('');
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);

  // Check if the user is authenticated based on the "auth-token" cookie
  useEffect(() => {
    const token = cookies['auth-token'];
    setIsAuthenticated(!!token); // Set authentication status based on cookie presence
  }, [cookies]);

  // Login API
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      const response = await fetch(
        `${process.env.REACT_APP_BASE_URL}/cookie/login?username=${username}&password=${password}`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
        }
      );

      if (response.ok) {
        const token = await response.text(); // Assume the backend returns a token as plain text
        setCookie('auth-token', token, { path: '/', maxAge: 3600 }); // Set the token in cookies
        setIsAuthenticated(true);
        alert('Login successful');
      } else {
        setError('Invalid username or password');
      }
    } catch (error) {
      setError('An error occurred while logging in');
    }
  };

  // Logout API
  const handleLogout = async () => {
    try {
      const response = await fetch(`${process.env.REACT_APP_BASE_URL}/cookie/logout`, {
        method: 'GET',
      });

      if (response.ok) {
        removeCookie('auth-token', { path: '/' }); // Remove the token cookie
        setIsAuthenticated(false);
        alert('Logout successful');
      } else {
        console.error('Logout failed');
      }
    } catch (error) {
      console.error('Logout error:', error);
    }
  };

  // Render success page if authenticated
  if (isAuthenticated) {
    return (
      <div>
        <SuccessPage />
        <button onClick={handleLogout} className="logout-button">
          Logout
        </button>
      </div>
    );
  }

  return (
    <div className="login-container">
      <div className="login-form">
        <h2 className="login-title">Login with Cookie</h2>
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="username">Username</label>
            <input
              type="text"
              id="username"
              className="input-field"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="password">Password</label>
            <input
              type="password"
              id="password"
              className="input-field"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <button type="submit" className="login-button">
            Login
          </button>
        </form>
        {error && <p className="error-message">{error}</p>}
      </div>
    </div>
  );
};

export default CookieLogin;

Backend

데이터가 없기에 샘플 데이터를 위한 클래스를 하나 만들어줍니다.

@Component
@RequiredArgsConstructor
public class DataInitializer implements CommandLineRunner {

    private final MemberRepository repository;

    @Override
    public void run(String... args) throws Exception {

        Member member = new Member("hiro", "qwer1234");

        repository.save(member);
        System.out.println("데이터 초기화 완료");
    }
}

Controller

login

기본적으로 보안은 생략하고 진행하겠습니다. username과 password를 받고 해당 유저가 있으면 로그인 가능하도록 로직을 설계하였습니다. h2 데이터베이스에 유저가 있으면 "auth-token"이라는 이름으로 Cookie를 생성하고 해당 value는 멤버의 pk값을 넣어주었습니다.(기본적으로 암호화된 값이나 유니크한 값으로 설정하는 것이 좋습니다.)

@PostMapping("/login")
public ResponseEntity<String> login(@RequestParam String username, @RequestParam String password, HttpServletResponse response) {
    log.info("login id: {}, password: {}", username, password);
    // Authorization User
    Member member = authService.getMemberByUsername(username);
    if (member != null) {
        // create cookie & config
        Cookie idCookie = new Cookie("auth-token", String.valueOf(member.getId()));
        response.addCookie(idCookie);

        return ResponseEntity.ok("Success login");
    }

    return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail login");
}

• 사용자로부터 username과 password를 받아 인증 처리합니다.
• authService.getMemberByUsername()를 통해 사용자를 데이터베이스에서 조회 후
  • 사용자가 존재하면 auth-token 쿠키를 생성하여 응답에 추가합니다.
  • 사용자 인증 실패 시 Unauthorized(401) 상태 반환합니다.

logout

로그아웃 시에는 쿠키를 삭제(만료)를 진행해주면 됩니다. 쿠키의 Age를 0으로 설정하면 쿠키가 삭제되는 것입니다.

@GetMapping("/logout")
public ResponseEntity<String> logout(HttpServletResponse response) {
    log.info("logout");
    // Delete cookie
    Cookie cookie = new Cookie("auth-token", null);
    cookie.setMaxAge(0);
    response.addCookie(cookie);
    return ResponseEntity.ok("Success logout");
}

• 클라이언트에 저장된 auth-token 쿠키를 삭제.
• 쿠키 값과 유효 기간을 초기화한 후 클라이언트에게 전달.
• 성공적으로 로그아웃되면 200 OK 상태 반환.

결과

브라우저의 개발자 도구 network 탭에 들어가면 cookie에 auth-token이라는 쿠키가 1로 할당된 것을 볼 수 있습니다. 이는 hiro라는 멤버의 아이디가 1이기 때문입니다.

깃허브 및 참조

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

첫번째는 프론트와 백엔드 설정입니다.

서론

로그인은 현대 웹 애플리케이션에서 필수적인 기능으로 자리 잡았습니다. 사용자 인증은 단순히 애플리케이션에 접근하기 위한 절차를 넘어, 보안, 데이터 보호, 그리고 맞춤형 서비스 제공의 핵심 역할을 담당합니다. 따라서 신뢰할 수 있고 효율적인 로그인 시스템을 설계하고 구현하는 것은 개발자의 중요한 과제 중 하나입니다.

이 포스팅에서는 로그인 시스템을 체계적으로 정리하고자 합니다. 이를 통해 로그인 시스템의 기본 원리부터 실제 구현 방법까지 폭넓게 다루고자 합니다.

프론트는 react를 사용하고 백엔드는 Spring Framework를 활용하여 다음과 같은 방식으로 로그인 시스템을 구현할 예정입니다:

1. 쿠키와 세션을 이용한 상태 관리
2. Spring Security를 활용한 인증 및 권한 부여
3. OAuth2를 통한 소셜 로그인 연동

Frontend 설정

프론트는 리액트를 활용하고 언어는 TypeScript를 이용할 것입니다. 리액트 프로젝트를 생성하기 위해
npx create-react-frontend를 통해 프로젝트를 생성합니다.

해당 프로젝트에서 TypeScript를 사용하기 위해 tsconfig.json을 설정해줍니다.

tsconfig.json

{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx"
    },
    "include": [
      "src"
    ]
  }

App.js 파일에서는 react-router-dom 라이브러리를 사용하여 애플리케이션의 라우팅을 설정합니다.
이 설정은 SPA(Single Page Application) 형태의 웹사이트에서 페이지 간 전환을 빠르고 부드럽게 구현할 수 있도록 해줍니다.
BrowserRouter, Routes, Route 등의 컴포넌트를 사용하여 라우트 경로와 해당 경로에 매핑된 컴포넌트를 정의합니다.

npm install react-route-dom을 통해 라이브러리 설치를 진행해줍니다.

App.js

import AppRoutes from "./pages/AppRoutes";

function App() {
  return (
      <AppRoutes />
  );
}

export default App;

AppRoutes.ts

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import { RoutePath } from '../interface/RoutePath';
import HomePage from './home/HomePage';

const AppRoutes = () => {
    return (
      <Router>
          <Routes>
              <Route path={RoutePath.HOMEPAGE} element={<HomePage />} />
          </Routes>
      </Router>
    )
  }
  
  export default AppRoutes

RoutePath.ts

export enum RoutePath {
    HOMEPAGE = "/",
}

HomePage.tsx 파일은 애플리케이션의 메인 페이지 역할을 하는 컴포넌트를 정의합니다.

이 페이지는 사용자가 사이트에 처음 방문했을 때 렌더링되는 기본 화면을 제공합니다.
HomePage 컴포넌트는 React를 사용하여 작성되며, 사용자가 볼 수 있는 다양한 콘텐츠와 네비게이션 링크들을 포함할 수 있습니다.

HomePage.tsx는 github를 참조하시길 바랍니다.

Backend 설정

백엔드는 Spring Boot 프레임워크를 기반으로 하며, 데이터 관리를 위해 JPA(Java Persistence API)를 사용하여 객체-관계 매핑을 지원합니다. 이를 통해 데이터베이스와의 상호작용을 더욱 간편하고 직관적으로 구현할 수 있습니다.

데이터베이스는 경량화된 H2 데이터베이스를 활용하여, 개발 및 테스트 단계에서 빠르고 효율적인 데이터 관리를 수행할 예정입니다. 이를 통해 초기 설정 및 테스트 과정을 간소화하고 생산성을 높일 수 있습니다.

start.spring.io에 해당 프로젝트를 생성해줍니다.

build.gradle은 다음과 같습니다. swagger를 위한 dependency는 넣어주지 않으셔도 됩니다.

build.gradle

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.3.5'
	id 'io.spring.dependency-management' version '1.1.6'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(17)
	}
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
	implementation group: 'org.springdoc', name: 'springdoc-openapi-starter-webmvc-ui', version: '2.6.0'
}

tasks.named('test') {
	useJUnitPlatform()
}

데이터베이스 h2 생성

경량화된 h2 데이터베이스를 사용할 것입니다. 해당 설치하기 위해 h2 데이터베이스를 다운로드 사이트로 이동합니다.

압축 파일을 해제 한 후 h2가 설치한 곳으로 이동하여 chmod 755 ./bin/h2.sh로 h2를 실행할 수 있는 권한을 설정해줍니다. bin 폴더로 이동 후 ./h2.sh를 통해 h2 데이터베이스를 실행해보면

다음과 같은 콘솔창이 뜹니다. JDBC URL을 설정은 데이터베이스 생성입니다. 저는 auth라는 데이터베이스를 생성하기 위해 url을 auth로 변경해줍니다. 이후 연결을 해줍니다.

💡 만약 해당 창이 뜨지 않는다면 도메인 앞쪽을 localhost로 변경해줍니다.
http://218.38.137.27:8082/(...)
=> http://localhost:8082/(...)

Spring 프로젝트를 이동하여 application.yml을 다음과 같이 설정해줍니다.

application.yml

spring:
  datasource:
    url: jdbc:h2:tcp://localhost/~/auth
    username: sa
    password:
    driver-class-name: org.h2.Driver

  jpa:
    hibernate:
      ddl-auto: create
    properties:
      hibernate:
        show_sql: true
        format_sql: true

logging.level:
  org.hibernate.SQL: debug
#  org.hibernate.type: trace

서버가 제대로 띄워졌는지 확인하기 위한 healthCheck를 위한 컨트롤러를 만들어줍니다.

StatusController

@Slf4j
@RestController
@RequestMapping("/status")
@Tags(value = @Tag(name = "StatusController", description = "Retrieve any status"))
public class StatusController {

    @GetMapping
    public ResponseEntity<?> serverStatusCheck() {
        log.info("this server is health");
        return ResponseEntity.ok("ok");
    }

    @GetMapping("/all")
    public ResponseEntity<?> anyOneCanAccess() {
        log.info("all people can access");
        return ResponseEntity.ok("all people can access");
    }
}

서버가 제대로 실행되었는지 확인하기 위해 postman을 통해 확인해보면

다음과 같이 제대로 띄워져 있는 결과를 얻을 수 있습니다.

데이터베이스와의 연동 확인

데이터베이스와의 연동을 확인하기 위해 간단한 create 요청을 만들어 디비에 제대로 적제되었는지 확인해보겠습니다.

AccountDto와 SignUpRequest는 Java의 record를 사용해 생성됩니다. record는 Java 16 이상에서 제공되는 기능으로, 불변 객체를 간결하게 정의할 수 있게 해줍니다. 이를 통해 DTO(Data Transfer Object)와 요청 객체를 더 짧고 명확한 코드로 작성할 수 있습니다.

SignUpRequest

public record AccountDto() {
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public static final class SignUpRequest {
        private String username;
        private String password;
    }
}

다음은 controller를 생성합니다. @RequestBody를 통해 받은 SignUpRequest를 통해 service의 joinMember를 호출합니다.

TestController

@Slf4j
@RestController
@RequiredArgsConstructor
@RequestMapping("/test")
@Tags(value = @Tag(name = "TestController", description = "check database"))
public class TestController {

    private final TestService testService;

    @PostMapping("/members")
    public ResponseEntity<String> createUser(@RequestBody SignUpRequest signUpRequest) throws Exception {
        log.info("Controller: createUser");
        String createName = testService.joinMember(signUpRequest.getUsername(), signUpRequest.getPassword());

        return ResponseEntity.ok(createName);
    }
}

엔티티 Member를 생성합니다.

Member

@Entity
@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class Member {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String username;
    private String password;

    public Member(String username, String password) {
        this.username = username;
        this.password = password;
    }
}

TestService는 서비스 계층으로 Repository와의 상호작용을 담당하고 비즈니스 로직을 담당하는 부분입니다.

TestService

@Slf4j
@RequiredArgsConstructor
@Service
public class TestService {

    private final MemberRepository memberRepository;

    public String joinMember(String username, String password) throws Exception {
        log.info("Service: joinMember");
        if (memberRepository.existsByUsername(username)) {
            throw new RuntimeException("fail join member");
        }

        Member member = new Member(username, password);

        memberRepository.save(member);

        return member.getUsername();
    }
}

MemberRepository는 Spring Data JPA의 JpaRepository 인터페이스를 확장하여 데이터베이스와 상호작용하는 저장소(Repository)입니다. 이 인터페이스를 구현함으로써, 기본적인 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 자동으로 제공받을 수 있습니다. 이를 통해 개발자는 복잡한 SQL 쿼리 작성 없이 간단한 메서드 호출만으로 데이터베이스 작업을 수행할 수 있습니다.

MemberRepository

@Repository
public interface MemberRepository extends JpaRepository<Member, Long> {
    boolean existsById(Long id);
    boolean existsByUsername(String username);
    Member findByUsername(String username);
}

포스트맨을 통해서 확인해본 결과는 다음과 같습니다.

Spring의 SQL문은 다음과 같습니다.

데이터베이스에 잘 적제된 것을 확인할 수 있습니다.

깃허브 및 참조