1. 2달 전

    Naver Login in React

    React에서 네이버 로그인 사용하기

  2. 3달 전

    NPM에 React 모듈 배포하기

    NPM에 리액트에서 사용할 수 있는 모듈 배포하기

  3. 3달 전

    JS 의존성 관리 - 모듈 시스템과 NPM

    전통적인 JS의 의존성 관리 방식과 한계, CommonJS, AMD 등장. JS의 패키지 관리자인 NPM

  4. 5달 전

    Next.js SSR Styled-component (.feat TS)

    Styled-Components로 컴포넌트를 작성해보자.

  5. 5달 전

    Next.js 9

    7월에 발표된 Next.js 9에서 어떤점이 변경되었는지를 중심으로

  6. 6달 전

    Facebook Login in React

    React에서 페이스북 로그인 사용하기

  7. 6달 전

    Google Login in React

    React에서 구글 로그인 사용하기

  8. 6달 전

    Kakao Login in React

    React에서 카카오 로그인 사용하기

  9. 8달 전

    21 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.22 ~ 2.25

  10. 8달 전

    18 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.13 ~ 2.17

  11. 8달 전

    17 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.7 ~ 2.12

  12. 9달 전

    NEXT.JS

    공식 문서 튜토리얼을 따라 하며 기록

  13. 9달 전

    16 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.0 ~ 2.6

  14. 9달 전

    gatsby 블로그 만들기

    gatsby + Netlify 사용해서 블로그 만들기

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

Kakao Login in React

React에서 카카오 로그인 사용하기

featured image thumbnail for post Kakao Login in React

https://developers.kakao.com/

가서 카카오 계정으로 로그인을 하자.

새로운 앱을 만들면 키를 발급 받는다. 여기서는 JavaScript 키를사용한다.

$ yarn add react-kakao-login
  • login.jsx

    import KakaoLogin from 'react-kakao-login';
    
    const Login = (props: IProps) => {
      const { onLoginKakao } = props;
      return (
        <div className={cx('login')}>
          <KakaoLogin
            jsKey='kakao-js-key'
            onSuccess={result => onLoginKakao(result)}
            onFailure={result => console.log(result)}
            render={(props: any) => (
              <div onClick={props.onClick} />
            )}
            getProfile={true}
          />
        </div>
      );
    };
    
    export default Login;
    

성공 콜백에 들어오는 결과 예시 (가져올 정보에 옵션을 어떤값을 주었냐에 따라 데이터가 더 들어가 있을 수 있다.)

{  
   "response":{  
      "access_token":"x1...AAFr73UPeA",
      "token_type":"bearer",
      "refresh_token":"k5za...Fr73UPdg",
      "expires_in":7199,
      "scope":"profile",
      "refresh_token_expires_in":5183999
   },
   "profile":{  
      "id":11...64,
      "properties":{  
         "nickname":"문태민",
         "profile_image":"http:.../profile_640x640s.jpg",
         "thumbnail_image":"http:/...profile_110x110c.jpg"
      },
      "kakao_account":{  
         "has_email":true,
         "email_needs_agreement":true
      }
   }
}