[TroubleShooting] OAuth 로그인에서 state 파라미터를 통한 값 전달 방법

👀 현재 상황 및 배경 설명

• 현재 JWT 기반 소셜 로그인을 구현 중이며, 클라이언트는 React Native로, 서버는 Spring Boot로 개발하고 있다. 
• 소셜 로그인 버튼 클릭 시 외부 소셜 로그인 페이지로 연결되어 인증을 마친 후, 사용자 정보를 받아오는 기능을 구현했다.

 

▶ OAuth 로그인의 인증 흐름

1. 사용자가 클라이언트를 통해 소셜 로그인을 시도한다.
2. 클라이언트가 인증 서버로 리다이렉션하여 사용자 인증을 요청한다.
3. 사용자가 인증을 완료하면, 인증 서버는 Authorization Code를 클라이언트에 전달한다.
4. 클라이언트는 Authorization Code를 사용하여 인증 서버에 Access Token을 요청하고 발급받는다.
5. Access Token을 사용해 리소스 서버에 사용자 정보를 요청한다.
6. 받은 사용자 정보를 이용해 클라이언트 애플리케이션에서 로그인을 처리한다.

인증 서버: 사용자 인증을 확인하고, 인증이 성공하면 Access Token을 발급
리소스 서버: 인증 서버에서 발급한 Access Token을 검증하여, 보호된 데이터를 제공

🔽 과정
인증 서버 및 리소스 서버는 모두 OAuth 서버이다. 인증 서버에서 사용자의 자격 증명을 확인한 뒤 Authorization Code를 발급한다. 이 Authorization Code는 일회용으로, Access Token을 발급받기 위해 사용된다. 이후 리소스 서버는 Access Token을 검증하고, 실제 사용자 정보를 제공한다.

 

▶ Spring Security의 OAuth 로그인

하지만 Spring Security를 사용하면 위 과정 중 2~5번을 자동으로 처리해 준다. 따라서 서버는 받은 사용자 정보를 이용해 로그인 처리만 하면 된다.

1. 사용자가 로그인 페이지에서 소셜 로그인 버튼을 클릭한다.
2. Spring Security가 이를 가로채고, 내부적으로 인증을 처리한다. (위 과정 중 2~5번)
   • 폼 로그인의 경우 UsernamePasswordAuthenticationFilter가, 소셜 로그인의 경우 OAuth2LoginAuthenticationFilter가 인증을 담당한다.
3. UserDetailsService 또는 OAuth2UserService를 통해 사용자 정보를 로드하고, 자격 증명이 유효한지 확인한다.
   • 우리 애플리케이션에서는 OAuth2UserService의 구현체인 DefaultOAuth2UserService를 사용했다.
4. 인증이 성공하면 사용자 정보는 SecurityContextHolder에 저장되고, AuthenticationSuccessHandler를 통해 이후의 처리가 이루어진다.
5. 인증이 실패하면 AuthenticationFailureHandler를 통해 실패에 대한 처리(예: 오류 메시지, 로그인 페이지로 리다이렉트)가 이루어진다.

SecurityContextHolder: Spring Security에서 인증된 사용자 정보를 저장하고 관리하는 데 사용되는 클래스이다. 애플리케이션 전반에서 인증된 사용자의 정보를 쉽게 조회할 수 있도록, SecurityContext를 보관하는 역할을 한다.

 

▶ 구현 코드

• DefaultOAuth2UserService를 구현하여 사용자 정보를 처리하는 서비스 클래스를 작성했고, 이를 기반으로 AuthenticationSuccessHandler와 AuthenticationFailureHandler를 통해 사용자 로그인 처리를 구현했다.

🔽 OAuth 인증 요청 URL

http://localhost:8080/v1/oauth2/authorization/${provider}

🔽 DefaultOAuth2UserService의 구현체인 CustomOAuth2UserService

/**
 * OAuth2 사용자 정보 로딩 및 권한 설정을 위한 커스텀 서비스 클래스입니다.
 */
@Service
public class CustomOAuth2UserService extends DefaultOAuth2UserService {

    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User oAuth2User = super.loadUser(userRequest);

        // 권한 처리
        Set<SimpleGrantedAuthority> authorities = new HashSet<>();
        authorities.add(new SimpleGrantedAuthority(RolesType.ROLE_USER.name()));

        // OAuth2 로그인 시 기본 키(PK)가 되는 값
        String userNameAttributeName = userRequest.getClientRegistration()
                .getProviderDetails().getUserInfoEndpoint().getUserNameAttributeName();
        
        Map<String, Object> attributes = oAuth2User.getAttributes();
        String registrationId = userRequest.getClientRegistration().getRegistrationId(); // naver, kakao, apple 구분
        OAuth2UserInfo oAuth2UserInfo = getOAuth2UserInfo(registrationId, attributes);

