내일배움캠프 84일차 TIL

오늘 :

카카오 로그인 Oauth2.0 작업 시 문제 해결 과정

(1) 헤더에 토큰이 포함되어 있고 페이지 리디렉션이 필요한 상황


내일배움캠프 84일차 TIL 1


내일배움캠프 84일차 TIL 2

위 코드를 담고 있는 userController는 @RestController이므로 위의 상태로 돌아가면 두 번째 이미지와 같이 json 값이 클라이언트에 표시된다.

아래와 같이 헤더에 setLocation을 설정하여 리디렉션할 주소를 설정할 수 있습니다.


내일배움캠프 84일차 TIL 3

(2) 쿠키에 저장된 토큰은 정상적인 로그인 시에는 정상적으로 동작하나, 카카오 로그인 시에는 해당 토큰을 빼서 사용할 수 없습니다.

현재 팀 프로젝트 코드에서 일반 로그인 토큰과 관련된 로직은 다음과 같습니다.

1) 로그인 요청 시 서버는 accessToken과 refreshToken을 생성하고 refreshToken은 redis에 저장된다.

2) refreshToken이 쿠키에 직접 삽입되고 accessToken이 헤더의 “Authorization” 키 값으로 전송됩니다.

3) 토큰 저장 후 인덱스 페이지로 이동합니다.

4) 클라이언트로부터 로그인 응답으로 받은 권한은 쿠키에 저장되었다가 요청 전송 시 헤더로 전송됩니다.

위의 카카오 로그인의 경우와 달리

1) 클라이언트에서 카카오 로그인 버튼을 누르면 카카오 로그인 페이지로 이동합니다.

2) 사용자가 코코아 사이트 로그인 페이지에서 로그인 버튼을 클릭하면 my cocoa api 인증 코드를 통해 코코아 사이트에서 데이터를 요청합니다.

3) 요청한 결과(cocoa ID, 이메일, 로그인 닉네임)는 설정한 포워딩 주소로 전송됩니다.

4) 리디렉션으로 입력된 사용자 정보를 처리한 후 로그인 시 페이지 리디렉션과 함께 토큰이 전송됩니다.

이 로직을 사용하기 때문에 일반 로그인과 달리 로그인 시 로그인 페이지를 다시 가져오지 않고 서버 페이지를 바로 인덱스 페이지로 넘기기 때문에 로그인 페이지에서 엑세스 토큰을 얻어서 저장할 수 없다.

쿠키 .

그래서 새로고침 토큰과 엑세스 토큰을 모두 쿠키에 넣는 방식으로 구현하기로 했습니다.


내일배움캠프 84일차 TIL 4
카카오 로그인 시 쿠키에서 엑세스 토큰을 조회할 수 없는 상황

카카오 로그인 시 쿠키에 토큰을 삽입하여 인덱스 페이지로 리다이렉션 시 쿠키에 있는 인증 토큰 값이 인증에 제대로 입력되지 않고 쿠키에 남아있는 문제가 있었습니다.

물론 인증작업이 불가능하여 기능이 동작하지 않습니다.

아래와 같이 엑세스 토큰이 인증에 들어가야 하는데 같은 토큰 추출 기능을 사용해도 작동이 되지 않았습니다.


내일배움캠프 84일차 TIL 5
정상적인 로그인으로 정상 작동 상태

이것 때문에 한참을 헤맸는데 문제의 원인은 정상 로그인시 수신측에서 받아 헤더에 삽입되는 인증쿠키 설정과 저장된 Cookies에 저장되는 인증쿠키 설정이 문제인것 같습니다.

카카오 로그인 시 서버에서 보내는 것과 다릅니다.

(이유는 알 수 없었지만 일반 로그인의 인증 토큰 속성과 매칭하여 해결했습니다.

)


내일배움캠프 84일차 TIL 6
로그인 페이지에서 일반 로그인 시 쿠키에 저장되는 토큰 값의 형식