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

Facebook Login in React

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

featured image thumbnail for post Facebook Login in React

일단 페북 로그인을 하기 위해서는 facebook app id가 필요하다.

https://developers.facebook.com 에서 앱 ID를 발급 받았다.

react에서는 facebook을 간단히 사용하게 해주는 모듈이 있다.

$ yarn add react-facebook-login
  • login.js

    import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";
    
    const Login = (props) => {
        const { onLogin } = props;
        return (
            <div>
            <FacebookLogin
              appId="39...014"
              autoLoad={false}
              fields="name,first_name,last_name,email"
              callback={onLogin}
              render={renderProps => (
                <div onClick={renderProps.onClick}>facebook</div>
              )}
            />
          </div>
        )
    );
    
    export default Login;
    

다음과 같은 결과값을 받는다.

{  
   "name":"TaeMin Walter Moon",
   "first_name":"TaeMin Walter",
   "last_name":"Moon",
   "email":"tmmoond8@gmail.com",
   "id":"2...4",
   "accessToken":"EA...LgZDZD",
   "userID":"20...24",
   "expiresIn":6655,
   "signedRequest":"bCx...zQ1fQ",
   "reauthorize_required_in":7776000,
   "data_access_expiration_time":1570867745
}