        return new CustomOAuth2User(
                authorities,
                attributes,
                userNameAttributeName,
                oAuth2UserInfo.getId(),
                oAuth2UserInfo.getProvider(),
                oAuth2UserInfo.getName(),
                oAuth2UserInfo.getImageUrl()
        );
    }

    private OAuth2UserInfo getOAuth2UserInfo(String registrationId, Map<String, Object> attributes) {
        return switch (registrationId) {
            case "naver" -> new NaverUserInfo(attributes);
            case "kakao" -> new KakaoUserInfo(attributes);
            case "apple" -> new AppleUserInfo(attributes);
            default -> throw new IllegalArgumentException("Unknown registrationId: " + registrationId);
        };
    }
}

🔽 AuthenticationSuccessHandler의 구현체인 CustomOAuth2SuccessHandler

/**
 * CustomOAuth2UserService 인증 성공 시 처리하는 핸들러 클래스입니다.
 */
@Component
@RequiredArgsConstructor
public class CustomOAuth2SuccessHandler implements AuthenticationSuccessHandler {

    private final MemberService memberService;
    private final JwtService jwtService;

    /**
     * OAuth2 회원가입 및 로그인
     */
    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException {

        CustomOAuth2User customOAuth2User = (CustomOAuth2User) authentication.getPrincipal();

        // 권한 정보 가져오기
        GrantedAuthority authority = customOAuth2User.getAuthorities().stream().findFirst()
                .orElseThrow(() -> new MemberException(MemberErrorCode.NOT_FOUND_MEMBER_ROLES));
        RolesType role = RolesType.valueOf(authority.getAuthority());

        // CustomOAuth2User를 MemberLoginDto로 변환
        MemberLoginDto memberLoginDto = MemberLoginDto.builder()
                .oauthId(customOAuth2User.getOauthId())
                .provider(customOAuth2User.getProvider())
                .name(customOAuth2User.getName())
                .profileImageUrl(customOAuth2User.getProfileImageUrl())
                .role(role)
                .build();

        // 로그인 처리 및 JWT 토큰 생성
        JwtTokenDto jwtTokens = memberService.login(memberLoginDto);

        // JWT 토큰을 응답 헤더에 추가
        jwtService.setAccessTokenToHeader(response, jwtTokens.getAccessToken());
        jwtService.setRefreshTokenToHeader(response, jwtTokens.getRefreshToken());
    }
}

🔽 AuthenticationFailureHandler의 구현체인 CustomOAuth2FailureHandler

/**
 * CustomOAuth2UserService 인증 실패 시 처리하는 핸들러 클래스입니다.
 */
@Component
public class CustomOAuth2FailureHandler implements AuthenticationFailureHandler {

    private final ObjectMapper objectMapper = new ObjectMapper();

    @Override
    public void onAuthenticationFailure(HttpServletRequest request, HttpServletResponse response, AuthenticationException exception) throws IOException, ServletException {

        response.setStatus(HttpStatus.UNAUTHORIZED.value());
        response.setContentType(MediaType.APPLICATION_JSON_VALUE);
        response.setCharacterEncoding("UTF-8");

        Map<String, String> errorResponse = new HashMap<>();
        errorResponse.put("error", "Authentication failed");
        errorResponse.put("message", exception.getMessage());

        response.getWriter().write(objectMapper.writeValueAsString(errorResponse));
    }
}

🔽 Spring Security 설정 클래스인 SecurityConfig의 filterChain에 들어갈 메서드

/**
 * Spring Security 기본 설정 메서드
 */
private void defaultSecuritySetting(HttpSecurity http) throws Exception {
    http
            ...
            
            // OAuth2 로그인 설정
            .oauth2Login(oauth -> oauth
                    .successHandler(customOAuth2SuccessHandler)
                    .failureHandler(customOAuth2FailureHandler)
                    .userInfoEndpoint(userinfo -> userinfo
                            .userService(customOAuth2UserService))
            );
}

 

 

🚨 문제 상황

기획 단계에서 애플리케이션을 사장님 애플리케이션과 소비자 애플리케이션으로 나누기로 했다는 내용을 전달받았다. 그러나 현재 구현된 방식에서는 소셜 로그인으로 사용자 인증만 수행되어 서버에 저장되고, 클라이언트 앱에서 로그인 이전에 정보를 전달할 경로가 없다. 따라서 사용자가 애플리케이션의 사장님 버전 또는 소비자 버전 중 어떤 것을 사용하는지를 판별할 수 없는 상황이다.

 

 

✏️ 원인 분석

