[OAuth2] 카카오 로그인페이지가 출력되지 않는 문제

프로젝트 진행 중 사용자가 카카오 로그인 버튼을 누르면

카카오 로그인 페이지가 출력되어야 하는데 출력되지 않는 문제가 발생하였다.

 

원래 정상적으로 로직이 작동하려면

카카오 로그인 버튼을 누르면 http://localhost:8081/oauth2/authorization/kakao 로 리다이렉션되고

스프링시큐리티의 OAuth2AuthorizationRequestRedirectFilter 에서

해당 URL을 가로채서 사용자에게 카카오 로그인페이지를 출력해줘야한다. 

 

 

 

사용자에게 카카오 로그인 페이지를 보여주는 과정은 아래 그림과 같다.

 

 

 

 

 

 

1. 문제 발견

(카카오 로그인 버튼을 눌러도 로그인페이지가 뜨지 않고 404에러 발생)

 

 

 

 

 

 

 

 

2. 문제가 발생하고 있는 코드

 

-프론트

<img src="/imgs/kakao_login_medium_wide.png" alt="Kakao Img" class="kakao-button" @click="redirectToKakaoLogin" />

 methods: {
 	redirectToKakaoLogin() {
      window.location.href = "http://localhost:8081/oauth2/authorization/kakao"; // 백엔드로 리다이렉트
    }
}

 

 

-백엔드(SecurityConfig.java)

 http
                .oauth2Login((oauth2) -> oauth2
                        .authorizationEndpoint((endpoint) -> endpoint.baseUri("/oauth2/authorization/kakao")) //사용자가 해당 URL 로 리다이렉션 되면 Spring Security 가 자동으로 카카오 로그인 페이지로 사용자를 보냄
                        .redirectionEndpoint((endpoint) -> endpoint.baseUri("/oauth/kakao/authorization")) //인가코드를 반환하는 리다이렉션 URL
                        .userInfoEndpoint((endpoint) -> endpoint.userService(customOAuth2UserService))); //로그인 후 카카오는 액세스 토큰을 반환하고 이를 사용하여 사용자 정보를 가져오는 과정을 CustomOAuth2UserService 에서 처리

 

 

 

 

 

 

 

 

 

3. 문제 해결

.authorizationEndpoint((endpoint) -> endpoint.baseUri("/oauth2/authorization/kakao")) 

- SecurityConfig 에서 위 코드를 제거하니 정상적으로 로그인 페이지가 출력되는 걸 확인할 수 있었다.

 

 

 

 

 

 

 

 

 

 

4. 수정 후 코드

http
                .oauth2Login((oauth2) -> oauth2
                        .redirectionEndpoint((endpoint) -> endpoint.baseUri("/oauth/kakao/authorization")) //인가코드를 반환하는 리다이렉션 URL
                        .userInfoEndpoint((endpoint) -> endpoint.userService(customOAuth2UserService))); //로그인 후 카카오는 액세스 토큰을 반환하고 이를 사용하여 사용자 정보를 가져오는 과정을 CustomOAuth2UserService 에서 처리

 

 

 

 

 

 

 

 

5. 결과

 

 

6. 오류가 발생한 이유

.oauth2Login((oauth2) -> oauth2
    .authorizationEndpoint((endpoint) -> endpoint.baseUri("/oauth2/authorization/kakao"))
)

위 코드로 기본 엔드 포인트를 덮어쓰면 

OAuth2AuthorizationRequestRedirectFilter가 제대로 동작하지 않을 수 있다고 한다.