카카오 로그인 추가
일전에 Google, Naver Rest API를 이용한 로그인 연동을 구현했었다.
여기에 추가적으로 카카오 연동 로그인을 추가해보려고 한다.
카카오 API 어플리캐이션 등록
우선 카카오 개발자 사이트에 로그인을 해야한다.
그리고 네이버에서 했던 것과 비슷한 구조로 어플리캐이션 등록을 해야한다.
우선 내 어플리캐이션을 먼저 등록하자.
플렛폼 메뉴에 가서 서비스 유형을 등록해야 한다.
이때 사이트 도메인을 설정을 해야 한다.
나는 로컬 테스트용 도메인과 EC2서버의 도메인을 각각 등록했다.
개행을 기준으로 URL을 구분하며, 최대 10개까지 지원하고 있다.
제일 처음 로그인 관련 설정을 활성화 해야한다.
그리고 아래에 있는 RedirectURI 정보를 기입하자.
그 다음 동의항목으로 이동해서 로그인시 제공되는 항목을 설정해야 한다.
기존 타 API와 유사항목 3가지를 찾아서 체크하자.(이름 대신 닉네임을 사용)
application-oauth 작성
이제 앱키가 발급되었을 것이다.
REST API키를 복사한 다음 application-oauth.properties에서 카카오에 대한 정보를 작성하면서 복사한 키를 기입하자.
항목을 보면 Naver와 거의 같다.
다만 카카오는 client-secret이 선택옵션이라 이번에는 사용하지 않아서 설정을 하지 않았다.
스프링 시큐리티 설정 등록
기존에 연동정보를 전달하는 Dto에서 카카오에 대한 내용을 추가해야 한다.
OAuthAttributes를 생성할때 registrationId 를 비교하는 로직을 추가하자.
그리고 카카오 Dto를 생성하는 정적 메소드를 추가해야 한다.
다소 조심해야 할 부분은 카카오에서 제공하는 api JSON 구조가 다르기 때문에 이 부분을 잘 확인하고 적절하게 사용해야 한다.
내가 사용해야할 값에 대한 키값은 attributes > kakao_account > profile
이렇게 3레벨로 구성되어 있었다.
화면 버튼 추가
이제 index.mustache에서 카카오 로그인 버튼을 추가해야 한다.
추가된 화면의 모습
실행결과
로그인을 시도해 보자.
로그인창이 나왔고 로그인 처리를 하니 정상적으로 로그인이 되었다.
EC2서버에 배포하기
이제 완성된 인프라안에서 무중단 배포를 하자.
작업 순서로는
1. EC2 서버에서 application-oauth.properties에 카카오 연동 정보 추가.
2. 로컬에서 작업한 백앤드& 프론트앤드 소스 GitHub에 commit& push 후 PR.
로 진행할 것이다.
EC2서버 작업을 먼저 하는 이유는 Git에서 반영을 하면 무중단 배포 설정이 자동으로 실행되기 때문에 빌드 이전에 설정을 미리 해야 한다.
EC2 application-oauth 수정
우선 EC2 서버로 접속해서 properties를 수정하자.
vim ~/app/application-oauth.properties
그리고 로컬에서 작성했던 oauth 설정을 추가해주자.
:wq로 저장하고 나온다.
GitHub 반영
그리고 이제 GitHub에서 수정한 소스를 반영해야 한다.
이제 Travic CI에서 hook이 걸리면서 빌드 및 배포가 시작 될 것이다.
잠시 후 다시 확인해 보니
정상적으로 배포가 진행되었다.
실행결과
이제 반영 결과를 확인해야 한다.
EC2 도메인에 접근해보자.
카카오 로그인 버튼이 정상적으로 추가되었다.
로그인을 시도해 보자.
로그인에 성공했다.
마무리
일전에 네이버에서 했던 기억을 토대로 큰 무리없이 카카오 로그인 추가를 구현하였다.
덤으로 무중단 배포도 이상없이 수행되는 것을 다시 한번 확인 할 수 있었다.
이런식으로 기능을 잘 분리하여 반영함으로써 확장성있고 개발시간을 단축할 수 있어서 생산성을 확보가 가능해짐을 직접 체감할 수 있었다.
한가지 아쉬운점이라면 국내 소셜 로그인 연동은 스프링시큐리티를 정식으로 지원하지 않는 것 같다. 구글 같이 간편하게 추가할 순 없지만 그렇다고 크게 장애가 되는 수준은 아니기 때문에 별다른 버전업을 하지 않고 현행 유지를 하는 것 같기도 하다.
