My Record - OAuth2 카카오 도전기! 리팩토링 1편

블로그 만들기 -Oauth2구글에 요청이 자동으로 간다고?

블로그 만들기 -Oauth2구글에 요청이 자동으로 간다고?

 

사용자 요청부터 스프링 시큐리티까지 feat)OAuth2

사용자 요청부터 스프링 시큐리티까지 feat)OAuth2

 

전체적인 흐름이 이해가 안간다면 위 글 들을 대충 보고오면 도움이 된다..

 

 

 

블로그 - OAuth2 카카오 도전기! 리팩토링2

블로그 - OAuth2 카카오 도전기 중 트러플 슈팅

 

 

 

 

사실 예전 프로젝트에서 로그인과 스프링 시큐리티를 맡아 했던 기억이 있다.

한 달의 데드라인이 있는 시간이 촉박한 프로젝트라 jwt와 로그인 부분은 해결했는데,

그 땐 시큐리티에 대해 너무 무지했어서 oauth2를 활용한 로그인이 실패하였다..

 

최근에 스프링 시큐리티에 대해 구글까지 성공한 기념으로 예전 프로젝트를 리팩토링하고자 카카오 대해 도전해본다.

 

 

 

구글의 경우 간단한 dependency 설정으로 좀 더 쉽게 구현이 가능하지만,

카카오나 네이버의 경우 카카오는 provider 값을 따로 줘서 내가 하나씩 잘라 파싱해줬어야 했던 기억이 있다.

차근 차근 진행해보자!

 

 

(카카오 디벨롭에 앱을 등록하고 오면 되는데 다른 앱들 참고!)

 

 

 

 

제일 먼저!

 

 

현재 블로그는 모든 기능들이 api/의 쿼리 스트링을 갖기 때문에 사실 상 그 외의 요청인

anyRequest().permitAll()으로 로그인에 관한 경우 따로 인가가 필요하지 않지만, 명시적으로 (login) 설정하자

 

 

 

 

 

 

카카오 로그인 흐름

 

크게 3단계로 나누어져 있다.

 

 

• 인가 코드 받기
• 토큰 받기
• 사용자 로그인 처리

 

 

 

 

1. 인가 코드 받기

 

 

사실 이 부분은 내가 크게 건들 게 없다. 

 

1. get : /oauth/authorize 요청만 하면, 내가 정해놓은 설정에 따라 사용자가 로그인 이후

2. redirect URI 로(내가 지정한) 302 요청이 오면 Location에서 인가 코드 or 에러를 확인해 

3. code 및 state 전달! (우린 code만 쓸 예정)

 

 

 

예전 프로젝트에서는 여기서 내가 어디까지 구현해야하고, 어디까지 oauth에서 해주고 프론트는 어딜 구현해야 하는지 등,

많은 전략들 중 처음 접해보는 oauth와 프론트와의 처음 협업때문에 엄청 삽질을 했었다..

 

 

 

 

 

 

2.토큰 받기

 

 

 

 

 

redirect URI에 넘어온 **인가 코드**로 토큰 받기를 요청하면

카카오에서 실제 사용자 정보에 접근 가능한 토큰을 내려준다.

 

 

 

 

 

3. 사용자 로그인 처리

 

 

 

카카오가 내려준 액세스 토큰으로 실제 사용자의 정보를 조회 후

그 정보를 가지고  우리 블로그 회원인 지 확인 후 로그인 or 회원가입 절차

 

 

 

이런 흐름이고

 

실제로 내 서비스의 흐름과 코드를 이용해 카카오를 시도해보자!

 

 

(실제 oauth2 관려 필터는 이전 글을 보고 오자)

사용자 요청부터 스프링 시큐리티까지 feat)OAuth2

사용자 요청부터 스프링 시큐리티까지 feat)OAuth2

 

 

 

 

 

 

 

1. 인가 코드 받기 실제

 

 

get : /oauth/authorize 요청

 

 

 

간단한 html로 카카오 인증 서버에 get 요청 보내는 api 호출이고,

요청 시에 내가 추가 해야할 것은 총 3가지를 쿼리 파라미터로 필수적으로 담아야 한다.

 

 

 

 

 

get : /oauth/authorize +

1. response_type &

2.client_id &

3. redirect_uri

 

1의 경우 code값으로 고정시키고,

2 &3의 경우 앱 발급 시 지정해준 client_id와 내가 직접 지정한 redirect_uri를 쓰면 된다.

 

 

 

 

 

실제로

https://kauth.kakao.com/oauth/authorize 에

+ response_type=code&client_id&redirect_uri를 넣어서 요청하게 된다면

response_type=code&client_id="내가 등록한 client_id"&redirect_uri="내가 등록한 redicerUri"

 

내 서버없이 사용가능해서 복붙으로 카카오에게 요청해봄

 

이렇게 동의 항목으로 받아올 수 있고, 

 

 

 

 

동의 후 제출을 누를 시

내가 지정한  redirect_uri로  + code= "인가 코드" 가 오는 것을 알 수 있다!..

 

 

 

 

 

 

2. 내 서버에서 code를 받기

 

카카오에서 내려준 코드를 이용해서 나는 실제 로그인을 시도한 사람의 정보를 요청할 수 있게 되었다.

 

그렇다면 카카오에서 302로 내려준  redirect_uri의 api를 만들어 코드를 저장하자. 

 

 

 

3. code를 이용해 토큰 받기

 

 

 

 

post :/oauth/token로 요청

 

필수 헤더 : Content-Type

필수 body :

• grant_type : authorization_code로 고정
• client_id : 발급해준 client_id
• redirect_uri : 내가 넣은 redirect_uri
• code : 아까 인가코드로 받은 코드

 

이런 정보를 담아서 요청하면 응답으로

 

 

참고로 이러한 정보들이 오지만,

 

우리가 필요한 데이터는 실제 데이터를 불러올 서버에 입장권인 access_token이다.

 

 

 

 

 

4. access_token으로 사용자 정보 받기

 

 

 

아까 발급 받은 access_token을 이용해서

kapi.kakao.com/v2/use/me로 get 요청 시

 

우리가 진정으로 원하는 email 및 닉네임을 가져올 수 있다.

 

내가 지정해놓은 동의 항목들

 

 

 

 

5. 회원 가입 및 회원 조회

 

내 서버에서 할 일이다!

 

액세스 토큰으로 조회한 정보들로

회원 가입이 되어 있다면, 찾아 내 블로그에 로그인 시켜주고,

없다면 회원가입 시켜주면 해결!