카카오 소셜 로그인 구현 방향

안녕하세요 지미짐입니다. 처음으로 인사드립니다 😊 저희 서비스는 카카오톡을 통해 약속 쪽지를 공유할 수 있습니다. 이를 위해서는 카카오 소셜 로그인 구현이 필수였는데요~ 저희가 어떻게 코드를 구현해나갈지를 정리해보았습니다. 많은 관심 부탁드립니다!

카카오 소셜 로그인

1. kakao js sdk
   • 코드가 간단하고 해당 방법을 사용한 소셜 로그인 예시들이 많은 편
   • 토큰 갱신하기 기능을 지원하지 않는다는 단점 존재
2. rest api
   • 토큰과 관련한 모든 기능을 지원

---> rest api 방법을 사용하여 소셜 로그인을 구현해보기로 결정

(참고) 카카오 메세지의 경우는 kakao js sdk로만 구현 가능 >> index.html에 js sdk script 넣어놓음

REST API가 돌아가는 방식

• 공통 (front, back 中 1)

  • 앱 등록 및 로그인 활성화, 사용자 동의 등 기본 플랫폼 세팅
  • 카카오 키 세팅
  • redirect URI의 경우, front와 back에서 동일하게 맞춰야 한다 (우선, 아래와 같이 등록해놓음)
    • http://localhost:8080/oauth/kakao/callback
    • https://k5a202.p.ssafy.io/api/v1/oauth/kakao/callback

• 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에 넘겨줘도 될 듯

장고에서 소셜 로그인 관련 로직 좋은 예시가 있어서 첨부합니다~!

• django social login