React Native - Facebook SDK(iOS) #reactnative

今日はFacebook SDKを導入する方法を説明します。Facebook SDKを利用することで容易にFacebook Loginを設置したり、Graph APIにアクセスできたりします。Facebook オフィシャルのReact Native用のモジュールは現時点でiOSだけに対応しています。

Installation

https://github.com/facebook/react-native-fbsdk

上記のモジュールをインストールします。READMEにインストール方法が書いてあります。具体的には、下記のステップを踏みます。

1. 必要なモジュールのインストール

$ npm install --save react-native-fbsdkcore # for graph API
$ npm install --save react-native-fbsdkshare 
$ npm install --save react-native-fbsdklogin

2. Facebook SDKのインストール

オフィルサイトからダウンロード
Getting Startedを参考にXcode上で設定する。
Facebook SDKモジュールをリンクさせる。ここを参照してドラッグアンドドロップとLink binary with librariesの登録を行う。

3. コンポーネントに追加

下記はFacebookログインの処理です。モジュールにログインボタンが用意されているので、それを設置。そのpropertyにログイン後に発動するイベントを追加。そして、そのイベントが起きた時に、Graph APIでユーザ情報を叩くフローになります。そして、適宜処理をします。

import { FBSDKLoginButton } from 'react-native-fbsdklogin';
import { FBSDKGraphRequest, FBSDKGraphRequestManager } from 'react-native-fbsdkcore';
...

  onLoginFinished(error,result){
    this.setState({loading: false});
    if (error) {
      alert('Error logging in.');
    } else {
      if (result.isCanceled) {
        alert('Login cancelled.');
      } else {
        this.getUserFromFB();
      }
    }
  },

  getUserFromFB(){
    var fetchRequest = new FBSDKGraphRequest((error, res) => {
      if (error) {
        alert('Error making request.');
      } else {
        // Data from request is in result
        console.log(res);
        userActions.facebookSignIn(res);
        this.setState({loading: true});
      }
    }, '/me?fields=id,name,first_name,last_name,email,gender,picture.width(350).height(350)');
    // Start the graph request.
    FBSDKGraphRequestManager.batchRequests([fetchRequest], function() {}, 60);
  },

  onLogoutFinished(){
    userActions.parseLogOut();
  },
..

  render(){
    <FBSDKLoginButton
      onLoginFinished={this.onLoginFinished}
      onLogoutFinished={this.onLogoutFinished}
      readPermissions={['email','public_profile', 'user_friends', 'user_photos']}
     publishPermissions={[]}
    />
  }

Summary

このようにFacebookが主導しているReact Nativeなので、Facebook SDKが準備されておりFacebook SDKのJavascriptライブラリを使う感覚でReact Nativeのアプリでコーディングできます。非常に簡単に設置できます。現時点でAndroidのSDKがないのが残念ですね。