Cannot get /oauth/kakao/callback

REST API
1

문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.

개발환경은 프론트는 리액트 네이티비브 엑스포 이고 백엔드는 스프링부트입니다.,
앱ID는1068884 입니다.

인가 코드랑 접근 코드를 콘솔에 찍어봤을때는 잘 출력이 되는데 여기서 리다이렉트 가 안되서 그런건지 궁금합니다… 아니면 어디서 따로 구현을 해야지 cannot get / oauth/kakao/callback 이런걸 안뜨고 로그인에 성공을 시킬수 있는지 궁금합니다…

const KaKaoLoginPage = () => {

  function KakaoLoginWebView (data) {
    const exp = "code=";
    var condition = data.indexOf(exp);    
    if (condition != -1) {
      var authorize_code = data.substring(condition + exp.length);
      console.log(authorize_code);
      requestToken(authorize_code);
    };
  }
  
  const requestToken = async (authorize_code) => {
    var AccessToken = "none";
    axios ({
      method: 'post',
      url:'https://kauth.kakao.com/oauth/token',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
      },
      data: qs.stringify({ 
        grant_type: 'authorization_code',
        client_id: REST_API_KEY,
        redirect_uri: REDIRECT_URI, // 리다이렉션 URI 설정
        code: authorize_code,
      }),
    }).then((response) =>{
      AccessToken = response.data.access_token;
      console.log('Success : ', AccessToken);
     // saveAccessTokenToBackend(AccessToken);
     // 카카오에서 받은 인가 코드를 전송
      sendAuthorizationCodeToBackend(AccessToken);
      storeData(AccessToken)
    }).catch(function(error){
      console.log('error', error);
    })
  };
  
  const sendAuthorizationCodeToBackend = async (authorizeCode) => {
    const sendAuthorizationCode = 'http://localhost:8082/getKakaoAccessToken';
    try {
        const response = await axios.post(sendAuthorizationCode, { authorizeCode });
        console.log('Successfully sent authorization code to backend:', response.data);
        
      } catch (error) {
        console.error('Error sending authorization code to backend:', error);
    }
  };

  

  const storeData = async(returnValue) =>{
    try{
      await AsyncStorage.setItem('AccessToken', returnValue);
    }catch(error){

    }
  }

  return (
    <View style={Styles.container}>      
      <WebView
        style={{ flex: 1 }}
        originWhitelist={['*']}
        scalesPageToFit={false}
        source={{
          uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`,
        }}
        injectedJavaScript={INJECTED_JAVASCRIPT}
        javaScriptEnabled
        onMessage={event => { KakaoLoginWebView(event.nativeEvent["url"]); }}
      />
    </View>
  )
}

export default KaKaoLoginPage;

const Styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 24,
    backgroundColor: '#fff',
  },    
});

스크린샷 2024-05-09 오전 11.36.26
스크린샷 2024-05-09 오전 11.36.261324×220 36.1 KB

2

해당 메시지는 스프링에서 출력한것 같은데요
우선 redirect_uri가 일반 브라우저에서 정상 동작하는지 점검해 보시는게 좋을것 같습니다.

3

스크린샷 2024-05-09 오전 11.51.50

리다이렉트 uri 들어가면 이렇게 나옵니다… !

4

네, spring에서 해당 엔드포인트가 등록되어 있지 않아 발생한 오류 입니다.
springboot oauth2 설정 내용을 확인해 보시면 좋을것 같습니다.

또한 spring에서 제공하는 oauth2 모듈을 그대로 사용하신 경우
서비스측 인가주소가 아닌 https://kauth.kakao.com/oauth/authorize 로 바로 진입하게 되면 redirect_uri 에서 spring의 보안 처리에 의해 오류 발생하게 되는점 참고 부탁드립니다.

5

늦은시간에 질문을 드려 대단히 죄송합니다…!

리액트 네이티브 엑스포 환경에서 백엔드로 보내는 코드는
const sendAuthorizationCodeToBackend = async (accessToken) => {
try {
const backendEndpoint = ‘http://localhost:8082/oauth/kakao’; // 백엔드의 엔드포인트 주소
const response = await axios.get(backendEndpoint, qs.stringify({ accessToken })); // 액세스 토큰을 함께 전송
console.log(‘Successfully sent authorization code to backend:’, response.data);
} catch (error) {
console.error(‘Error sending authorization code to backend:’, error);
}
};

이렇게 했습니다.

그리고 백엔드(스프링부트)에서 구현하는 코드는
@ResponseBody
@GetMapping(“/oauth/kakao”)
public void handleKakaoOAuth(@RequestParam String accessToken) {

    System.out.println("Received access token from " + accessToken);

}

그리고 SecurityConfig 코드
public class SecurityConfig {

private final CustomOAuth2UserService customOAuth2UserService;
private final OAuth2AuthenticationSuccessHandler oAuth2AuthenticationSuccessHandler;
private final OAuth2AuthenticationFailureHandler oAuth2AuthenticationFailureHandler;
private final HttpCookieOAuth2AuthorizationRequestRepository httpCookieOAuth2AuthorizationRequestRepository;

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

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

    http.csrf(AbstractHttpConfigurer::disable)
            .headers(headersConfigurer -> headersConfigurer.frameOptions(HeadersConfigurer.FrameOptionsConfig::disable)) // For H2 DB
            .formLogin(AbstractHttpConfigurer::disable)
            .httpBasic(AbstractHttpConfigurer::disable)
            .authorizeHttpRequests((requests) -> requests
                    .requestMatchers(antMatcher("/api/admin/**")).hasRole("ADMIN")
                    .requestMatchers(antMatcher("/api/user/**")).hasRole("USER")
                    .requestMatchers("/oauth/kakao").hasAuthority("USER")
                    .requestMatchers(antMatcher("/h2-console/**")).permitAll()
                    .anyRequest().authenticated()
            )
            .sessionManagement(sessions -> sessions.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .oauth2Login(configure ->
                    configure
                            .authorizationEndpoint(config -> config.authorizationRequestRepository(httpCookieOAuth2AuthorizationRequestRepository))
                            .userInfoEndpoint(config -> config.userService(customOAuth2UserService))
                            .successHandler(oAuth2AuthenticationSuccessHandler)
                            .failureHandler(oAuth2AuthenticationFailureHandler)

            );

    return http.build();
}

}

다음과 같이 했는데 이런식으로 구성하는게 아닌가요…?