오늘은 프로젝트 진행 과정중 카카오 소셜로그인을 구현해 적용한 것을 알아보도록 하자.
우선 프로젝트에 카카오 소셜로그인을 구현하기 위해선 카카오 api키를 발급 받아야 한다.
https://developers.kakao.com/console
위의 사이트에서 앱 등록 후 api키를 발급받게 되는데 발급받은 api키는 카카오 로그인 창을 띄울때나 인가코드, 토큰을 발급받고 카카오 서버에 보내는데 사용된다.
또한 redirect_uri을 입력하게 되는데 인카코드를 받고 토큰을 받을 url을 지정하는것이다.
소셜로그인을 하는 흐름을 잠깐 설명하자면 다음과 같다
인가 코드 받기
발급 받은 api와 지정한 redirect_uri를 이용해 카카오 로그인 창을 띄우는
kauth.kakaocom/oauth/authorize?client_id=${발급받받은 api 키}&redirect_uri={}&response_type=code 와 같은 uri을 완성한다.
client_id, redirect_uri, response_type 값들을 순서대로 입력하는 것으로 response_type은 카카오 서버에서 받은 인가코드를 나타낸다.
본인은 프론트앤드에서 버튼을 생성해 을 사용해 ${}엔 https 와 함께 입력후 버튼을 클릭하면 카카오 로그인 화면으로 넘어가도록 설정하였다.
발급받은 인가코드로 엑세스토큰 요청하기
위의 설정을 마치고 카카오 로그인을 정상적으로 완료하면 지정한 redirect_url로 카카오 서버에서 인가코드를 받게된다.
본인은 스프링부트를 사용해서 프로젝트를 진행하고 있어 Controller에서 api로 지정한 redirect_url을 설정하고 매개변수로 받고 있다.
위와 같이 지정했던 redirect_url을 api로 구현해준다.
여기까지 완료하면 로그인 버튼을 클릭 후 로그인을 성공하고 받은 인가코드를 구현한 api에서 다룰 수 있다.
code라는 변수에 인가 코드가 담겨있는데 이 코드를 다시 카카오 서버에 보내 토큰을 발급받는다.
인가 코드를 카카오 서버가 지정한 요청 url에 지정한 형식으로 보내주면 토큰을 발급 받을 수 있다 방법은 스프링부트에선 Resttemplate을 사용한다.
위의 코드와 같이 발급받은 인카코드를 보낼 url과 header, body 를 지정해준다.
카카오는 https://kauth.kakao.com/oauth/token와 같은 url에 서 데이터를 보내고 받을 수 있고 보낼 정보로는 grant_type, client_id, redirect_url, code 가 있다.
grant_type는 "authorization_code"를 넣어주고 client_id는 발급받은 api, redirect_url는 지정했던 url, code는 발급받은 인가코드를 넣어주면 된다.
앞서 설정한 값대로 restTemplate.exchange를 이용해 카카오 서버에보내주는 코드를 완성한다면 response로 엑세스 토큰을 발급 받을 수 있다.
발급 받은 토큰을 사용해 카카오 사용자 정보 요청
마지막으로 발급받은 토큰을 이용해 토큰을 발급받은 방법과 같이 카카오 서버에 사용자 정보를 요청한다.
토큰을 보내 사용자 정보를 받는 카카오 서버 url은
https://kapi.kakao.com/v2/user/me 과 같고 이러한 url 에 위의 코드에서 볼수 있듯이 header 값을 설정하고 요청을 보낸다.
headers.add("Authorization", "Bearer " + accessToken);
와 같은 형태로 발급 받은 토큰을 Authorization라는 이름으로 Bearer과 함꼐 붙여 보낸다.
위의 과정들을 모두 성공하면 카카오앱에서 설정했던 불러올 사용자 데이터를 받을 수 있다.
본 프로젝트에서 가져온 사용자 데이터는 id와 nickname, email 값이다.
가져온 id와 nickname, email 값을 데이터베이스에 저장해 회원가입을 진행하고 클라이언트에 jwt 토큰을 발급해주는 과정을 통해서 로그인을 구현하였다.
큰 흐름인 인가코드 받기, 발급받은 인카코드로 토큰 발급하기, 발급받은 토큰으로 사용자 정보 요청하기 를 이해하면 구현하는데 도움이 될것같다.
본 프로젝트에선 spring boot를 이용해 구현했기 때문에 spring boot에서 제공하는 라이브러리인 Resttemplate을 사용했는데 다른 환경에서 소셜로그인을 구현할때 어떤 방법으로 해야하는지 추후에 알아보도록 해야겠다.
