카카오 소셜로그인

카카오 소셜 로그인 로직을 구현했다.

찾아보면서 로직이 궁금했는데 잘 찾아보기 힘들어서 로직도 첨부할 예정입니다.

방식은 프론트에서 카카오 인가 코드를 받아온후
백엔드에 넘겨주면 백엔드에서 카카오 서버와 통신해
토큰을 발급받고 그 토큰을 가지고 자체사이트 토큰을 재발급해 프론트에 넘겨주는 방식이다.

카카오 개발자 사이트에 들어가서 내 사이트 등록을하면

앱 키가 발행된다.

REST API키를 사용했다.

후에는

카카오 로그인 페이지로 들어가서 카카오 로그인을 활성화 해줘야한다.

그리고 리다이렉트 URI를 임의로 설정해주면 된다.

배포하지 않았기 때문에 로컬 호스트로 설정해주었다.

리다이렉트 URI는 카카오 인가코드를 받는 주소라고 생각하면 편하다.

일단 로그인페이지 UI를 구성해줍니다.

onClick에는 경로 이동을 위해 window.location.href = KAKAO_AUTH_URL 을 설정해준다.

보안을 위해 env를 사용했다.

REST_API_KEY에는 4개의 앱키 중 RAST_API키를 선언해주면된다.
SERVER_API에는 통신할 백엔드 서버의 IP와 엔드포인트를 입력하면된다.

라우터는 위와같이 설정해주면된다.

kakaologin페이지에서 코드를받아오고 카카오 서버와 통신할거기때문에 따로 설정해주면 된다.

useLocation을 사용해 코드를 따오고 그 코드를 CODE에 저장한다.

후에 우리 사이트 서버에 보내주면 된다.

토큰을 서버로부터 받으면 로컬에 저장하고 메인 페이지로 이동한다.

소감

각 페이지별 이름을 잘못 선언해서 디도스를 뿌렸었다.

경로와 파일명을 동일하게 선언하는걸 더 주의해야겠다.

막상 해보니 생각보다 어렵지않았다.

프론트에서 코드를 받아오는 로직도 작성중에있다.

서버와 통신에 성공하면 어떤 방식으로 통신하는건지도 공부해봐야겠다.