React(nextJS)에서 카카오 로그인 기능 구현하기

개요

이 작업이 단순 퍼블리싱을 제외한다면 회사에서 처음 했던 일이었던 것 같다.

사실 카카오 로그인 연동은 프론트엔드와 백엔드가 함께 작업해야 하는 내용이라 이 글에서 설명하는 내용만으로 설명이 부족할 수도 있을거라 생각한다.

일단 한번 정리해보자.

카카오 로그인 흐름

카카오 로그인을 페이지 단위로 이해하면 아래와 같다.

1. 웹사이트에서 카카오 로그인 버튼 클릭

(보통 이렇게 생김)

 

2. 카카오 로그인 페이지로 이동

(보통 이렇게 생김)

 

 

3. 로그인이 되면 웹페이지로 다시 이동하면서 로그인 완료

(백엔드에서 로그인 성공시켜줌.)

 

 

정리하면

1. 로그인 버튼 클릭
2. 카카오 로그인 페이지 이동
3. 맨 처음 로그인 누른 페이지로 리다이렉트

이다.

 

이 간단한 프로세스는

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

에 아주 자세히 설명되어 있다.

 

문서를 제대로 이해하고나면 대략적으로 FE개발자가 해야 할 task가 보인다.

1. 카카오 로그인 SDK를 설치(nextJS에서는 _document, 모든 화면에 공통으로 들어갈 속성을 관리할 페이지에 넣어야 함)
2. Kakao.Auth 초기화
3. 로그인 버튼 작성 및 로그인 버튼 클릭 시 로직 셋팅
   1. 카카오 SDK를 통한 authorize
   2. 카카오 인증 이후 로그인을 처리할 리다이렉트 URL 설정

일단은 이러한 대략적인 할일만 생각해두고 작업을 시작하면 된다.

구현

1. 카카오 로그인 SDK설치

우선 카카오 로그인 SDK는 아래와 같이 _document 하단에 넣어두면 된다.

					.........
          <NextScript />
          <script
            src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
            integrity="sha384-asdjkflaskdasjkhshdhjkhahkshkjdhslfkhasldfhlakshdflkahslkdfhkalsdhfkjahsdklfhalksdf"
            crossOrigin="anonymous"
          ></script>
        </body>
      </Html>
    );
  }
}

그 다음 카카오 SDK를 사용하는 모든 작업은 하나의 파일에서 관리하도록 하면 편하다.

난 lib/kakao.ts 같은 이름으로 만들었다.

import { KAKAO_INIT_KEY } from 'commons';

declare global {
  interface Window {
    Kakao: KakaoSDK;
  }
}
interface KakaoSDK {
  init: (key: string) => void;
  isInitialized: () => boolean;
  Auth: {
    authorize: (options: { redirectUri: string; scope: string; serviceTerms: string }) => void;
  };
}
export default class Kakao {
  setKakaoLogin = () => {
    if (!window.Kakao.isInitialized()) {
      window.Kakao.init(KAKAO_INIT_KEY);
    }
    sessionStorage.setItem(
      'kakaoRedirectUrl',
      window.location.href.split(`${window.location.protocol}//${window.location.host}`)[1]
    );
    window.Kakao.Auth.authorize({
      redirectUri: `${window.location.protocol}//${window.location.host}/pc/kakao-login`,
      scope: 'account_email',
      serviceTerms: 'account_email',
    });
  };
}

일단 버튼 클릭 시 Kakao.setKakaoLogin를 호출하도록 하면, 아래와 같이 동작한다.

우선 카카오 isInitialized가 false라면(카카오 인증이 초기화가 안되어있다면)

 

window.Kakao.init를 통해 카카오 로그인을 키값에 따라 활성화하고 세션스토리지에 현재 url을 설정한다.

 

kakao.init 이후 이동할 페이지도 설정해준다.

이때 포인트는

 

세션 스토리지에 kakaoRedirectUrl와

window.Kakao.Auth.authorize의 redirectUri이 다르다는 것이다.

kakaoRedirectUrl는 ‘내가 모든 로그인이 끝나면 돌아올 페이지의 주소’이고

window.Kakao.Auth.authorize는 ‘카카오에서 인증이 끝나면 우리쪽 로그인 프로세스를 처리해줄 페이지의 주소’ 인 것이다.

 

그러면 저 서비스를 실제 로그인 버튼 이벤트와 매핑시켜준다.

로그인 버튼이 존재하는 컴포넌트에서 이렇게.

import Kakao from 'lib/kakao';

...
<button className="kakao-button" onClick={this.onShowKakaoLogin}>
  Kakao로 계속하기 <img className="start-icon" src={KakaoIcon} />
</button>

...
onShowKakaoLogin = () => {
  this.kakaoAuth.setKakaoLogin();
};

이렇게 해주면 카카오 로그인 버튼을 눌렀을때 여기까진 잘 갈 것이다.

 

 

 

 

 

이제 우리쪽 로그인 프로세스를 태워줘야 한다.

카카오 로그인이 정상적으로 되었다면 아까

window.Kakao.Auth.authorize에서 reredirectUri로 설정해준 socialLogin 페이지 뒤에

아래와 같이 쿼리스트링으로 code=뭐라뭐라고 왔을 것이다.

 

이걸 백엔드에 보내줘야 한다.

페이지를 아래와 같이 작성해주면 된다.

import React, { useEffect } from 'react';
import Router from 'next/router';

export default function KakaoLogin() {
  useEffect(() => {
    const kakaoRedirectUrl = sessionStorage.getItem('kakaoRedirectUrl');
    if (kakaoRedirectUrl) {
      const code = new URL(window.location.href).searchParams.get('code');
      //@@ 
      //login process
      //@@
      Router.push(kakaoRedirectUrl);
    }
  return <></>;
}

현재 로그인이 되어있지 않은 상태라면,

KakaoLogin 페이지가 오픈되었을때, 아래와 같이 로그인이 진행된다.

1. 카카오에서 보내준 ‘인가 코드(code=adfasdf’)를 통해 토큰 발급
2. 로그인 처리 이후 세션에 저장된 kakaoRedirectUrl로 이동(router.push)

 

이 부분에서 중요한것은

백엔드에서 아래 내용에 따라 토큰을 받아 로그인 처리를 해줘야 한다는 것이다.

 

백엔드에서 정상적으로 로그인 처리를 했다면, 사실상 더 할게 없다.

우리 회사는 백엔드에 인가코드만 넘겨주면 기존 로그인과 동일한 데이터를 넘겨주어서

해당 로그인 정보를 통해 follow 등 유저 기반 정보 api를 요청할 수 있었기 때문에,

카카오 로그인 이후 해당 작업을 reducer에서 진행하도록 작업했다.

기타

막상 적고나니까 정말 별거 없다.

뭔가 우아한 방법으로 sessionStorage를 사용하지 않고 로그인처리하는 방법이 있을까 고민을 해 봤지만 아직은 잘 모르겠다.

 

일단 만들어놓고나서 구글 애널리틱스에서 실제 유저들의 로그인 빈도가 이메일 로그인에서 카카오 로그인으로 점차 이동하는 것을 보니 기분이 아주 좋아졌다.