카카오 인가코드 백으로 전달 과정

REST API
1

문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.
앱 id 962290
react 환경에서 작업중입니다.

  useEffect(() => {
    const sendCodeToBackend = async () => {
      if (code) {
        try {
          const response = await axios.post(
            // 서버 엔드포인트로 GET 요청 보내기
            `{서버주소}?code=${code}`,
          );

          if (response.status === 200) {
            console.log(response);
            console.log(response.headers);
            const accessToken = response.headers.authorization; // Axios가 헤더를 직접 반환
            const userId = jwt_decode(accessToken).userId;
            const email = jwt_decode(accessToken).sub;
            localStorage.setItem('Id', email);
            localStorage.setItem('userId', userId);
            localStorage.setItem('Token', accessToken);
            alert('로그인이 성공했습니다.');
          } else {
            console.error('API 호출 실패:', response.statusText);
            navigate('/login');
          }
        } catch (error) {
          console.error('API 호출 에러:', error);
        }
      }
    };

프론트에서 인가코드를 뽑아서 백에 post를 통해 인가코드를 보내주고 토큰을 받아오려고 하는데 post 할 api 주소가 따로 존재 하는건가요>? 아니면 백에서 api주소를 새로 작성 해서 알려주어야하는건가요 지금 실행하면 post에서 404에러가 떠서 문제입니다.

2

안녕하세요.

post할 api 주소는 서비스측의 백앤드 API를 사용하시면 됩니다.
보통 접근토큰 발급을 위한 redirect_uri 에서 서비스측의 회원 가입 처리등을 진행하기에
문의주신바와 같이 프론트에서 code 값을 추출하여 백앤으로 다시 전달하지 않고
redirect_uri 에서 한번에 처리하는데요. 위와 같이 처리하시고자 하는 이유가 있을까요?

3

코드를 보내면 백에서 토큰을 준다는 생각으로 코드를 진행하였는데 다르게 구현하는 방법이 있을까요 ?

4

카카오 로그인 후, 서비스측 redirect_uri 로 302 리디렉션 됩니다.
때문에, redirect_uri 에 해당하는 서비스측 백앤드에서 접근토큰 발급 하실 수 있습니다.

문의 하신 내용은 이 때, 발급하지 않고 프론트측 랜더링 이후 code 파라미터를 추출하여 다시 백앤드로 던지시기에 문의 드렸습니다.

5

그러면 굳이 프론트에서 코드를 보낼 필요없이 토큰만 get 요청을 하면 되는건가요 ?