logo
Published on

Next.js+typescript 환경에서 카카오 로그인 구현하기

Authors
  • avatar
    Name
    Bora Choi
    Twitter

들어가기 전에

프로젝트에서 소셜 로그인을 구현할때 프론트와 백에서 어떤 역할을 나눴는지 미리 설명하려한다.
먼저 프론트에서 인가 코드를 요청해 받이와 백으로 인가 코드를 보내면 백에서 인가코드로 토큰을 요청하고
받은 토큰으로 유저정보를 받아와 유저정보가 있으면 로그인, 토큰이 없으면 유저 이메일을 프론트로 다시 보내 회원가입 페이지로 이동하는 방식으로 구현했다.

그래서 프론트에서 해야할건 카카오API에 인가코드 요청하기!!

카카오 API 설정하기

  1. 카카오 API 키와 redirect uri 환경변수 파일에 저장하기 사실 이부분은 선택이긴 한데 키를 외부에 노출시키지 않게 하고, redirect uri가 배포시에는 변경되기때문에 환경변수로 만들었다.

  2. 카카오 API 초기화하기
    아래 스크립트를 _document.tsx파일에 추가한다. CRA의 경우는 index.html에 추가!

    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    

    그리고 Kakao.init메소드를 사용해서 카카오 API를 초기화시켜준다. 🤯 이때 typescript와 함께 사용하면서 문제점이 발생했는데 Kakao에 타입이없었기때문에 타입선언이 필요했다. Next.js의 경우에는 _app.ts파일에 타입선언을 해서 오류처리를 할 수 있었다.

    declare global {
      interface Window {
        Kakao: any
      }
    }
    

    다음으로 진짜 초기화를 진행한다. 우리는 window안에 Kakao를 전역 속성으로 지정해줬기때문에
    카카오변수를 윈도우에서 가져온다. 그리고 useEffect를 사용하여 초기화를 시켜줬다!
    이때 Next.js의 경우 SSR이기때문에 서버에서는 window 에 접근 할 수 없으므로 window !==undefined 를 통해 브라우저가 맞는지 확인이 추가로 필요하다.

    const { Kakao } = window
    
    useEffect(() => {
      if (typeof window !== 'undefined') Kakao.init(KAKAO_KEY)
    }, [Kakao])
    
  3. 인가 코드 요청하기

    사실 가장 시간을 많이 뺏겻던 부분이 2번이었어서 이부분은 엄청 수월하게 할 수 있었다.
    먼저 버튼 클릭시 인가코드를 요청하는 handleOnClickKakao 함수를 만들었다.
    Kakao.Auth.authorize 함수를 사용해서 리다이렉트 uri를 설정하면 인가 코드를 받은후의 로직은 리다이렉트 uri에서 처리하면된다. 아래 함수를 실행하면 카카오 로그인창이 나오고 리다이렉트 uri의 쿼리로 code=인가코드가 온다. 이걸 서버에 보내면 끝!

    const handleOnClickKakao = () => {
      Kakao.Auth.authorize({
        redirectUri: KAKAO_REDIRECT_URI,
      })
    }
    

구현을 마치며...

이전에도 카카오 로그인을 구현해본적이 있는데 그때는 라이브러리를 사용했었고 CRA과 js로 만들어진 환경이었어서 큰 어려움을 느끼지 못햇었다.
이번에는 타입스크립트와 SSR이라는 새로운 환경에서 라이브러리 없이 구현하려 하니까 생각보다 시간이 걸렸지만 그래도 다른 소셜 API를 구현하는데 있어서 큰 어려움은 없을것 같다는 자신감을 얻었따 !!!