如何从 react-native-fbsdk 获取用户信息(电子邮件、姓名等)

Question

当用户使用 Facebook 进行身份验证时，我正在尝试访问用户的电子邮件和姓名以进行设置和帐户。我已经准备好了 react-native-fbsdk 的文档，但我在任何地方都没有看到它。

Answer 1

接受的答案使用 fetch 但 SDK 也能够执行此请求......因此，如果有人想知道，这就是使用 SDK 完成的方式。

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

有关更多详细信息，请参阅 https://github.com/facebook/react-native-fbsdk#graph-requests

Answer 2

你可以做这样的事情（这是我在我的应用程序中所做的事情的简化版本）：

<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(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')
  })
}

Answer 3

这将对您有所帮助，这对我有用

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

Answer 4

import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';
export default class FBLogin extends Component {
    initUser = (token) => {
        fetch('https://graph.facebook.com/v2.5/me?fields=email,first_name,last_name,friends&access_token=' + token)
            .then((response) => {
                response.json().then((json) => {
                    const ID = json.id
                    console.log("ID " + ID);
                    const EM = json.email
                    console.log("Email " + EM);
                    const FN = json.first_name
                    console.log("First Name " + FN);
                })
            })
            .catch(() => {
                console.log('ERROR GETTING DATA FROM FACEBOOK')
            })
    }
    render() {
        return (
            <View>
                <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
                                    // console.log(accessToken);
                                    this.initUser(accessToken)
                                })
                            }
                        }
                    }
                    onLogoutFinished={() => {
                        console.log('Logout');
                    }}
                />
            </View>
        );
    }
};

Answer 5

这是获取Facebook个人资料信息的整个代码片段。

"反应"： "16.13.1"
"反应原生"： "0.63.3"
"react-native-fbsdk"： "^3.0.0"

const infoRequest = new GraphRequest(
    '/me', 
    {
      parameters: {
        'fields': {
            'string' : 'email,name'
        }
      }
    },
    (err, res) => {
      console.log(err, res);
    }
);
const facebookLogin = () => {
    LoginManager.logInWithPermissions(["public_profile", "email"]).then(
      function(result) {
        if (result.isCancelled) {
          console.log("Login cancelled");
        }
        else {
          console.log("Login success with permissions: " + result.grantedPermissions.toString());
          new GraphRequestManager().addRequest(infoRequest).start();
        }
      },
      function(error) {
        console.log("Login fail with error: " + error);
      }
    );
}