[react] 카카오 API로 로그인하기 - REST API, 액세스 토큰 전달하기

Prologue

소셜 로그인이라는 것을 한번 도전해보고 싶어 먼지쌓인 카카오 비즈니스 계정을 꺼냈...지만 정작 필요한건 카카오 디벨로퍼 계정이었다. 살짝 머쓱
하지만 당황하지 안코? 등록을 한 후 API 문서를 살펴보는데...
역시나 호락호락하게 API 사용법을 알려주진 않았다. 무조건 따라야하는 대충 사용하는 메서드의 정리 정도가 끝이었다...

마음 단단히 먹고 React로 새출발! 렛츠고!

What?

상기하였듯 카카오 API.
대략적인 가이드 문서 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

How?

카카오 로그인 버튼을 클릭했을 때, KAKAO_AUTH_URL로 이동하게 되고, 카카오 API를 통해 후미에 인가 코드가 붙은 채로 리다이렉트된다.
그 후 화면이 재 렌더되고, 인가 코드를 저장한 후 서버로 발송하는 로직을 통해 구현했다.

사용된 hooks

const navigate = useNavigate();
const location = useLocation();
const params = new URLSearchParams(location.search);
const AUTH_CODE = params.get('code');
const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&response_type=code`;

 useEffect(() => {
    fetch(`https://kauth.kakao.com/oauth/token`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: `grant_type=authorization_code&client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&code=${AUTH_CODE}`,
    })
      .then(res => res.json())
      .then(data => {
        if (data.access_token) {
          console.log(data.access_token);
          fetch('http://10.58.4.207:8000/users/login', {
            method: 'GET',
            headers: {
              Authorization: data.access_token,
            },
          })
            .then(response => response.json())
            .then(result => {
              if (result.access_token) {
                localStorage.setItem('token', result.access_token);
                alert('WELCOME');
                navigate('/');
              } else {
                alert('NONONO');
                navigate('/users/login');
              }
            });
        }
      });
  }, []);

HTML 코드

<SignInContainer>
  <RightTop>
    <Logo>
      <img src="/images/logo.png" alt="logo" />
    </Logo>
    <Login onSubmit={goToMain}>
      <Input
             name="userId"
             onChange={handleInput}
             type="text"
             placeholder="이메일"
             />
      <Input
             name="userPw"
             onChange={handleInput}
             type="password"
             placeholder="비밀번호"
             />
      <LoginButton type="submit" disabled={!isInputValid}>
        로그인
      </LoginButton>
    </Login>
  </RightTop>
  <SignUp>
    <LoginKakao href={KAKAO_AUTH_URL}>
      <img src="/images/kakao_login_medium_narrow.png" alt="loginKakao" />
    </LoginKakao>
  </SignUp>
</SignInContainer>