[WE SOPT APPJAM 개발 아티클] Firebase Auth - Kakao Login (1)

나는 현재 대학생 IT벤처창업 동아리 SOPT에서 3주 장기 해커톤인 Appjam(앱잼)에 참여하고 있다. 내가 속한 팀 HAVIT(해빗)에서는, 사용자가 기억하고 싶은 콘텐츠를 카테고리별로 아카이빙 할 수 있는 앱을 개발하고 있다. 사용자의 쉬운 사용과 보안 향상을 위해 최초 기획 단계에서는 소셜 로그인 구현을 계획했으나, 시간적 제한으로 인해 후순위로 미뤄 두었다. 당장 구현하지는 않지만, 내가 담당했던 기능이기도 했고 릴리즈까지 염두에 두고 있기에 소셜 로그인에 대해 공부한 내용에 대해 정리 해 보고자 한다.

HAVIT 로고

 

사실 SOPT에 들어오기 전에도, Passport.js라는 라이브러리를 활용해서 페이스북과 구글 소셜 로그인을 구현해 본 적이 있었다. 하지만 이번 프로젝트에서는 서버를 FIrebase 환경에서 구현했기 때문에 Firebase에서 자체적으로 제공하는 Authentication 기능을 활용하기로 했다. 하지만 문제가 있었는데, 카카오가 한국에서만 주로 사용되는 서비스이기 때문에, Firebase에서 공식적으로 지원하는 소셜 프로필 목록에는 속하지 않는다는 점이었다. 이 때문에 Firebase에서 제공하는 Custom API를 수정해 사용해야 했다.

Firebase Auth에서 공식적으로 제공하는 소셜 프로필에 카카오가 존재하지 않는 것을 확인할 수 있다.

 

공식 지원은 되지 않지만, 한국의 많은 개발자들이 카카오 로그인을 사용하기 때문인지, Firebase Custom Auth에 카카오 API를 적용한 코드를 Github에서 발견할 수 있었다. 이 샘플 코드에서는 app.js라는 한 파일이 서버를 열고 인증을 수행하는 모든 기능을 담당하고 있었다. 우리 프로젝트에 이 코드를 적용하기 위해, 코드를 분석하고 다른 블로그들을 찾아보며 우리 프로젝트에 적용하기 위한 방법을 모색했다.

Github의 카카오 프로필을 이용한 Firebase Custom Auth 예시 코드

 

일반적으로 Firebase Auth를 사용하지 않는 경우, 클라이언트와 서버는 카카오에서 발급 한 토큰 하나로 통신하고, 이 토큰을 DB에 저장해 사용자를 인식한다. 하지만 우리 서비스의 경우 추가적으로 Firebase를 거쳐야 했기 때문에, 토큰으로 인한 인증이 2회로 늘어나(카카오로부터 토큰 인증 1회, 파이어베이스로부터 토큰 인증 1회) 로직이 꽤나 복잡해졌다. 대략적인 로직을 정리 해 보자면, 아래와 같다.

1. 클라이언트가 카카오 서버로부터 받아온 Access Token을 서버에 전송한다.
2. 서버가 카카오 서버에 Access Token을 보내고, 사용자 정보를 받아온다.
3. 받아온 사용자 정보로 Firebase Auth 사용자 정보를 만들거나 확인한다.
4. Firebase Auth의 사용자 정보로 서버에서 Firebase Custom Token을 만들고, 이를 클라이언트에게 반환한다.
5. 클라이언트에서 Firebase Custom Token을 Firebase Auth로 보내서 로그인한다.

 

샘플 코드를 보면서 조금 더 풀어서 설명 해 보겠다.

 

requestMe 함수

requestMe 함수는 클라이언트로부터 전송받은 Access Token을 HTTP GET 방식으로 상단에서 지정 한 requestMeUrl로 전송하고, 해당 사용자의 정보를 json 형태로 받아온다. 

 

createFirebaseToken 함수

createFirebaseToken은 requestMe를 통해 받은 사용자 데이터를 파싱하고, 그 데이터를 updateOrCreateUser 함수의 인자로 전달한다.

 

updateOrCreateUser 함수

updateOrCreateUser는 카카오 사용자 정보를 인자로 전달받고, 최초에는 사용자가 이미 존재한다고 가정하고 받아온 정보를 활용해 Custom Token을 만들고, updateUser 함수를 호출한다. 만약 여기서 'user-not-found' 에러가 발생한다면, 사용자가 존재하지 않는 것이므로, Custom Token을 인자로 해 createUser 함수를 호출한다.

 

코드 자체도 꽤 직관적이었고, 참고 한 다른 블로그에서도 로직을 간결하게 설명해 준 덕분에 전체적인 흐름을 잘 이해할 수 있었다. 다만 클라이언트에서 Access Token을 전달 해 줘야 코드를 본격적으로 실행할 수 있기에 그 점이 아쉽기도 했다. 우선 핵심 기능을 잘 마무리 한 이후, 릴리즈 단계에서는 꼭 소셜 로그인 기능을 직접 구현하고, 다른 소셜 프로필까지도 추가 해 유저를 관리하는 서비스를 완성하고 싶다.