web-dev-qa-db-ja.com

react-native-fbsdkからユーザー情報（電子メール、名前など）を取得する方法は？

ユーザーがFacebookで認証するときに、ユーザーの電子メールと名前にアクセスしてセットアップとアカウントにアクセスしようとしています。 react-native-fbsdkのドキュメントを準備しましたが、どこにも表示されません。

facebookreact-native
16
danseethaler

あなたはこのようなことをすることができます（これは私のアプリでやっていることの要約版です）：

<LoginButton
  publishPermissions={['publish_actions']}
  readPermissions={['public_profile']}
  onLoginFinished={
    (error, result) => {
      if (error) {
        console.log('login has error: ', result.error)
      } else if (result.isCancelled) {
        console.log('login is cancelled.')
      } else {
        AccessToken.getCurrentAccessToken().then((data) => {
          const { accessToken } = data
          initUser(accessToken)
        })
      }
    }
  }
  onLogoutFinished={logout} />

// initUser関数

initUser(token) {
  fetch('https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=' + token)
  .then((response) => response.json())
  .then((json) => {
    // Some user object has been set up somewhere, build that user here
    user.name = json.name
    user.id = json.id
    user.user_friends = json.friends
    user.email = json.email
    user.username = json.name
    user.loading = false
    user.loggedIn = true
    user.avatar = setAvatar(json.id)      
  })
  .catch(() => {
    reject('ERROR GETTING DATA FROM FACEBOOK')
  })
}
30
Nader Dabit

受け入れられた答えはfetchを使用しますが、SDKはこのリクエストを行うこともできます。

let req = new GraphRequest('/me', {
    httpMethod: 'GET',
    version: 'v2.5',
    parameters: {
        'fields': {
            'string' : 'email,name,friends'
        }
    }
}, (err, res) => {
    console.log(err, res);
});

詳細については、github.com/facebook/react-native-fbsdk＃graph-requestsをご覧ください

46
honerlawd

それはあなたを助けるでしょう、これは私のために働いています

import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginManager,LoginButton,AccessToken,GraphRequest,GraphRequestManager} from 'react-native-fbsdk';

export default class App extends Component<{}> {

  render() {
    return (
      <View style={styles.container}>

        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("login has error: " + result.error);
              } else if (result.isCancelled) {
                alert("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    const infoRequest = new GraphRequest(
                      '/me?fields=name,picture',
                      null,
                      this._responseInfoCallback
                    );
                    // Start the graph request.
                    new GraphRequestManager().addRequest(infoRequest).start();
                  }
                )
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>
      </View>
    );
  }

  //Create response callback.
  _responseInfoCallback = (error, result) => {
    if (error) {
      alert('Error fetching data: ' + error.toString());
    } else {
      alert('Result Name: ' + result.name);
    }
  }
}

詳細については、こちらをご覧ください。 Facebook Login React

10
Naeem Ibrahim