React | react-facebook-login ( + 차단된 URI... 화이트리스트... )

0. npm install

$ npm i react-facebook-login

1. 페이스북 app id발급

페이스북 개발자 사이트에서 발급받을 수 있습니다.

Facebook for Developers

2. import후 사용하기

커스텀한 버튼을 사용하고자 한다면 아래처럼 from값을 주어야 함

import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";

 

• appId: 발급받은 본인의 app id 입력
• fields: 콜백에서 받을 항목들 
• callback: 로그인 완료 후 response값을 리턴받을 함수 등록
• disableMobileRedirect: 모바일 웹 환경에서 차단된 URI 오류가 계속 나서 이 props 전달하니 오류 나지 않았음

<FacebookLogin
  appId={FACEBOOK_APP_ID}
  autoLoad={false}
  fields="name,first_name,last_name,email"
  callback={handleFacebook}
  disableMobileRedirect={true}
  render={(renderProps) => (
    <button onClick={renderProps.onClick}>
    	페이스북 로그인
    </button>
  )}
/>

 

 

+) 참고

react-facebook-login

Not working on mobile phone. · Issue #272 · keppelen/react-facebook-login