• 위에 설명한 OAuth 로그인 인증 흐름을 살펴보면, 다양한 로직들이 실행되며 그 과정에서 여러 번 리다이렉트가 발생하여 반환되는 파라미터 값이 계속 변경된다. 이로 인해 클라이언트 앱에서 특정 파라미터를 전송하더라도, 인증 후에는 해당 값들이 소실되어 전달되지 않는다.
• 또한, 기본적으로 DefaultOAuth2UserService는 소셜 로그인 후 사용자 인증과 사용자 정보 로딩만을 담당하며, 로그인 이전에 클라이언트에서 전달된 정보를 유지하고 전달하는 로직은 포함되어 있지 않다.

 

 

🔨 해결 방법

OAuth 공식 문서를 살펴보니, state 파라미터를 통해서 OAuth 로그인 이전의 값을 서버로 전달할 수 있다고 한다. 본래 목적은 CSRF 공격 방지와 요청의 유효성 확인을 위해 사용되지만, 현재 우리 애플리케이션은 특정 권한 정보를 전달하기 위해 사용해 봤다.

🔽 생각한 방법

🔽 고려해야 할 부분

1. state 값에 따른 권한 처리 로직을 추가해야 한다.
2. 또한, 중요한 부분은 OAuth2AuthorizationRequestResolver를 구현해야 한다는 것이다.
   • OAuth2AuthorizationRequestResolver는 OAuth2 인증 요청을 커스터마이징할 수 있게 해 준다. 기본적으로 OAuth2 인증 요청에는 클라이언트 ID, 리다이렉트 URI, scope 등이 포함되는데, 추가적인 파라미터가 필요할 경우 이를 설정할 수 있도록 도와준다.

 

▶ 구현 코드

🔽 OAuth 인증 요청 URL

http://localhost:8080/v1/oauth2/authorization/${provider}?state=${역할}

🔽 DefaultOAuth2UserService의 구현체인 CustomOAuth2UserService

• state 파라미터를 추출하여 권한 처리하는 로직 추가
• state 값에 따라 권한을 결정하는 메서드 추가

/**
 * OAuth2 사용자 정보 로딩 및 권한 설정을 위한 커스텀 서비스 클래스입니다.
 */
@Service
public class CustomOAuth2UserService extends DefaultOAuth2UserService {

    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User oAuth2User = super.loadUser(userRequest);

        // 권한 처리
        HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
        String state = request.getParameter("state");
        Set<SimpleGrantedAuthority> authorities = determineAuthorities(state);
        // 값 출력
        System.out.println("state = " + state);


        // OAuth2 로그인 시 기본 키(PK)가 되는 값
        String userNameAttributeName = userRequest.getClientRegistration()
                .getProviderDetails().getUserInfoEndpoint().getUserNameAttributeName();
        
        Map<String, Object> attributes = oAuth2User.getAttributes();
        String registrationId = userRequest.getClientRegistration().getRegistrationId(); // naver, kakao, apple 구분
        OAuth2UserInfo oAuth2UserInfo = getOAuth2UserInfo(registrationId, attributes);

        return new CustomOAuth2User(
                authorities,
                attributes,
                userNameAttributeName,
                oAuth2UserInfo.getId(),
                oAuth2UserInfo.getProvider(),
                oAuth2UserInfo.getName(),
                oAuth2UserInfo.getImageUrl()
        );
    }

    /**
     * state 값에 따라 권한을 결정
     */
    private Set<SimpleGrantedAuthority> determineAuthorities(String state) {
        Set<SimpleGrantedAuthority> authorities = new HashSet<>();
        if ("USER".equalsIgnoreCase(state)) {
            authorities.add(new SimpleGrantedAuthority(RolesType.ROLE_USER.name()));
        } else if ("STORE_OWNER".equalsIgnoreCase(state)) {
            authorities.add(new SimpleGrantedAuthority(RolesType.ROLE_STORE_OWNER.name()));
        } else {
            throw new MemberException(MemberErrorCode.BAD_REQUEST_STATE_PARAMETER);
        }
        return authorities;
    }

    private OAuth2UserInfo getOAuth2UserInfo(String registrationId, Map<String, Object> attributes) {
        return switch (registrationId) {
            case "naver" -> new NaverUserInfo(attributes);
            case "kakao" -> new KakaoUserInfo(attributes);
            case "apple" -> new AppleUserInfo(attributes);
            default -> throw new IllegalArgumentException("Unknown registrationId: " + registrationId);
        };
    }
}

🔽 OAuth2AuthorizationRequestResolver의 구현체인 CustomAuthorizationRequestResolver

/**
 * OAuth2 인증 요청에 대해 state 파라미터를 추가하고 커스터마이징하는 Resolver 클래스입니다.
 */
@Component
public class CustomAuthorizationRequestResolver implements OAuth2AuthorizationRequestResolver {

