0
私はFacebookのログインボタンコンポーネントを作成しました。私はデフォルト以外のアクセス許可が必要でした。 ここでの問題は、ログイン後、ページを更新した後に再びログアウトしてしまうことです。Facebookのログイン状態を維持しますか？
ログイン後に何かをセッションまたはクッキーに保存する予定ですか？
コンポーネント
let FbLoginComponent = React.createClass ({
getInitialState() {
return {
is_loggedin : 0, // 0 == not logged in.
is_not_authorized: 0, // 0 == not authorized.
intv : 0
}
},
componentDidMount() {
// Check if user is logged in
this.getLoginStatus();
console.log (this.state);
},
getLoginStatus() {
if (typeof FB !== 'undefined') {
clearInterval (this.state.intv);
FB.getLoginStatus ((r) => {
if (r.status === 'connected') {
this.setState ({ is_loggedin: 1, is_not_authorized: 0 });
} else if (r.status === 'not_authorized') {
this.setState ({ is_loggedin: 1, is_not_authorized: 1 });
} else {
this.setState ({ is_loggedin: 0, is_not_authorized: 0 });
}
});
} else {
console.log ('Oops, let try again later.');
if (this.state.intv === 0) {
let intv = setInterval (this.getLoginStatus, 1000);
console.log ('intv: ' + intv);
this.setState ({ intv });
}
}
},
toggleLogin() {
if (this.state.is_loggedin === 1) {
FB.logout ((r) => {
if (typeof r.authResponse !== 'undefined') {
this.setState ({ is_loggedin: 0, is_not_authorized: 0 });
console.log ('logged out.');
} else {
console.log ('User already logged out.');
}
});
} else {
FB.login ((r) => {
if (r.status === 'connected') {
this.setState ({ is_loggedin: 1, is_not_authorized: 0 });
} else if (r.status === 'not_authorized') {
this.setState ({ is_loggedin: 1, is_not_authorized: 1 });
} else {
this.setState ({ is_loggedin: 0, is_not_authorized: 0 });
}
}, { scope: 'email, publish_actions' });
}
},
renderButton() {
console.log ('rendering.......');
console.log (this.state);
if (this.state.is_loggedin === 1) {
return (
<img src="/images/fb-logout-btn.jpg" onClick={this.toggleLogin} className="fb-login-btn"/>
)
} else {
return (
<img src="/images/fb-login-btn.jpg" onClick={this.toggleLogin} className="fb-login-btn"/>
)
}
},
render() {
return (
<div className="fb-login-component">
{this.renderButton()}
</div>
)
}
});
ReactDOM.render (<FbLoginComponent/>, document.getElementById ('fb-login-btn-root'));