react-native-fbsdkを使って、ログイン、ユーザのemailを取得する #JavaScript

ブログの記事を足したので追加：react-native-fbsdkを使って、ログイン、ユーザのemailを取得する

react-nativeでfacebook認証をするためにreact-native-fbsdkを使った。公式ドキュメント、githubのreadmeはそのまま動かそうとしても、コードが古くて動かなかった。一部変えなきゃいけなかったし、なんか色々ややこしいので、メモがてらに残しておく。

react-natve 0.43.3
react-native-fbsdk: 0.5.0

react native-fbsdk以下の手順で進めレバ動くはず。

セッティング
ユーザにLoginをしてもらってaccesstokenを取得
accesstokenを使って、graphApiにリクエストを投げる

1. セッティング

公式ドキュメントの通りに従っていけば問題なく動いた。

2. ユーザにLoginをしてもらってaccesstokenを取得

こんな感じのログインボタンコンポーネントを作ってあげる。以下のようにやると、access-tokenが取得できる。

ドキュメント

sample_loginButtonComponent.js

    <View style={{ flex: 2, alignItems: 'center' }}>
      <LoginButton
        publishPermissions={["publish_actions"]}
        readPermissions={["email", "public_profile"]}
        onLoginFinished={
          (error, result) => {
            if (error) {
              Alert.alert("login has error: " + result.error);
            } else if (result.isCancelled) {
              Alert.alert("login is cancelled.");
            } else {
              AccessToken.getCurrentAccessToken().then(
                (data) => {
                  Alert.alert(data.accessToken.toString());  // 確認のため、alertで内容表示
                  new GraphRequestManager().addRequest(infoRequest).start();  // 次の見出し部分の準備
                }
              );
            }
          }
        }
        onLogoutFinished={() => Alert.alert("logout.")}/>
    </View>

とりあえずここまででaccess-tokenが取得できるので、次はgraph api にリクエストを投げる部分

3. accesstokenを使って、graphApiにリクエストを投げる

sample_grashRequest.js


// コールバック関数の用意
const responseInfoCallback = (error, result) => {
  if (error) {
    console.log(error);
  } else {
    console.log(result);
  }
}

// リクエストの時に投げるurlの用意
//　こんな感じのurlが生成される
// https://graph.facebook.com/v2.9/me?fields=name%2Cemail&access_token=TOKEN
const infoRequest = new GraphRequest(
  '/me',
  {
    httpMethod: 'GET',
    version: 'v2.9',
    parameters: {
        'fields': {
            'string' : 'email,name'
        }
    }
  },
  responseInfoCallback,
);

tokenが生きているか、何を取得できるのかはグラフAPIエクスプローラを使うとわかる。fbsdkがうまく動かなかったので、初めはcurlして、リクエストを処理してたんだけど、その辺のリクエスト先urlもこれを使うとさくっと取得できる。

コード全体

import FBLogin from './fbEmailRequest';


// ... 任意のところで

<FBLogin />

fbEmailRequest.js

import React from 'react';
import { View, Alert } from 'react-native';

const FBSDK = require('react-native-fbsdk');

const {
  LoginButton,
  AccessToken,
  GraphRequest,
  GraphRequestManager,
} = FBSDK;

const responseInfoCallback = (error, result) => {
  if (error) {
    console.log(error);
  } else {
    console.log(result);
  }
}

const infoRequest = new GraphRequest(
  '/me',
  {
    httpMethod: 'GET',
    version: 'v2.9',
    parameters: {
        'fields': {
            'string' : 'email,name'
        }
    }
  },
  responseInfoCallback,
);



export default function FBLogin() {
  return (
    <View style={{ flex: 2, alignItems: 'center' }}>
      <LoginButton
        publishPermissions={["publish_actions"]}  // 書き込み権限はこっち
        readPermissions={["email", "public_profile"]} // 読み取り権限はこっち
        onLoginFinished={
          (error, result) => {
            if (error) {
              Alert.alert("login has error: " + result.error);
            } else if (result.isCancelled) {
              Alert.alert("login is cancelled.");
            } else {
              AccessToken.getCurrentAccessToken().then(
                (data) => {
                  console.log('result', result);
                  console.log('accesstoken', data);
                  Alert.alert(data.accessToken.toString());
                  new GraphRequestManager().addRequest(infoRequest).start();
                }
              );
            }
          }
        }
        onLogoutFinished={() => Alert.alert("logout.")}/>
    </View>
  );
}

以上です。公式ドキュメントがreact-native用の公式ドキュメントでは動かなかった人のためになれば幸いっす。