    private final OAuth2AuthorizationRequestResolver defaultAuthorizationRequestResolver;

    public CustomAuthorizationRequestResolver(ClientRegistrationRepository clientRegistrationRepository) {
        this.defaultAuthorizationRequestResolver = new DefaultOAuth2AuthorizationRequestResolver(
                clientRegistrationRepository, "/oauth2/authorization");
    }

    /**
     * 기본 Resolver를 통해 요청 처리
     */
    @Override
    public OAuth2AuthorizationRequest resolve(HttpServletRequest request) {
        OAuth2AuthorizationRequest authorizationRequest = this.defaultAuthorizationRequestResolver.resolve(request);
        return customizeAuthorizationRequest(request, authorizationRequest);
    }

    /**
     * 기본 Resolver를 통해 요청 처리
     */
    @Override
    public OAuth2AuthorizationRequest resolve(HttpServletRequest request, String clientRegistrationId) {
        OAuth2AuthorizationRequest authorizationRequest = this.defaultAuthorizationRequestResolver.resolve(request, clientRegistrationId);
        return customizeAuthorizationRequest(request, authorizationRequest);
    }

    /**
     * OAuth2 인증 요청에 state 파라미터를 추가하는 메서드
     */
    private OAuth2AuthorizationRequest customizeAuthorizationRequest(HttpServletRequest request, OAuth2AuthorizationRequest authorizationRequest) {
        if (authorizationRequest == null) {
            return null;
        }

        String state = request.getParameter("state");

        if (!StringUtils.hasText(state)) {
            throw new MemberException(MemberErrorCode.BAD_REQUEST_STATE_PARAMETER);
        }

        return OAuth2AuthorizationRequest.from(authorizationRequest)
                .state(state)
                .build();
    }
}

🔽 Spring Security 설정 클래스인 SecurityConfig의 filterChain에 들어갈 메서드에 Resolver 추가

/**
 * Spring Security 기본 설정 메서드
 */
private void defaultSecuritySetting(HttpSecurity http) throws Exception {
    http
            ...
            
            // OAuth2 로그인 설정
            .oauth2Login(oauth -> oauth
                    .successHandler(customOAuth2SuccessHandler)
                    .failureHandler(customOAuth2FailureHandler)
                    .userInfoEndpoint(userinfo -> userinfo
                            .userService(customOAuth2UserService))
                    // resolver 추가
                    .authorizationEndpoint(endpoint -> endpoint
                            .authorizationRequestResolver(customAuthorizationRequestResolver()))
           );
}

 

 

🔍 결과 관찰

🔽 OAuth 인증 요청 URL

http://localhost:8080/v1/oauth2/authorization/naver?state=USER

🔽 결과

• state 값이 정상적으로 전달된다!
• FilterChain도 정상적으로 작동한다.
• 로그인 처리 또한 정상적으로 이루어지며, 쿼리도 잘 실행된다.

 

 

💡 고찰

1. state 값을 통해 특정 값을 전달하는 게 적절한가?

• state의 본래 목적
  • state의 본래 목적은 CSRF 방지 및 요청의 유효성 검증이다. 이를 사용자 역할이나 특정 비즈니스 로직을 전달하는 용도로 사용한다면, CSRF 방지 외의 추가적인 정보를 포함하게 되므로 본래 목적에 부합하지 않을 수 있다. 이러한 사용은 보안적인 위험과 관리의 복잡성을 초래할 수 있다.
• state 변질의 위험성
  • state 값이 인증 과정에서 중간에 변질되거나 조작될 경우, 회원가입이나 로그인 시 정상적인 권한 처리가 되지 않을 수 있다.

 

2. 그리고 사실 React Native에서는 리다이렉트를 통해 정보를 받는 것이 어렵다.

• 웹에서의 OAuth 로그인 처리
  • DefaultOAuth2UserService는 주로 웹이나 Spring MVC 환경에서 사용된다. 이러한 환경에서는 서버가 인증 흐름을 제어하고 사용자 정보를 로딩하며 세션을 관리하기 때문에 DefaultOAuth2UserService가 적합하다.
• React Native에서의 OAuth 로그인 처리
  • 반면, React Native와 같은 모바일 환경에서는 소셜 로그인을 구현할 때 보통 클라이언트 측에서 직접 인증을 처리하고, 서버와 통신하여 토큰을 전달하고 검증하는 방식이 더 일반적이다.

그래서 우리 프로젝트에서는 해당 로직을 갈고, 클라이언트 측에서 직접 인증을 처리하는 방식으로 새로 구현했다...

 

 

📍 참고 자료

• Interface OAuth2AuthorizationRequestResolver
• API 커스텀 구현 - OAuth2AuthorizationRequestResolver(1)