ReactJS Facebook Login

 

 

# create-react-app facebook_login
# cd facebook_login
# npm install react-facebook-login
url: react-facebook-login npm document

 

GIT : https://github.com/kangyongseok/Facebook-Login

DEMO : https://kangyongseok.github.io/Facebook-Login/

 

 

 

 

Create ReactJs Facebook Login Button

 

ReactJs 에서 npm 을 설치하여 Facebook Login 버튼 기능을 만들어 보려고 한다.

복잡한 과정은 없고 페이스북에서 아이디 잘 생성하고 react-facebook-login npm document 에서 필요한 정보만 가져와서 불러오면 된다.

 

 

좌: 로그인후 / 우: 로그인전

 

 

1. 페이스북 개발자 페이지 에서 내 앱 만들기

 

 

 

우측상단에 내 앱 에서 새 앱 추가를 누르고 표시할 이름과 메일주소를 적고 생성합니다.

 

 

 

로그인 기능을 쓸것이기 때문에 선택해준다.

 

 

 

웹을 선택하고

 

 

 

사용하는 url을 작성해 줍니다.

 

url 은 본인서버를 유무료로 운영하고 계시면 그걸 넣어도 되고 여기선 React 를 npm start 했을때 나오는 localhost:3000 을 사용하시면 됩니다. 뒤에 포트번호는 다를수 있습니다.

 

그리고 나머지는 그냥 바로 계속 계속 마지막단계까지 그냥 완료해주시면됩니다.

 

 

 

2. 코드작성

 

src/component/facebook.js

 

import React, { Component } from 'react';

import FacebookLogin from 'react-facebook-login';

class Facebook extends Component {

render() {

return (

<div></div>

)

}

}

export default FacebookLogin;

 

 

새폴더를 하나 만들고 새 파일 생성후 빈 컴포넌트를 하나 만들어 줍니다.

 

import React, { Component } from 'react';

import FacebookLogin from 'react-facebook-login';

class Facebook extends Component {

state = {

isLoggedIn: false,

userID: '',

name: '',

email:'',

picture:''

}

render() {

return (

<div></div>

)

}

}

export default Facebook;

 

 

facebook 으로 로그인하는 회원의 정보를 받기위한 state를 하나 만들어 줍니다.

 

isLoggedIn: false 는 로그인전이기때문에 기본값인 false 를 넣어줍니다.

 

render() {

let fbContent;

if(this.state.isLoggedIn) {

Logig 한 회원의 정보를 보여줌

} else {

Facebook 에서 제공하는 API를 받아 로그인 버튼 기능 추가

}

return (

<div></div>

)

}

 

this.state.isLoggedIn 의 true:false 여부를 전달받아 어떤 화면을 보여줄지 if 문으로 작성합니다.

 

render() {

let fbContent;

if(this.state.isLoggedIn) {

 

} else {

fbContent = (<FacebookLogin

appId="본인이 부여받은 appID 번호 입력"

autoLoad={true} // 실행과 동시에 자동으로 로그인 팝업창이 뜸

fields="name,email,picture" // 어떤정보를 받아올지 입력하는 필드

onClick={this.componentClicked} // this. 바인딩 추가

callback={this.responseFacebook} />) // this. 바인딩 추가

}

return (

<div>{fbContent}</div>

)

}

 

else 구문안에 넣은 명세는 react-facebook-login npm document 에 가면 확인가능하다.

 

 

App.js

import React, { Component } from 'react';

import './App.css';

import Facebook from './component/Facebook';

class App extends Component {

render() {

return (

<div className="App">

<h1 className="App-title">Facebook Auth Example</h1>

<p className="App-intro">

To get started, authenticate with Facebook

</p>

<Facebook />

</div>

);

}

}

export default App;

 

몇가지 텍스트와 컴포넌트를 추가하면

 

 

 

이러한 화면이 나오는데 console 창을 보면 에러가 뜨는걸 볼 수 있다. https 관련 문제라 작동은 정상적으로 하기때문에 우선은 무시하고 잘 돌아가게만드는것에 집중한다.

 

 

그러나 클릭해도 로그인이나 어떤 팝업창도 뜨지않는다.

 

하단 명세에 callback에 저장된 함수와 onClick 에 저장된 함수를 정의해주지 않았다.

 

state하단에 responseFacebook 과 componentClicked 를 정의해준다.

 

src/component/Facebook.js

responseFacebook = response => {

// console.log(response);

this.setState({

isLoggedIm:true,

userID: response.userID,

name: response.name,

email:response.email,

picture: response.picture.data.url

});

};

componentClicked = () => console.log('clicked');

 

callback 으로 넘어오는 값을 response 에 담아 setState 를 통해 초기화 state 에 정보를 업로드 할수 있도록 코드를 작성합니다.

 

실제 저러한 정보를 담고있는지 확인하고싶으면 this.setState 부분은 주석처리하고 위에 console.log(response) 를 찍어보면 확인할 수 있습니다.

 

여기까지하면 제대로 팝업이 뜨는걸 확인 할 수 있고 이제 로그인이 되었을 경우 정보를 보여줄 페이지를 만들겠습니다.

 

아까 if ~ else 구문에서  else 만 작성해줬는데 if 블럭안에 코드를 작성해주면 됩니다.

 

if(this.state.isLoggedIm) {

fbContent = (

<div style={{width:'400px', margin: 'auto', background:'green', padding:'20px'}}>

<img src={this.state.picture} alt={this.state.name} />

<h2>Welcome {this.state.name}</h2>

Email : {this.state.email}

</div>

);

}

 

state 에 업데이트 된 정보를 받아와 css 로 스타일을 작성해주고 꾸미면 페이지가 완성됩니다.

 

이전버튼을 확인하려면 facebook 에서 로그아웃을 하면 바로 확인이 가능합니다.

 

 

 

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.