카카오 API를 이용한 로그인구현! 어려워하지말아요!

나라리야·2021년 8월 25일

우리가 프로젝트를 하다보면 만나는 외부 api와의 싸움!
그중에서도 이제는 거의 필수시되는 카카오 로그인 같은 연동 기능들에대해 이야기 해보자 한다.

카카오 로그인 API(OAuth 2.0)

이제는 거의 모든 사이트에서 이용하고 있는 소셜 로그인 연동은 자연스럽게 우리의 일상에 녹아들었는데 개발 공부를 하면서 어떻게 다른 사이트에있는 나의 개인정보를 가지고 불편한 회원가입서비스를 하지않고 빠르게 웹 사이트 또는 어플리케이션을 이용할 수 있는지 제일 궁금했던 부분이기도 하다! 왜냐면 당사자인 나도 많은 사이트의 아이디와 비밀번호를 기억한다는게 쉽지만은 않은 일이었기 때문에 이런 기술로 인해 훨씬 더 다양한사이트를 유연하게 이용함에 있어서 너무 좋은 연동 기능이라고 생각했기 때문이다. 카카오뿐만 아니라 네이버, 구글, 페이스북 같은 큰 기업들에서 로그인 연동 기능을 제공하고 있는데 여기서 프로젝트때 내가 구현했던 카카오 로그인을 중심으로 글을 써보겠다.

소셜 로그인의 흐름은 사실 간단하다.
리소스 오너(사이트)가 카카오 로그인 창을 클라이언트에게 보여주면 클라이언트는 로그인을 시도하고 동의항목을 체크하여 카카오 API 서버에 넘기게됩니다.
전달받은 정볼르 가지고 카카오 API 서버는 데이터를 식별하고 클라이언트가 인증에 성공한 데이터를 통해 약 5-6시간 로그인을 유지할 수 있는 토큰을 발급해주죠! 우리는 이 토큰을 활용하여 로그인을 진행하면 됩니다!

(이렇게 쉬울 것만 같았던 카카오 api로그인은 나에게 큰 시련을 가져다 주었다.)

카카오 API를 사용하기 위해 먼저 https://developers.kakao.com/ 사이트에 회원가입을 하고 내 애플리케이션 - 애플리케이션 추가하기에서 자유롭게 입력 후 저장합니다.

그리고 만든 앱을 클릭하여 들어간 후 앱 설정의 플랫폼을 클릭하고 카카오 로그인을 사용할 url을 등록합니다.

(몇몇 항목들은 카카오 비지니스로 가입해야 이용이 가능하다!)

카카오 로그인 ON으로 설정 및 활성화 상태도 ON으로 설정합니다.
활성화가 되었기 때문에 이제 앱키를 활용할 수 있는데 저희는 javascript키를 활용해서 코드를 작성했습니다. (키는 공개할 수 없기 때문에 스킵!)

카카오 로그인을 위해 토큰 정보에 대한 내용을 정리해 보도록 하겠습니다.
토큰은 매번 인증을 거치지 않고도 일정 시간 또는 기간에 유효한 API를 사용할 수 있도록 하는 권한 증명입니다. 토큰은 보안상의 이유로 권한 증명 역할을 하는 엑세스 토큰 (Acccess Token) 그리고 일정기간 동안 인증을 거치지않고 엑세스 토큰을 갱신할 수 있게 해주주는 리프레시 토큰(Refresh token) 두가지가 있는데 대부분 리프레시토큰이 엑세스토큰보다 긴 유효기간을 가지게 됩니다.

카카오 API 토큰의 유효기간은 플랫폼 마다 다릅니다.

또 사용자 환경에 따른 인증방법도 여러가지인데 저희는 javaScript SDK 방식을 골랐습니다

카카오 로그인을 할 때 사용자 계정정보도 가져올 수 있는데
저희는 마이페이지에 들아갈 유저의 이미지로 카카오 프로필 이미지를 연동하기로 하였습니다.
그리고 유저의 아이디(네임)은 이메일주소로 연동하기로 했습니다.
그 외의 것은 저희에게 필요하지 않은 정보라 선택하지 않았습니다.

프로젝트당시 사실 쉽게만 여겼던 계정연동이 맘처럼 잘 되지 않아서 애를 먹었던 기억이 너무 강렬하게 남아있는데 (사실 아직도 오류가 납니다 ㅜㅜ )
저희는 카카오로그인 방식중에서도 팝업방식을 선택했습니다.