카카오 로그인 오류

REST API
1

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

const KAKAO_CLIENT_ID = '.env';

const KAKAO_REDIRECT_URI = '.env';

const KAKAO_AUTH_URI = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`;


const handleSocialLogin = async () => {
    window.location.href = KAKAO_AUTH_URI;
  };

를 통해 로그인 버튼을 누르면 리다이렉트 페이지로 이동되게 했습니다.

이 아래는 리다이렉트 페이지를 routh 한 코드입니다.

import { useEffect } from 'react';
import axios from 'axios';

const Kakao = () => {
  useEffect(() => {
    const getCodeFromURL = async () => {
      const code = new URL(window.location.href).searchParams.get('code');
      if (code) {
        try {
          const response = await axios.get(
            `{서버api 주소}?code=${code}`,
          );

          if (response.status === 200) {
            const data = response.data;
            console.log('data', data);
            // if (data.loginSuccess) {
            //   const member = data.member;
            //   // Handle successful login here
            //   console.log('Logged in successfully:', member);
            // } else {
            //   // Handle the case where login was not successful
            //   console.error('Login failed:', data.errorMessage);
            // }
          } else {
            console.error('API call failed:', response.statusText);
          }
        } catch (error) {
          console.error('API call error:', error);
        }
      } else {
        console.log('No code found in the URL.');
      }
    };

    getCodeFromURL();
  }, []);

  return (
    <div className="LoginHandler">
      <div className="notice">
        <p>로그인 중입니다.</p>
        <p>잠시만 기다려주세요.</p>
        <div className="spinner"></div>
      </div>
    </div>
  );
};
export default Kakao;

이렇게 진행하면 개발자탭에 네트워크에서는 get 요청이 200이 뜨는것을 확인 할 수 있었는데 로컬 서버를 확인 하면 500에러가 뜨고 백에서 에러 코드를 확인하면 400에러가 뜨게 되면서 response 값에 오류가 뜨는 것을 확인하였는데 어떤 코드가 문제가 되는 것인지 알수 있을까요 ?

2

안녕하세요.

접근토큰 발급 받는 코드와 오류 내용을 제공 부탁드립니다.

3

프론트에서 작동하는 코드는 이게 전체이고

response를 콘솔로 찍어보면
{data: ‘\n\n \n <…QiLCJ0aXRsZSI6Ik9LIn0=">\n \n\n’, status: 200, statusText: ‘’, headers: AxiosHeaders, config: {…}, …}
config
:
{transitional: {…}, adapter: ‘xhr’, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
data
:
“\n<html lang="en-US">\n \n <meta charset="utf-8">\n <meta name="author" content="ngrok">\n <meta name="description" content="ngrok is the fastest way to put anything on the internet with a single command.">\n <meta name="robots" content="noindex, nofollow">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link id="style" rel="stylesheet" href="https://cdn.ngrok.com/static/css/error.css\”>\n You are about to visit 3e9c-222-96-41-224.ngrok-free.app, served by 222.96.41.224. This website is served for free through ngrok.com. You should only visit this website if you trust whoever sent the link to you. (ERR_NGROK_6024)\n <script id="script" src="https://cdn.ngrok.com/static/js/error.js\" type="text/javascript">\n \n <body id="ngrok">\n <div id="root" data-payload="eyJjZG5CYXNlIjoiaHR0cHM6Ly9jZG4ubmdyb2suY29tLyIsImNvZGUiOiI2MDI0IiwiaG9zdHBvcnQiOiIzZTljLTIyMi05Ni00MS0yMjQubmdyb2stZnJlZS5hcHAiLCJtZXNzYWdlIjoiWW91IGFyZSBhYm91dCB0byB2aXNpdCAzZTljLTIyMi05Ni00MS0yMjQubmdyb2stZnJlZS5hcHAsIHNlcnZlZCBieSAyMjIuOTYuNDEuMjI0LiBUaGlzIHdlYnNpdGUgaXMgc2VydmVkIGZvciBmcmVlIHRocm91Z2ggbmdyb2suY29tLiBZb3Ugc2hvdWxkIG9ubHkgdmlzaXQgdGhpcyB3ZWJzaXRlIGlmIHlvdSB0cnVzdCB3aG9ldmVyIHNlbnQgdGhlIGxpbmsgdG8geW91LiIsInNlcnZpbmdJUCI6IjIyMi45Ni40MS4yMjQiLCJ0aXRsZSI6Ik9LIn0=">\n \n\n"
headers
:
AxiosHeaders {content-length: ‘1380’, content-type: ‘text/html’}
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status
:
200
statusText
:
“”
[[Prototype]]
:
Object 이렇게 나옵니다. 그리고 400에러에서는 바디값이 비어있다고 나온다고 합니다 .

접근 토큰 발급 코드는 백코드를 확인해봐야할까요 ?

4

이 요청을 처리하는 서비스측 백앤드 코드 부탁드립니다.

5

package com.codestates.server.global.security.oauth2.controller;

import com.codestates.server.global.security.oauth2.dto.KakaoLoginResponseDto;
import com.codestates.server.global.security.oauth2.service.KakaoOAuthService;
import lombok.AllArgsConstructor;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@AllArgsConstructor

public class KakaoOAuthController {

private final KakaoOAuthService kakaoOAuthService;


/**
 * 카카오 code 콜백 컨트롤러
 *
 * @param code
 * @return
 */
@GetMapping("/login/oauth/code/kakao")
public ResponseEntity<KakaoLoginResponseDto> handleKakaoCallback(@RequestParam("code") String code) {

    // 프론트에서 받아온 code로 카카오에서 AccessToken 받기
    String kakaoAccessToken = String.valueOf(kakaoOAuthService.exchangeCodeForAccessToekn(code));

    // 카카오 로그인 성공, 실패 response
    return kakaoOAuthService.kakaoLogin(kakaoAccessToken);
}

} 이코드 가 맞을까요?

6

백앤드 코드 구현하신 분이 따로 있을까요?
그렇다면 구현하신 분이 문의 하시는게 좋을것 같습니다.

위에 제공하신 코드에 접근토큰 발급 코드가 확인되지 않습니다.

이 부분 추가 제공 부탁드립니다.