TIL 21 | 카카오 소셜로그인

dongwheekeem·2021년 10월 24일
1

TIL

목록 보기
21/23

처음 소셜로그인을 찾아보면서 많은 사람들이 다양한 방법으로 하는 것으로 보았다.
이 글은 React를 활용하여 JSX 문법으로 REST API 카카오 소셜로그인을 구현하는 방법이다.
(프론트엔드 입장에서 인증토큰까지 받아서 진행하는 방법으로 작성됨)


Basic flow

인증코드 요청해서 받기

상수데이터로 URL를 만들어서 소셜로그인할 버튼에 링크를 걸어준다.
⚙️ URL에는 카카오 development에 있는 앱키 (REST API)를 CLIENT_ID 값에 변수로 지정해서 넣어주고, REDIRECT_URI에는 카카오 development 사이트에서 설정한 주소로 변수값을 줘서 넣어준다.

버튼을 누르게 되면 해당 URL에 정보가 담겨서 카카오에서 인증코드를 보내준다.
개발자도구를 활용해서 인증코드를 확인해볼 수 있고, 이를 가져오기 위해서는 아래와 같이 코드를 적어준다. (useEffect 내 kakaoCode에 인증코드 값을 넣어줬다.)

인증토큰 요청해서 받기

위와 같이 코드를 가져와서 인증토큰을 요청하는 URL 뒤에 받은 코드를 넣어서 토큰을 요청한다.
(참고로, useEffect 메소드 내에서 한번에 모든 과정을 처리할 수 있게 코드를 작성했다.)


처음 진행하면서 발생했던 blocker :

  • 계속 카카오에서 유효하지 않은 토큰이라며 401 error를 보냈다. (카카오에서 백엔드에 보낸 에러를 백엔드에서는 프론트엔드에 넘겨준다.) kakao developers에서 [고급] - [허용 IP 주소]를 지정해놨었는데 삭제했더니 됐다.
    ❗️이 부분은 아직 명확한 사유를 모르겠으나 상식적으로 프론트와 백엔드의 IP 주소만을 허용하는 것이 맞지 않은가 싶은데.. 우리는 왜 허용 IP를 추가하면 안 됐는지 모르겠다..

인증토큰 넘겨주기

아무 이상이 없다면 카카오에서 access_token 을 보내줄 것이다. 그럼 받은 토큰을 백엔드에서 지정한 API 주소로 headersAuthoriztion 값으로 보내준다.


처음 진행하면서 발생했던 blocker :

  • body로 보내려고 했다가 정확히 어떤 문제인지 모르겠으나, 계속 에러가 났다.
  • headers로 보냈으나 키를(Authorization) 백엔드와 맞추지 않아서 백엔드에서 CORS error가 발생했다.

사이트 내 사용 가능한 토큰 받기

백엔드에서 변환한 토큰을 로컬스토리지에 token값으로 저장하고 메인으로 이동한다.

그러면 소셜로그인이 완료된다!

profile
실패란 못하는 것이 아니라 하지 않았기 때문에 생긴 결과물이다

0개의 댓글