[개발] 카카오 로그인 구현하기

요즘 거의 대부분의 애플리케이션은 사용자의 쉬운 접근성을 위해 소셜로그인을 제공한다. 나도 대부분의 애플리케이션을 이용할 때, 서비스 자체 회원가입, 로그인을 거의 이용하지 않고, 소셜 로그인을 제공하지 않는 애플리케이션은 자주 사용하지 않게 되는 것 같다. 이제는 소셜 로그인이 필수라고 느끼기 때문에. 프로젝트를 진행하면서 소셜 로그인을 구현했던 방법에 대해서 정리해보려고 한다.

 

 

사전작업

카카오 로그인을 구현하기 위해서는 사전에 kakao developers에서 애플리케이션을 등록해야한다.

애플리케이션 추가

애플리케이션 앱 키

애플리케이션을 추가하고 요약정보를 확인해보면 생성한 애플리케이션의 앱 키를 볼 수 있다. 이번 포스팅에서는 인가코드를 받고, 해당 인가 코드를 통해 토큰을 받아 로그인을 진행하는 로직을 다루기 때문에 REST API키를 사용하도록 한다.

web 플랫폼 등록

카카오 로그인을 웹에서 구현하기 때문에 web 플랫폼에 허용을 위한 사이트 도메인을 추가해준다. 사이트 도메인이 아직 없다면 프론트의 기본 로컬 서버인 http://localhost:3000을 등록하면 된다.

카카오 로그인 활성화

Redirect URI 등록

카카오 로그인을 활성화 해주고 Redirect URI를 설정한다. 이 Redirect URI는 카카오 동의 후 리다이렉트되는 페이지를 의미하고 쿼리 스트링으로 인가코드를 발급해준다. 따라서 프론트에서 접근가능한 도메인을 등록하면 된다.

 

카카오 로그인 로직

카카오 로그인 로직

이제 카카오 로그인을 구현하기 위한 사전 작업이 끝이 났을 것이다. 이제 카카오 로그인을 구현해볼텐데 그 전에 위에 있는 그림 하나를 보자. 아마 소셜 로그인 구현을 위해 검색하면서 한 번은 마주쳤을 사진이다. 그만큼 이 그림은 소셜 로그인의 로직을 잘 설명해주고있다. 간단하게 나타내보자면 다음과 같다.

 

1. 소셜 로그인 버튼을 눌러서 카카오에 인가코드 발급 요청

2. 등록한 Redirect URI에 쿼리스트링으로 인가코드 발급

3. Redirect URI로 등록해 놓은 해당 페이지에서 인가코드를 가지고 서버로 토큰 발급 요청

4. 서버는 카카오에 토큰 발급 요청한뒤 받은 토큰을 가지고 사용자정보를 DB에 저장 이후 자체 jwt 토큰을 발급하여 클라이언트로 전송

 

// login/index.tsx
...
<KaKaoBtn href={`https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`}>
  <img src={kakaologo}></img>
  <span>카카오 로그인</span>
</KaKaoBtn>

해당 링크는 카카오 로그인 동의 화면을 호출하게되고, REST_API_KEY에는 애플리케이션의 REST API 앱 키를, REDIRECT_URI에는 위에서 설정한 Redirect URI를 넣어주면 된다. 카카오 로그인 동의 화면이 정상적으로 호출된 후, 동의 후 계속하기를 누르면 등록한 Redirect URI로 리다이렉트 된다.

 

// login/kakao.tsx
...
const Kakao = () => {
  const router = useRouter();
  useEffect(() => {
    const code = new URL(window.location.href).searchParams.get('code');
    async function login() {
      const data = await authApi.kakaoLogin(code);
      const token = {
        accessToken: data.jwt_token.access_token,
        refreshToken: data.jwt_token.refresh_token,
      };
      if (token) {
        setToken(token);
        router.push('/home');
      } else {
        router.push('/auth/login');
      }
    }
    login();
  }, []);
  return <PageLayout>Kakao</PageLayout>;
};

export default Kakao;

내가 설정한 Redirect URI가 http://localhost:3000/login/kakao 라고 가정해보자.

그렇다면 login/kakao에 해당하는 페이지를 만들어 놓고, 해당 페이지 내에서 쿼리 스트링으로 발급받은 인가코드를 가져오기만 하면된다.

따라서 "code"라는 키의 value가 바로 인가코드가 되는 것이고, 해당 인가코드를 통해 서버로 토큰 발급을 요청한다. 이 후 토큰을 저장하는 방식은 서비스에 맞게 처리하면 된다.

 

이렇게 카카오 로그인을 구현하는 방법에 대해서 알아보았는데, 다른 소셜 로그인도 비슷한 로직으로 구현되는 것으로 알고있다.

이 글을 읽는 다른 개발자 분들에게도 소셜로그인을 구현하는데 많은 도움이 되는 포스팅이였으면 한다.