[React+DRF]카카오 로그인 구현

kyliecamila·2022년 8월 8일
1

React

목록 보기
2/2

구현하기까지 너무나 많은 시행착오와 삽질과..
아무튼 고난을 끝냈으니 어디에서 문제가 있었는지 등등을 정리해보고자 한다.
(일단 중요한것만 하고 나중에 한번 전체적으로 다듬을 예정이다)

위 사진에서 서비스클라이언트=React, 서비스서버=DRF이다.
Kakao Auth Server는 카카오 서버(내가 만든 서버가 아니다)

전반적인 과정에 대해 알고 싶다면 카카오 developers페이지를 참조해보자.
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#before-you-begin

카카오 로그인 요청

프런트엔드에서 백엔드로 요청을 보낸다.

나는 Auth.js에서(위사진) 카카오톡으로 계속하기 버튼을 누르면 카카오로그인 페이지가 뜨도록 href를 연결해 놓았다.
(href가 실제로 작동하도록 하기 위해서는 1단계까지 마무리해야한다. 지금은 카카오로그인페이지가 당연히 안열린다..!)

1단계 - 인가코드 받기

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-code

href 과정은는 다음 블로그를 많이 참고했다.
https://data-jj.tistory.com/53

oAuth.js를 만들어서 거기에 REST_API_KEY,REDIRECT_URL,KAKAO_AUTH_URL을 저장해 놓았다.
이때 KAKAO_AUTH_URL = https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code이다
(카카오 디벨로퍼즈 요청 sample참조)
참고로 REST_API는 내애플리케이션>{해당프로젝트}>앱설정>요약정보에 있다.
REDIRECT_URL은 카카오로그인을 한 후 리다이렉트될 페이지를 뜻한다. 즉 프런트엔드(리액트) 페이지 중에 골라야한다.
나는 REDIRECT_URL로 http://localhost:3000/InfoCollect로 해두었다. (이후 인가코드를 받아올 페이지이다.)

이때 내애플리케이션>제품설정>카카오로그인의 맨 하단의 Redirect Url에도 위와 똑같은 http://localhost:3000/InfoCollect를 저장해두어야한다.

설정이 끝나고 아까 만든 Auth페이지에서 버튼을 클릭하면 다음과 같이 카카오 로그인 창으로 리다이렉트 될것이다!

로그인하고 나면 아까 설정해두었던 REDIRECT_URL로 가질것이다.
이와 함께 인가코드가 올것인데 어디에 있나면..

REDIRECT_URL로 설정해둔 url뒤에 쿼리스트링으로 인가코드가 있는것을 알 수 있다.(이 인가코드는 요청할때마다 바뀌는 값이다.)

1.5단계

인가코드를 받아오기는 했는데 이건 지금 프런트단에 있다.
하지만 인가코드는 어디에 쓰이는지 생각해보면 백엔드가 카카오 서버에게 인가코드를 보내고 카카오서버로부터 토큰을 받아올때 사용된다..

즉 프런트단에 있는 인가코드를 백엔드로 넘겨줘야한다는 뜻...

프런트단 url에 있는 인가코드를 변수에 저장해서 백엔드로 넘겨보자!

인가코드 저장

아까 나는 REDIRECT_URL로 http://localhost:3000/InfoCollect로 해두었다. 이때 컴포넌트가 불려진다.
여기서 다음 코드와 같이 인가코드를 받아서 저장하고 KakaoLogin이라는 컴포넌트로 넘겨주었다.

백엔드로 인가코드 넘기기

Callback컴포넌트로 부터 받은 인가코드를 이용해서 백엔드에 GET요청을 할것이다.
이유는 인가코드를 백엔드로 넘기기 위해서는 url에 쿼리스트링으로 넘겨야한다고 한다.
(출처는 https://velog.io/@isabel_noh/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-REST-API 왜 인지는 나도 찾아봐야한다..)
http://{서버주소}?code=${code} 형식으로 넘기라고 하니(출처: https://data-jj.tistory.com/53)
나는 http://localhost:8000/api/oauth/kakao/login?code=${CODE}를 axios를 이용해서 get으로 처리했다.
(axios과정에서 두번호출되고 400에러 500에러 등등 문제가 많았었다. 내가 프런트엔드는 잘 몰라서..)

이때 django 서버를 확인하면 GET요청이 보내졌을것이다.
장고 views에서 GET요청에 포함되어있는 인가코드를 다음과 같이 분리 저장해야한다.

이렇게 해서 백엔드에 인가코드가 전달/저장 되었다!

이 과정이 자세히 나와있는 문서가 별로 없어서 더 헤멨던것 같다.

2단계 토큰 받기

백엔드에 인가코드가 있으니 남은 작업은 한결 쉬울것이다.
https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id={KAKAO_REST_API_KEY}&redirect_uri={KAKAO_REDIRECT_URI}&code={CODE}
CODE는 인가코드, KAKAO_REST_API_KEY는 미리 앱에서 받아놓았던 위의 REST_API_KEY와 같은 값이다.
KAKAO_REDIRECT_URI는 아까 설정해둔 REDIRECT_URL과 같은!! urldl여야한다!!(중요!! 여기서 많이 헤멨다.)
KOE303 에러의 원인이기도 하다.

설명에서는 인가코드를 요청할때 url과 같은 url을 쓰라는데
아까 인가코드 요청코드는
KAKAO_AUTH_URL = https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code이고
여기서 REDIRECT_URL은 http://localhost:3000/InfoCollect이니,
KAKAO_REDIRECT_URI도 http://localhost:3000/InfoCollect로 설정해야한다.

여기까지하면 카카오로그인 버튼 누르고 카카오 로그인후 토큰까지 받을 수 있다.

이후 과정은 나중에 이어서..

[참고자료]
https://data-jj.tistory.com/53
https://velog.io/@isabel_noh/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-REST-API

0개의 댓글