oAuth 로그인 구현(2): (1) 오류 수정

앞선 포스팅인 oAuth 로그인 구현(1) 게시글에서 인가 코드를 받아오는 것을 구현했는데, 오류가 있어 정정하는 포스팅이다.

문제점

kakao devel 문서에는 인가 코드가 서비스 서버로 받는 스텝으로 나오는데, (1) 구현에선 서비스 클라이언트에서 요청하고 받은 후에 서비스 서버로 보내는 작업으로 구현하려했다.

이 경우 우려된 문제 발생 가능성은 다음 2가지가 있었다.

1. 임의의 인가 코드를 쿼리로 페이지를 호출하여 서비스 서버와 인증 서버로 마구잡이 보내며 서버 공격하는 방식
   • 물론 해보지 않았지만, 가짜 인가 코드를 전달할 수 있다는 의미로 해석했을 때 불가능해야 함을 인지
   • 보안 과정인데 중간 단계를 접근하는 자체가 불가능해야 함
2. 클라이언트에서 인가 코드 노출로 인한 탈취 공격
   • 탈취해서 페이크 서버에서 토큰을 먼저 요청한다면? 이상한 서버에 로그인되어 권한에 따라 개인정보를 가져갈 가능성

클라이언트 구현

1. 로그인 버튼 변경
   • 로그인되는 페이지로 바로 넘어가던 a tag를 제거
     • 인가 코드 url가 노출되고 주체가 클라이언트에서 되는 상황
   • 서버로부터 url 받도록 수정

  const handleClick = useCallback(() => {
    axios.get(`${API_HOST}/login/kakao`).then(response => {
      console.log(response.data);
      window.location.assign(response.data);
    });
  }, []);
// ...
      <div onClick={handleClick} onKeyDown={handleKeyDown} role="button" tabIndex={0}>
        <img src={kakaoLogin} alt="login_kakao" />
      </div>
// ...

서버 구현

서버가 인가코드 요청부터 받는것까지 하므로 서버 구현이 주요하게 추가되었다.

1. env 파일 추가
   • client id 등은 보안 문제가 있어서 env 파일로 등록하기로 하였다. url에 노출이 되기는 하지만..
   • kakao 로그인 api를 사용기하기 위해 등록 앱 정보를 입력

// .env
KAKAO_CLIENT_ID="/* 각자 등록한 앱 아이디 */"
KAKAO_AUTH_URL="https://kauth.kakao.com/oauth/authorize"
KAKAO_REDIRECT_URL="http://localhost:3000/oauth/code/redirect" // 예시

2. dotenv로 env 파일 가져옴

// index.ts
import dotenv from 'dotenv';

dotenv.config();

3. 로그인 api 생성

router.get('/login/kakao', (req, response) => {
  return response.json(
    `${process.env.KAKAO_AUTH_URL}?response_type=code&client_id=${process.env.KAKAO_CLIENT_ID}&redirect_uri=${process.env.KAKAO_REDIRECT_URL}`
  );
});

4. 로그인 리다이렉트 api

router.get('/oauth/redirect', (req, response) => {
  console.log('hi');
  console.log(req.params);
  console.log(req.query);
  /**
   * 토큰 요청 및 쿠키 생성
   */
  
  // 클라이언트 홈으로 리다이렉트 하는 부분은 임시코드
  return response.redirect('http://localhost:9000');
});

결과

결과적으로 인가코드는 서버쪽 리다이렉트 url로 전달되므로 코드에서 인가코드를 가져갈 일은 없어진다.