처음 소셜로그인을 찾아보면서 많은 사람들이 다양한 방법으로 하는 것으로 보았다.
이 글은 React를 활용하여 JSX 문법으로 REST API 카카오 소셜로그인을 구현하는 방법이다.
(프론트엔드 입장에서 인증토큰까지 받아서 진행하는 방법으로 작성됨)
상수데이터로 URL를 만들어서 소셜로그인할 버튼에 링크를 걸어준다.
⚙️ URL에는 카카오 development에 있는 앱키 (REST API)를 CLIENT_ID 값에 변수로 지정해서 넣어주고, REDIRECT_URI에는 카카오 development 사이트에서 설정한 주소로 변수값을 줘서 넣어준다.
버튼을 누르게 되면 해당 URL에 정보가 담겨서 카카오에서 인증코드를 보내준다.
개발자도구를 활용해서 인증코드를 확인해볼 수 있고, 이를 가져오기 위해서는 아래와 같이 코드를 적어준다. (useEffect 내 kakaoCode에 인증코드 값을 넣어줬다.)
위와 같이 코드를 가져와서 인증토큰을 요청하는 URL 뒤에 받은 코드를 넣어서 토큰을 요청한다.
(참고로, useEffect 메소드 내에서 한번에 모든 과정을 처리할 수 있게 코드를 작성했다.)
처음 진행하면서 발생했던 blocker :
아무 이상이 없다면 카카오에서 access_token
을 보내줄 것이다. 그럼 받은 토큰을 백엔드에서 지정한 API 주소로 headers
의 Authoriztion
값으로 보내준다.
처음 진행하면서 발생했던 blocker :
백엔드에서 변환한 토큰을 로컬스토리지에 token
값으로 저장하고 메인으로 이동한다.