[백엔드&프론트엔드] 카카오 로그인 기능 구현

Choidaehankr commented 2 years ago

이슈 내용

출처: https://data-jj.tistory.com/53

현재 6번의 사용자 정보(닉네임, 이메일 등) 조회까지 구현 했고, '우리 서버 전용 토큰 발행'은 진행 중입니다.

아래는 제가 임의로 만든 로그인 화면입니다.

요구사항

앞으로 로그인 기능 구현하시면서 궁금한 점이나 문제점들 여기에 공유하시면 좋을 것 같습니다.

참고사항

seaworld0125 commented 2 years ago

JWT를 다룰 때 프론트에서 참고하시면 좋을 내용 같습니다.

yoona-J commented 2 years ago

안녕하세요, 혹시 지금 카카오 로그인 관련한 코드가 깃허브에 올라와 있는 상태인가요? 깃헙 코드 아래에 첨부해주시면 감사할 거 같습니다.

또한, 데이터가 어떤 방식으로 현재 들어오고 있는지에 대한 console 내용을 같이 첨부해주시면 좋을 거 같습니다.

감사합니다~

@Choidaehankr @seaworld0125

Choidaehankr commented 2 years ago

카카오 로그인 API 요청에 대한 응답이 어떤지 여쭤보신게 맞을까요? 우선 최초 로그인 요청 성공 시 받게되는 Response Body는 다음과 같습니다. 자세한 이해가 필요하시다면 KAKAO develop 사이트에서 로그인 관련 안내를 확인해보심이 좋으실 것 같습니다.

[ 관련 코드 // java/com/hoppy/app/kakaoLogin/service/kakaoApi.java ]

[GetAccessToken] response body

{ "access_token":"{$ACCESS_TOKEN}", "token_type":"bearer", "refresh_token" : "{$REFRESH_TOKEN}", "expires_in":21599, "scope":"account_email profile_image profile_nickname", "refresh_token_expires_in":5183999 }

[ 관련 코드 // java/com/hoppy/app/kakaoLogin/controller/LoginController.java - kakaoApi.java에서 getUserInfo(), getAccessToken()를 호출 ]

얻어온 사용자 정보와 access_token

user profile {nickname=최대한, email=mnnm22@naver.com}
access_token {$ACCESS_TOKEN}

Choidaehankr commented 2 years ago

전체 코드는 브랜치 ‘feature/backend-Login’ 확인 바랍니다.

-추가

REST API 키: 추후 공지 Redirect URI: http://localhost:8000/oauth/login

backend/src/main/resources/static/img/kakao_login_medium_narrow.png : 카카오 로그인 버튼

backend/src/main/resources/templates/index.html: 기본 화면 구성 (로그인 버튼에 주소 href 확인 바랍니다.)

backend/src/main/java/com/hobby/app/kakaoLogin/controller/LoginController.java

15번째 줄 KaKaoApi kakao; 선언
이후 kakao로 KaKaoApi의 메소드들 호출해서 필요한 정보들 얻어옵니다. (kakao.getUserInfo() 등)

더 필요하신 내용 있으면 언제든 말씀해주세요!

yoona-J commented 2 years ago

안녕하세요 대한님. 카카오 로그인 관련하여 여쭤볼 부분이 있어 댓글 남깁니다.

올려주신 해당 코드 확인해보니, 인가 코드 관련된 부분은 모두 java 파일 내에서 처리 되는 것으로 보여집니다. 해당 프론트 관련 부분은 html 화면 정도인 듯 한데요,,,

제가 찾아본 바로는 카카오 로그인 기능의 경우에는 1. 프론트엔드로만 카카오 로그인을 구현하는 방법과 2. 프론트와 백엔드로 카카오 로그인을 하는 경우가 있는 거 같더라고요. 참고 주소: https://han-py.tistory.com/417

그래서 2번의 경우에는 OAuth 부분과 만들어주신 html 부분만 구현하면 되는 거 같은데, 제가 이해한 부분이 맞는지 확인 부탁드립니다!!

답변 부탁드립니다, 감사합니다 ㅎㅎ

seaworld0125 commented 2 years ago

@yoona-J @Choidaehankr

안녕하세요, 윤님이 말씀하신 내용이 맞습니다.

로그인 담당은 아니지만 의견 남깁니다.

프론트 측에서 다음과 같이 진행되면 좋을 것 같습니다.

카카오 로그인을 진행한다.
인가코드를 얻어온다.
백엔드에 인가코드를 전송한다. ( + 이 과정은 자동으로 이루어집니다 )
반환되는 Access token을 local storage 또는 cookie에 저장한다.
이후 사이트 이용 시 모든 Request 헤더에 Access token을 함께 전송한다.

백엔드 측에서는 다음과 같이 진행되면 좋을 것 같습니다. (현재 백엔드도 1~2 과정은 이미 구현된 걸로 알고있습니다)

인가코드를 받아온다.
카카오에 인가코드와 Redirect URL을 통해 Access token, Refresh token을 받아오고 DB에 저장한다.
Hoppy 자체 Access token과 Refresh token을 발급하고 프론트 측에 반환한다.
이후 모든 요청에서 Access token, Refresh token의 유효성을 검증한다.

백엔드와 프론트 간에 Access token을 헤더에 어떤 형태로 담아서 보낼지도 의논해야 하는데요, 보통 Authorization: Bearer :JWT 형식으로 보내기 때문에 추후 구현할 때도 이렇게 진행하시면 좋을 것 같습니다.

또한 Hoppy 자체 Access token을 이용하다가 토큰이 만료되었을 경우 어떻게 재발급을 진행할지에 대한 전략 설정이 필요할 것 같습니다만,

개인적인 의견으로는 카카오 Access token이 6시간이라는 유효 시간을 가지는데, 6시간은 꽤 긴 시간이라고 생각합니다. 따라서 6시간 이후에 토큰이 만료되면 바로 로그아웃 절차를 진행하는 것이 간편하고 좋을 것 같습니다.

Hoppy-project / mono-repo