[CocaVoca] 개발일지 #2 - 카카오 REST API 로그인 기능 - 인가 코드 받기

 

 

 

 

카카오 로그인 방식

1. 인가 코드 받기

1. 서비스 서버가 카카오 인증 서버로 인가 코드 받기 요청

2. 카카오 인증 서버가 사용자에게 카카오계정 로그인을 통한 인증 요청

- 클라이언트에 유효한 카카오계정 세션이 있거나, 카카오톡 인앱 브라우저에서 요청한 경우 4단계로 넘어감

3. 사용자가 카카오 계정으로 로그인

4. 카카오 인증 서버가 사용자에게 동의 화면 출력하여 인가를 위한 사용자 동의 요청

- 동의 화면은 서비스 애플리케이션의 동의 항목 설정에 따라 구성

5. 사용자가 필수 동의 항목, 이 외 원하는 동의 항목에 동의한 뒤 [동의하고 계속하기] 버튼 누름

6. 카카오 인증 서버는 서비스 서버의 Redirect URI로 인가 코드 전달

 

2. 토큰 받기

1. 서비스 서버가 Redirect URI로 전달받은 인가 코드로 토큰 받기 요청

2. 카카오 인증 서버가 토큰을 발급해 서비스 서버에 전달

 

3. 사용자 로그인 처리

- 서비스 서버가 발급받은 액세스 토큰으로 사용자 정보 가져오기를 요청해 사용자의 회원번호 및 정보를 조회하여 서비스 회원인지 확인

- 서비스 회원 정보 확인 결과에 따라 서비스 로그인 또는 회원 가입 과정을 진행

- 이 외 서비스에서 필요한 로그인 절차를 수행한 후, 카카오 로그인한 사용자의 서비스 로그인 처리를 완료

 

 

 

OAuth(유저의 로그인 사용 권한 대여)

 

 

 

---

 

우선 나의 개발 환경은 react + ts + node.js + mysql이고,

카카오 공식 문서에 나온 순서대로 인가 코드 받기의 6번까지는 완성했다.

설명은 자세히 나와있는데 참고 링크를 클릭해 다른 항목으로 왔다갔다하면서 보니

정신이 없어서 블로그 글도 같이 참고하면서 봤다.

 

 

중간에 restapi와 redirect uri를 .env 파일에 넣는데 환경 변수 쓰는 법을 틀려서 한 시간 가까이 헤맸다..^^

개발하다 보면 오타나 문법 실수 같은 자잘한 실수 때문에 에러가 많이 발생하는 것 같다.

 

 

 

Don't Do This

REACT_APP_CLIENT_ID = "발급받은 REST API KEY";
REACT_APP_REDIRECT_URI = "http://localhost:3000/auth/kakao/callback";

 

 

따옴표(""), 쉼표(,), 세미콜론(;)등의 문자열 넣지 말기

 

넣지 말라는 거 다 넣었습니다. 예.

 

 

Do This

REACT_APP_CLIENT_ID = 발급받은 REST API KEY
REACT_APP_REDIRECT_URI = http://localhost:3000/auth/kakao/callback

 

 

 

프로젝트 구조

 

.env 파일에는 유출되면 안 되는 api key를 넣는다.

.gitignore 의 dependecies 구간에 .env를 추가해서 git에 업로드되지 않도록 설정하는 것도 필수! 

 

# dependencies
.env
/node_modules
/.pnp
.pnp.js

 

 

 

 

메인

 

 

카카오 로그인

로그인 완료

 

 

그래서 인가코드까지는 발급을 했는데, 역시나 서버와 데이터베이스가 구축이 안 되어있고 백엔드로 토큰을 받을 수가 없었다.

무엇보다도 node 강의도 제대로 안 듣고 무작정 시작하기도 했고.. 일단 데이터베이스를 먼저 구축하고 프론트 - 서버를 병렬로

진행하는 게 맞는 듯하다. 이번주 내로 카카오 로그인 + 일반 회원가입 기능을 완성하는 게 목표다.