Facebook 如何从react native fbsdk获取用户信息（电子邮件、姓名等）？

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

您可以这样做（这是我在我的应用程序中所做操作的简化版本）：

---

接受的答案使用

fetch

，但SDK也可以执行此请求。。。因此，如果有人想知道，这就是如何使用SDK实现的

let req=new GraphRequest（“/me”{
httpMethod:'GET'，
版本：“v2.5”，
参数：{
“字段”：{
'字符串'：'电子邮件、姓名、朋友'
}
}
}，（误差、分辨率）=>{
console.log（err，res）；
});

---

有关更多详细信息，请参阅有助于您的，这对我很有用

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);
    }
  }
}

import React，{Component}来自'React'；
从“react native”导入{View}；
从“react native fbsdk”导入{LoginManager、LoginButton、AccessToken、GraphRequest、GraphRequestManager}；
导出默认类应用程序扩展组件{
render（）{
返回(
{
如果（错误）{
警报（“登录有错误：+result.error”）；
}否则如果（结果被取消）{
警报（“登录被取消”）；
}否则{
AccessToken.getCurrentAccessToken（）。然后(
（数据）=>{
const infoRequest=新GraphRequest(
“/me？字段=名称，图片”，
无效的
这是您的回复信息
);
//启动图形请求。
新建GraphRequestManager（）.addRequest（infoRequest）.start（）；
}
)
}
}
}
onLogoutFinished={（）=>警报（“注销”）}/>
);
}
//创建响应回调。
_ResponseInfo回调=（错误、结果）=>{
如果（错误）{
警报（'获取数据时出错：'+Error.toString（））；
}否则{
警报（“结果名称：”+结果名称）；
}
}
}

有关详细信息，请访问此处，它将为您提供更多帮助。

导入React，{Component}来自'React'；
从“react native”导入{View}；
从“react native fbsdk”导入{LoginButton，AccessToken}；
导出默认类FBLogin扩展组件{
initUser=（令牌）=>{
取（'https://graph.facebook.com/v2.5/me?fields=email，名字，姓氏，朋友和访问令牌='+令牌）
。然后（（响应）=>{
response.json（）。然后（（json）=>{
const ID=json.ID
控制台日志（“ID”+ID）；
const EM=json.email
控制台日志（“电子邮件”+EM）；
const FN=json.first\u名称
console.log（“名字”+FN）；
})
})
.catch（（）=>{
console.log（'从FACEBOOK获取数据时出错'）
})
}
render（）{
返回(
{
如果（错误）{
console.log（'登录有错误：'，result.error）
}否则如果（结果被取消）{
console.log（'登录已取消'）
}否则{
AccessToken.getCurrentAccessToken（）。然后（（数据）=>{
const{accessToken}=数据
//日志（accessToken）；
this.initUser（accessToken）
})
}
}
}
onLogoutFinished={（）=>{
console.log（“注销”）；
}}
/>
);
}
};

以下是获取Facebook个人资料信息的完整代码片段

“反应”：“16.13.1”
“反应本机”：“0.63.3”
“反应本机fbsdk”：“^3.0.0”

---

反应很好。我假设SDK中会内置一些东西来处理这些请求，但是一个普通的http请求就可以了。谢谢它可以工作，但下面的答案是使用SDK本身的正确答案。这当然是首选方法，有关更多详细信息，请参阅如何在此方法中设置访问令牌？@Pavindu您可以将其设置为

accessToken:{{value}}

在parameters对象上方。这实际上对我有效。谢谢。它只从access token获取数据。将const方法放入promise回调中的目的是什么？因为您没有将访问令牌传递给

infoRequest

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

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);
    }
  }
}

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>
        );
    }
};

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);
      }
    );
}