reactjsでFacebook APIログインを実装する
FacebookのJavascript SDKを認証に使用することに取り組んでいます。 SDKを適切にインポートし、ページに[いいね]ボタンを配置することができました。ただし、facebookのログインボタンはタグでラップする必要があります。
<fb:login-button/>
現在、 Facebookログインチュートリアル のすべてのコードを、Reactアプリケーションを格納している私のプロジェクトで唯一のhtmlファイルであるindex.htmlに貼り付けています。 、実際のログインボタンがある最後の部分をReactコンポーネントに配置する必要があります。これを実行しようとすると、次のエラーが発生しました。
ReactifyError: /Users/ritmatter/reps/js/components/Signup.jsx: Parse Error: Line 82: Unexpected end of input while parsing file: /Users/ritmatter/reps/js/components/Signup.jsx
sdk.js:61 The "fb-root" div has not been created, auto-creating
ping?client_id=894010190618709&domain=localhost&Origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebo…:1 Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
ログインボタンを反応させるにはどうすればよいですか？
ReactJSでLogin APIのFacebookチュートリアルを変更する方法を見つけました。これが他の誰かがこれに苦しんでいるのを助けることを願っています。
まず、ログインリンクが必要な反応コンポーネントに、次のコードを含めます。
componentDidMount: function() {
window.fbAsyncInit = function() {
FB.init({
appId : '<YOUR_APP_ID>',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.1' // use version 2.1
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
this.statusChangeCallback(response);
}.bind(this));
}.bind(this);
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
},
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
testAPI: function() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
},
// This is called with the results from from FB.getLoginStatus().
statusChangeCallback: function(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
this.testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
},
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
checkLoginState: function() {
FB.getLoginStatus(function(response) {
this.statusChangeCallback(response);
}.bind(this));
},
handleClick: function() {
FB.login(this.checkLoginState());
},
次に、レンダリングメソッドで、そのhandleClickを呼び出すHTMLがあることを確認します。
<a href="#" onClick={this.handleClick}>Login</a>
これはチュートリアルのコードと同じですが、ReactJSコンポーネントに配置されています。唯一の違いは、Facebook API関数をリアクションコンポーネントの一部にするために、これを戦略的にバインドする必要があることです。このログインは、FB.getLoginStatus（）で指定された応答から解析された応答メッセージで終了します。また、 passport-facebook-token のようなものを使用して、その応答オブジェクトからトークンを取り出して認証のためにバックエンドに送信することもできます。
Facebookの認証フローにPromiseを使用しました
mixins/facebook.js
const promises = {
init: () => {
return new Promise((resolve, reject) => {
if (typeof FB !== 'undefined') {
resolve();
} else {
window.fbAsyncInit = () => {
FB.init({
appId : '<app_id>',
cookie : true,
xfbml : true,
version : 'v2.5'
});
resolve();
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
});
},
checkLoginState: () => {
return new Promise((resolve, reject) => {
FB.getLoginStatus((response) => {
response.status === 'connected' ? resolve(response) : reject(response);
});
});
},
login: () => {
return new Promise((resolve, reject) => {
FB.login((response) => {
response.status === 'connected' ? resolve(response) : reject(response);
});
});
},
logout: () => {
return new Promise((resolve, reject) => {
FB.logout((response) => {
response.authResponse ? resolve(response) : reject(response);
});
});
},
fetch: () => {
return new Promise((resolve, reject) => {
FB.api(
'/me',
{fields: 'first_name, last_name, gender'},
response => response.error ? reject(response) : resolve(response)
);
});
}
}
export const Facebook = {
doLogin() {
this.setState({
loading: true
}, () => {
promises.init()
.then(
promises.checkLoginState,
error => { throw error; }
)
.then(
response => { this.setState({status: response.status}); },
promises.login
)
.then(
promises.fetch,
error => { throw error; }
)
.then(
response => { this.setState({loading: false, data: response, status: 'connected'}); },
error => { throw error; }
)
.catch((error) => {
this.setState({loading: false, data: {}, status: 'unknown'});
console.warn(error);
});
});
},
doLogout() {
this.setState({
loading: true
}, () => {
promises.init()
.then(
promises.checkLoginState,
error => { throw error; }
)
.then(
promises.logout,
error => { this.setState({data: {}, status: 'unknown'}); }
)
.then(
response => { this.setState({loading: false, data: {}, status: 'unknown'}); },
error => { throw error; }
)
.catch(error => {
this.setState({loading: false, data: {}, status: 'unknown'});
console.warn(error);
});
});
},
checkStatus() {
this.setState({
loading: true
}, () => {
promises.init()
.then(
promises.checkLoginState,
error => { throw error; }
)
.then(
response => { this.setState({status: response.status}); },
error => { throw error; }
)
.then(
promises.fetchUser,
error => { throw error; }
)
.then(
response => { this.setState({loading: false, data: response, status: 'connected'}); },
error => { throw error; }
)
.catch((error) => {
this.setState({loading: false, data: {}, status: 'unknown'});
console.warn(error);
});
});
}
};
Profile.jsx
import {Facebook} from './mixins/Facebook.js';
import {Button} from 'react-bootstrap';
const ProfileHandler = React.createClass({
mixins: [Facebook],
componentDidMount() {
this.checkStatus();
},
getInitialState() {
return {
status: 'unknown',
loading: false,
data: {}
};
},
render() {
const loading = this.state.loading ? <p>Please wait, profile is loading ...</p> : null;
const message = this.state.status === 'connected'
? (<div>
Hi {data.name}!
<Button onClick={this.doLogout}>Logout</Button>
</div>)
: (<Button onClick={this.doLogin}>Login</Button>);
return (
<div>
{message}
{loading}
</div>
);
}
});
ritmatterからは良い答えが得られましたが、これをどのようにやったかは少し異なります。ログイン状態を確認するためのコールバックをトリガーするために、私自身ではなくFacebookのログインボタンを使用したかったのです。ログインボタンは次のようになります。
<div class="fb-login-button" onlogin="checkLoginState" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>
ボタンにはonlogin属性があり、jsxパーサーはサポートしていません。反応式でdata-onloginを使用しても機能しなかったため、componentDidMountにボタンを追加しました。
componentWillMount: function () {
window['statusChangeCallback'] = this.statusChangeCallback;
window['checkLoginState'] = this.checkLoginState;
},
componentDidMount: function () {
var s = '<div class="fb-login-button" ' +
'data-scope="public_profile,email" data-size="large" ' +
'data-show-faces="false" data-auto-logout-link="true" ' +
'onlogin="checkLoginState"></div>';
var div = document.getElementById('social-login-button-facebook')
div.innerHTML = s;
},
componentWillUnmount: function () {
delete window['statusChangeCallback'];
delete window['checkLoginState'];
},
statusChangeCallback: function(response) {
console.log(response);
},
// Callback for Facebook login button
checkLoginState: function() {
console.log('checking login state...');
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
},
render: function() {
return (
<div id='social-login-button-facebook'>
</div>
);
}
CheckLoginStateを自動的に呼び出す場合は、コンポーネントのマウント時にボタンをトリガーするだけです。
答えがそれを実装するのを助けたので、私はここに私の解決策を投稿しましたが、ritmatterから受け入れられた答えは、
FB.Event.subscribe('auth.statusChange', function(response)
rubyFanaticの答えからの声明。さらに、「ログイン」は私をたくさん混乱させました。私の目には必要ありません。
これはc＆pソリューションであるため、共有したいと思います。ここでは、fb api v2.8に対する完全なコードを示します（もちろん、react-bootstrapはキックできます）。
/* global FB*/
import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
export default class Login extends Component {
constructor(props) {
super(props);
this.checkLoginState = this.checkLoginState.bind(this);
this.handleClick = this.handleClick.bind(this);
this.testAPI = this.testAPI.bind(this);
this.statusChangeCallback = this.statusChangeCallback.bind(this);
}
componentDidMount() {
window.fbAsyncInit = function() {
FB.init({
appId : 'YOURAPIKEYHERE',
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
this.checkLoginState();
} else {
console.log('---->User cancelled login or did not fully authorize.');
}
}.bind(this));
}.bind(this);
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
// This is called with the results from from FB.getLoginStatus().
statusChangeCallback(response) {
if (response.status === 'connected') {
// Logged into your app and Facebook.
this.testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
checkLoginState() {
FB.getLoginStatus(function(response) {
this.statusChangeCallback(response);
}.bind(this));
}
handleClick() {
FB.login(this.checkLoginState());
}
render() {
return (
<main>
<Grid fluid>
<h1>
Facebook Login
</h1>
</Grid>
<Grid>
<Row>
<Col xs={12}>
<a href="#" onClick={this.handleClick} onlogin={this.checkLoginState}>Login</a>
<div id="status"></div>
</Col>
</Row>
</Grid>
</main>
);
}
}
これは、ログインコールバックを取得するために使用したソリューションです。 renderメソッドでFacebookログインボタンにこのコードを追加できます。
<div className="fb-login-button" data-max-row="5"
data-size="large"
data-show-faces="false"
data-auto-logout-link="false"
href="javascript:void(0)">Login</div>
コードに次の行を追加します。
componentDidMount: function() {
// facebook signin button render
window.fbAsyncInit = function() {
FB.init({
appId : 'replace with your app id here',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.1' // use version 2.1
});
// login callback implementation goes inside the function() { ... } block
FB.Event.subscribe('auth.statusChange', function(response) {
// example implementation
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
}.bind(this);
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
}
基本的にログインコールバックであるため、コンポーネントの初期化中にFB.Event.subscribe（ 'auth.statusChange'、callback_function）を呼び出すことが重要です。 FB.Event documentationについてはこちらをご覧ください。
以下の最も簡単なコードを見つけます。
import React, { Component } from 'react';
import './App.css';
import FacebookLogin from 'react-facebook-login';
import GoogleLogin from 'react-google-login';
class App extends Component {
render() {
const responseFacebook = (response) => {
console.log(response);
}
const responseGoogle = (response) => {
console.log(response);
}
return (
<div className="App">
<h1>LOGIN WITH FACEBOOK AND GOOGLE</h1>
<FacebookLogin
appId="" //APP ID NOT CREATED YET
fields="name,email,picture"
callback={responseFacebook}
/>
<br />
<br />
<GoogleLogin
clientId="" //CLIENTID NOT CREATED YET
buttonText="LOGIN WITH GOOGLE"
onSuccess={responseGoogle}
onFailure={responseGoogle}
/>
</div>
);
}
}
export default App;
これに対処するためにmixinクラスを作成しました。
これは、自分の代わりにFBのボタンを使用する場合に考えられる、最もクリーンでシンプルな方法です。
ボタンを使用するには、これと同じくらい簡単です。
<FbLoginBtn
width="250"
dataScope="public_profile,email"
onSuccess={callback}
onFailure={optionalCallback}
afterLogin={optionalCallback}
/>
このコンポーネントは完全に自己完結型であり、外部依存関係に依存せず、FBログインボタンをレンダリングする以外の事前定義された動作を持たないため、高度に堆肥化できます。
import React, { Component } from 'react';
class FbLoginBtn extends Component {
constructor(props) {
super(props);
// post login behavior should be defined at a higher level
this.onSuccess = this.props.onSuccess || (() => {});
this.onFailure = this.props.onFailure || (() => {});
this.onSuccess = this.onSuccess.bind(this);
this.onFailure = this.onFailure.bind(this);
}
componentDidMount() {
// This is the meat of the component
// create a script tag, load FB SDK
// then after script is loaded, set related behavior
// If you have other components that rely on the FB SDK
// I recommend extracting this into its own module
let self = this;
let scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.src = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=xxxxx";
scriptTag.addEventListener('load', function (e) {
self.FB = window.FB;
// I don't like exposing the SDK to global scope
window.FB = null;
// This subscribe the callback when login status change
// Full list of events is here
// https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.9
self.FB.Event.subscribe('auth.statusChange', self.onStatusChange.bind(self));
});
document.body.appendChild(scriptTag);
}
onStatusChange(response) {
if (response.status === 'connected') {
const { accessToken } = response.authResponse;
// I have a afterLogin optional callback
// which takes care of ads landing, invitation or any other custom behavior
this.onSuccess(accessToken, this.props.afterLogin);
} else {
this.onFailure();
}
}
render() {
return (
<div
className="fb-login-button"
data-width={this.props.width}
data-max-rows="1"
data-size="large"
data-button-type="login_with"
data-show-faces="false"
data-auto-logout-link="true"
data-use-continue-as="false"
data-scope={this.props.dataScope}
>
</div>
);
}
}
export default FbLoginBtn;
このライブラリを使用してみてください： https://github.com/keppelen/react-facebook-login
とても簡単です：
import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';
const responseFacebook = (response) => {
console.log(response);
}
ReactDOM.render(
<FacebookLogin
appId="1088597931155576"
autoLoad={true}
callback={responseFacebook} />,
document.getElementById('demo')
);
私は最近、私のプロジェクトの1つでFacebook Loginに取り組んでいました。そのため、多くのStackoverflowの回答とブログ投稿を試しました。私は最小限のコードを書きましたES6 FatArrow関数式を使用（.bind（this）を除く）。このコードがお役に立てば幸いです。
https://Gist.github.com/ronit-mukherjee/3e933509643a4ab4e80452bb05c1a07
/*global FB*/
import React, {
Component
} from 'react';
class FacebookLoginButton extends Component {
componentDidMount() {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = () => {
FB.init({
appId: '9999999999999999', //Change with your Facebook app id
autoLogAppEvents: true,
xfbml: true,
version: 'v3.0'
});
FB.Event.subscribe('auth.statusChange', response => {
if (response.authResponse) {
this.checkLoginState();
} else {
console.log('[FacebookLoginButton] User cancelled login or did not fully authorize.');
}
});
};
}
checkLoginState() {
FB.getLoginStatus(function(response) {
this.statusChangeCallback(response);
}.bind(this));
}
login() {
FB.login(this.checkLoginState(), {
scope: 'email'
});
}
statusChangeCallback(response) {
if (response.status === 'connected') {
this.testAPI();
} else if (response.status === 'not_authorized') {
console.log("[FacebookLoginButton] Person is logged into Facebook but not your app");
} else {
console.log("[FacebookLoginButton] Person is not logged into Facebook");
}
}
testAPI() {
FB.api('/me', function(response) {
console.log('[FacebookLoginButton] Successful login for: ', response);
});
}
render() {
return ( <
button className = "btn btn-block btn-fb"
onClick = {
() => this.login()
} >
<
i className = "fa fa-facebook" / > Connect with Facebook <
/button>
)
}
}
export default FacebookLoginButton;