React | npm react-kakao-login

0. Kakao Developers에 애플리케이션 등록 후 JavaScript key 발급받기

Kakao Developers

 

1. react-kakao-login install

$ npm install react-kakao-login

 

2. 사용!

jsKey, onSuccess, onFailure항목은 필수

• jsKey: 발급받은 JavaScript Key입력. 만약 백엔드 서버에서 다른 처리를 한다면 백엔드 서버에서는 REST API Key를 사용해야 함.
• onSuccess: 카카오 로그인 성공시 핸들러 - response를 인자값으로 받음. access_token과 refresh_token을 얻을 수 있음.
• onFailure: 카카오 로그인 실패시 핸들러
• className: 클래스 명

import KakaoLogin from "react-kakao-login";

...생략

<KakaoLogin
jsKey={KAKAO_JS_KEY}
onSuccess={handleKakaoSuccess}
onFailure={handleKakaoFail}
className="KakaoLogin"
>
  <img src={Kakao} alt="Kakao" />
  &nbsp;&nbsp;<p>카카오톡 로그인</p>
</KakaoLogin>

 

Spring Boot로 REST API를 만들고, React로 프론트를 진행하는 중에 진짜 아무리해도 토큰 값을 어떻게 넘겨줄지 모르겠어서 일단 이 방법을 사용했다...

원래는 api서버에서 인증 코드값을 받고, 그 인증코드로 access token을 발급, 그 후 access token을 이용해서 유저정보를 얻어오고 있었는데.. 로그인 후 jwt토큰 발급한 다음 jwt토큰을 프론트로 어떻게 넘겨줘야 하는지 전혀 모르겠다...🙄