카카오 소셜로그인 사용시 로그인페이지 출력문제

디벨로퍼스 앱ID : 1203105

개발환경

  • springBoot 3.4.0
  • springSecurity6
  • Vue.js 3.2.13

포트

  • Springboot : 8081
  • Vue : 8080

내용

현재 front에서 back으로 OAuth 2.0을 이용하여 카카오 로그인을 구현 중에 어려움을 겪고 있습니다.

원래 방식은 프론트에서 카카오 로그인 버튼을 클릭할 시 GET 요청을 보내고 백엔드에서는 제가 구현한 코드를 통해 카카오 로그인페이지로 리다이렉션되도록 설정했지만 SecurityConfig을 사용하면 굳이 직접 구현하지 않아도 된다고 하여 구현했던 코드를 이용하지 않고 SecurityConfig 만 사용하려하는데 카카오톡 로그인페이지가 리다이렉션이 되지 않아 문의드립니다.

아래 application.properties에서 client-id 와 client-secret은 값이 제대로 들어가있는 상태입니다.

image

404 없는 페이지라고 표시되는 군요. 확인 부탁드려요.

아래 내용도 참고해주세요.

Spring에서 카카오 로그인 사용하기 - Spring Security 5, OAuth 2 - deprecated 대응 2023년 6월 27일

1개의 좋아요

Hello, @a3989957

Authorization endpoints for Kakao are defined in SecurityFilterChain but redirection isn’t working. Try this codes.

  1. Suggested solution:
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    return http
        .oauth2Login(oauth2 -> oauth2
            .authorizationEndpoint(endpoint -> endpoint
                .baseUri("/oauth2/authorization")
            )
            .redirectionEndpoint(endpoint -> endpoint
                .baseUri("/oauth2/callback/*")
            )
        )
        .authorizeRequests(auth -> auth
            .requestMatchers("/", "/login/**").permitAll()
            .anyRequest().authenticated()
        )
        .build();
}
  1. application.properties settings:
spring.security.oauth2.client.registration.kakao.redirect-uri=${app.base.url}/oauth2/callback/kakao
spring.security.oauth2.client.registration.kakao.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.kakao.client-authentication-method=client_secret_post
spring.security.oauth2.client.registration.kakao.scope=profile_nickname,profile_image

spring.security.oauth2.client.provider.kakao.authorization-uri=https://kauth.kakao.com/oauth/authorize
spring.security.oauth2.client.provider.kakao.token-uri=https://kauth.kakao.com/oauth/token
spring.security.oauth2.client.provider.kakao.user-info-uri=https://kapi.kakao.com/v2/user/me
  1. For the Vue.js frontend:
function redirectToKakaoLogin() {
    window.location.href = "http://localhost:8081/oauth2/authorization/kakao";
}