안녕하세요 지미짐입니다. 처음으로 인사드립니다 😊 저희 서비스는 카카오톡을 통해 약속 쪽지를 공유할 수 있습니다. 이를 위해서는 카카오 소셜 로그인 구현이 필수였는데요~ 저희가 어떻게 코드를 구현해나갈지를 정리해보았습니다. 많은 관심 부탁드립니다!
카카오 소셜 로그인
- kakao js sdk
- 코드가 간단하고 해당 방법을 사용한 소셜 로그인 예시들이 많은 편
- 토큰 갱신하기 기능을 지원하지 않는다는 단점 존재
- rest api
---> rest api 방법을 사용하여 소셜 로그인을 구현해보기로 결정
(참고) 카카오 메세지의 경우는 kakao js sdk로만 구현 가능 >> index.html에 js sdk script 넣어놓음
REST API가 돌아가는 방식
-
공통 (front, back 中 1)
- 앱 등록 및 로그인 활성화, 사용자 동의 등 기본 플랫폼 세팅
- 카카오 키 세팅
- redirect URI의 경우, front와 back에서 동일하게 맞춰야 한다 (우선, 아래와 같이 등록해놓음)
-
front
- 카카오에게 인가코드를 받아서 back에게 넘긴다
- back에게 코드를 넘길 때는 data가 아닌 쿼리스트링으로 넘겨야한다(GET 방식)
-
back
- front에서 받은 인가코드를 사용해서 kakao에게 api를 날리고, token을 받아온다
- token으로 회원정보를 받아와서 db에 저장한다
- 회원정보 + 받아온 토큰으로 자체적인(?) 토큰을 만들어서 front에 넘겨준다
-
front
- back에서 받은 회원정보와 토큰을 각각 store, sessionStorage에 저장한다
토큰을 프론트에서 받아와서 back에 넘기는 것인지,
토큰을 back에서 받아와 처리 후 front에 넘기는 것인지 예시마다 다른데
- https://data-jj.tistory.com/53 에 따르면 카카오 토큰을 그대로 사용하면 보안상 문제가 존재한다고...?!
- 카카오 토큰에 담긴 유저 정보를 활용해 back에서 프로젝트 전용 토큰으로 새롭게 발급 후 프론트에 넘기는 방식 우선적으로 시도
- 위 방식이 쉽게 잘 풀리지 않는다면, 카카오 토큰을 그대로 사용하는 방식으로!
- 이 경우에는 front에서 토큰까지 받아와서 저장 후에 back에 넘겨줘도 될 듯
장고에서 소셜 로그인 관련 로직 좋은 예시가 있어서 첨부합니다~!