[개발일기] 카카오 로그인 구현 - Token 발급 (React with Golang)

프로젝트에서 회원 가입에 대한 절차를 줄이기 위하여 OAuth를 활용한 소셜 로그인을 선택하였습니다.

아래의 내용은 소셜 로그인에 대한 과정을 이해하고 구현하는데 어떠한 문제를 겪었고 어떠한 시도를 하였는지 기록하였습니다.

최종 결과물은 Token 발급까지 진행된 상황이고 사용자 정보를 받아오는 과정은 추가적으로 작업하여 기록하도록 하겠습니다.

목차

카카오 로그인 과정

이해하지 못하였던 점

이해를 위한 시도

---

카카오 로그인 과정

카카오 Document에 나와있는 로그인 과정입니다.

---

이해하지 못하였던 점

1. Service Client에서 Service Server로 카카오 로그인 요청을 하였는데 Kakao Auth Server에서 Service Client로 로그인 요청을 하는 과정
2. 동의 화면 출력 방법

---

이해를 위한 시도

1. 커리어리 카카오 로그인 과정 분석
2. 검색을 통한 다른 사람들의 작업 기록 확인
3. Document의 Sample code 확인

---

커리어리 카카오 로그인 과정 분석

커리어리가 사용하고 있는 카카오 로그인 기능을 사용해 보고 어떠한 순서로 작동되는가 확인

1. 카카오 로그인 버튼을 누르면 kauth.kakao.com으로 이동하여 정보 활용에 대한 동의를 받는 것을 확인
2. 1번 과정이 카카오 로그인 과정 사진의 '인가 코드 받기' 과정의 4번 5번 과정으로 이해

해결하지 못한 문제

1. Service Server로 카카오 로그인 요청하는 과정
2. GET /oauth/authorize 과정

---

검색을 통한 다른 사람들의 작업 기록 확인

설정 방법에 대한 블로그 글을 참고하기 위하여 검색

한 사이트에서 아래와 유사한 과정으로 설명

결과

해당 방식으로 구현을 하여 token 획득 성공

문제점 : 2번의 Redirect를 받아줄 페이지가 필요 -> 해당 페이지에서 AUTHORIZE_CODE를 전달하기 위한 useEffect(axios 통신) 사용

---

Document의 Sample code 확인

참고 사이트 주소
https://devtalk.kakao.com/t/rest-api-node-js/119865

결과

위의 코드를 분석하여 공식 사이트에서 제공하는 '카카오 로그인 과정'과 유사한 처리 과정으로 구현 성공

 

설정 및 flow chart
Front : localhost:3000
Back : localhost:8080

 

사이트 도메인과 Redirect URL 설정

 

과정

1. Front에서 Back의 URL(kakao 로그인 요청을 보내는 Router)로 이동
2. Back에서 https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}로 redirect
3. AUTHORIZE_CODE와 함께 설정해 둔 Redirect URL로 이동
4. Back에서 AUTHORIZE_CODE을 https://kauth.kakao.com/oauth/token로 전달
5. Back으로 Token 전달
6. Back에서 Front로 redirect

---

결과