JavaScript
Android
iOS
OAuth
react-native

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

More than 1 year has passed since last update.

ブログの記事を足したので追加: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以下の手順で進めレバ動くはず。


  1. セッティング

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

  3. 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用の公式ドキュメントでは動かなかった人のためになれば幸いっす。