Question

我在github和Facebook developers docs上阅读了该文档。
只有样品，仅此而已。没有API文件。

制作图谱API请求的代码是

const infoRequest = new GraphRequest(
  '/me',
  null,
  this._responseInfoCallback,
);

回调

_responseInfoCallback(error: ?Object, result: ?Object) {
  if (error) {
    alert('Error fetching data: ' + error.toString());
  } else {
    alert('Success fetching data: ' + result.toString());
  }
}

以下是制作图谱API请求的功能

testRequestGraphAPI(){
  const infoRequest = new GraphRequest(
  '/me',
  null,
  this._responseInfoCallback,
  );   
    new GraphRequestManager().addRequest(infoRequest).start();
}

但是，我找不到任何进一步的文件。我不知道每个参数做什么。

上述代码的结果是这样的。

我也不知道如何得到结果。

然而，当我尝试将'\ me'修改为'me？fields = id，name'时，它失败了。虽然我已经要求许可

<LoginButton
  publishPermissions={["publish_actions,user_birthday, user_religion_politics, user_relationships, user_relationship_details, user_hometown, user_location, user_likes, user_education_history, user_work_history, user_website, user_managed_groups, user_events, user_photos, user_videos, user_friends, user_about_me, user_status, user_games_activity, user_tagged_places, user_posts, user_actions.video, user_actions.news, user_actions.books, user_actions.music, user_actions.fitness, public_profile, basic_info"]}
  onLoginFinished={
    (error, result) => {
      if (error) {
        alert("login has error: " + result.error);
      } else if (result.isCancelled) {
        alert("login is cancelled.");
      } else {
        AccessToken.getCurrentAccessToken().then(
          (data) => {
            meow_accesstoken = data.accessToken
            alert(meow_accesstoken.toString())
          }
        )
      }
    }
  }
  onLogoutFinished={() => alert("logout.")}/>

但是它不打印出什么错误，只是对象Object。

所以，问题是我不理解Facebook提供的示例代码而没有解释。

这是我的问题，我真的需要你帮助我：
首先，请检查我目前正在查看的javascript code？
如何在 react-native-fbsdk 中使用图形API 来检索一些用户信息（例如：全名）并成功显示< / strong>它（使用警报）？
GraphRequest（）中的每个参数有哪些作用？
_responseInfoCallback 中错误对象和结果对象的结构是什么？

解决方案
感谢@Samuel的回答，我已经更新了我的代码

testRequestGraphAPI: function(){ const infoRequest = new GraphRequest( '/me', { parameters: { fields: { string: 'email,name,first_name,middle_name,last_name' // what you want to get }, access_token: { string: meow_accesstoken.toString() // put your accessToken here } } }, this._responseInfoCallback // make sure you define _responseInfoCallback in same class ); new GraphRequestManager().addRequest(infoRequest).start(); }

回调

_responseInfoCallback: function(error: ?Object, result: ?Object) { alert("meow response"); if (error) { alert('Error fetching data: ' + error.toString()); console.log(Object.keys(error));// print all enumerable console.log(error.errorMessage); // print error message // error.toString() will not work correctly in this case // so let use JSON.stringify() meow_json = JSON.stringify(error); // error object => json console.log(meow_json); // print JSON } else { alert('Success fetching data: ' + result.toString()); console.log(Object.keys(result)); meow_json = JSON.stringify(result); // result => JSON console.log(meow_json); // print JSON } }

*注意：对于console.log（），您需要使用“远程调试JS”，然后打开Chrome开发人员工具以查看日志。

Answer 1

不幸的是，react-native-fbsdk文档没有更新，示例也不能正常工作。

我遇到了同样的问题，我通过尝试和错误解决了这个问题。

要解决您的问题，您需要更改 GraphRequest ，将参数和字段更改为：

  <LoginButton
    onLoginFinished={
      (error, result) => {
        if (error) {
          alert("login has error: " + result.error);
        } else if (result.isCancelled) {
          alert("login is cancelled.");
        } else {

          AccessToken.getCurrentAccessToken().then(
            (data) => {
              let accessToken = data.accessToken
              alert(accessToken.toString())

              const responseInfoCallback = (error, result) => {
                if (error) {
                  console.log(error)
                  alert('Error fetching data: ' + error.toString());
                } else {
                  console.log(result)
                  alert('Success fetching data: ' + result.toString());
                }
              }

              const infoRequest = new GraphRequest(
                '/me',
                {
                  accessToken: accessToken,
                  parameters: {
                    fields: {
                      string: 'email,name,first_name,middle_name,last_name'
                    }
                  }
                },
                responseInfoCallback
              );

              // Start the graph request.
              new GraphRequestManager().addRequest(infoRequest).start()

            }
          )

        }
      }
    }
    onLogoutFinished={() => alert("logout.")}/>

您需要启用远程JS调试才能查看console.log()信息。 https://facebook.github.io/react-native/docs/debugging.html

您可能需要获得一些权限才能获得比姓名和电子邮件更多的信息，因此查看Facebook Graph API文档是个好主意：https://developers.facebook.com/docs/graph-api/overview/

参考：

https://github.com/facebook/react-native-fbsdk/issues/105#issuecomment-206501550

Answer 2

以下是自定义按钮的示例，如果您想制作一个：）

FbLoginButton() {
 LoginManager
  .logInWithReadPermissions(['public_profile'])
  .then(function (result) {
    if (result.isCancelled) {
      alert('Login cancelled');
    } else {
      AccessToken
        .getCurrentAccessToken()
        .then((data) => {
          let accessToken = data.accessToken
          alert(accessToken.toString())

          const responseInfoCallback = (error, result) => {
            if (error) {
              console.log(error)
              alert('Error fetching data: ' + error.toString());
            } else {
              console.log(result)
              alert('Success fetching data: ' + result.toString());
            }
          }

          const infoRequest = new GraphRequest('/me', {
            accessToken: accessToken,
            parameters: {
              fields: {
                string: 'email,name,first_name,middle_name,last_name'
              }
            }
          }, responseInfoCallback);

          // Start the graph request.
          new GraphRequestManager()
            .addRequest(infoRequest)
            .start()

        })
    }
  }, function (error) {
    alert('Login fail with error: ' + error);
   });
  }

Answer 3

谢谢@Samuel。

由于您的帮助，我终于成功从Facebook登录获取用户信息！

但是我很难弄清楚如何才能从结果对象中获取用户名和电子邮件，因为我是React＆Javascript的新手。

P.S。 result [“ name”]是重点，因为它是对象！

所以我为您这样的其他人添加了一些代码。

如果您不喜欢使用代码，请告诉我。

<LoginButton
  onLoginFinished={
    (error, result) => {
      if (error) {
        alert("login has error: " + result.error);
      } else if (result.isCancelled) {
        alert("login is cancelled.");
      } else {

        AccessToken.getCurrentAccessToken().then(
          (data) => {
            let accessToken = data.accessToken
            alert(accessToken.toString())

            const responseInfoCallback = (error, result) => {
              if (error) {
                console.log(error)
                alert('Error fetching data: ' + error.toString());
              } else {
                console.log(result)

                // Here's my code
                alert('Success fetching data: ' + result["name"].toString() + 
                ", " + result["email"].toString()); 
                /*  
                if(your DB already got this email or something unique) {
                  // SignIn()
                } 
                // when your DB doesn't have this email
                else {
                  // Do signUp() with this infomation and SignIn()
                }
                */
              }
            }

            const infoRequest = new GraphRequest(
              '/me',
              {
                accessToken: accessToken,
                parameters: {
                  fields: {
                    string: 'email,name,first_name,middle_name,last_name'
                  }
                }
              },
              responseInfoCallback
            );

            // Start the graph request.
            new GraphRequestManager().addRequest(infoRequest).start()

          }
        )

      }
    }
  }
  onLogoutFinished={() => alert("logout.")}/>

Answer 4

我的代码没有检索用户电子邮件，如果您遇到同样的问题，只需将'email' 放入参数的 logInWithPermission

不起作用

LoginManager.logInWithPermissions(['public_profile']).then(...)

工作

LoginManager.logInWithPermissions(['public_profile', 'email']).then(...)

所有功能

loginWithFacebook = () => {
    LoginManager.logInWithPermissions(['public_profile', 'email']).then(
      login => {
        if (login.isCancelled) {
          console.log('Login Cancelado');
        } else {
          AccessToken.getCurrentAccessToken().then(
            (data) => {
              const accessToken = data.accessToken.toString()
              this.getInfoFromToken(accessToken)
            })
        }
      },
      error => {
        console.log('Erro no login ', console.error(error)
        )
      }
    )
  }

  getInfoFromToken = token => {
    const PROFILE_REQUEST_PARAMS = {
      fields: {
        string: 'id, name, first_name, last_name, birthday, email'
      },
    }
    const profileRequest = new GraphRequest('/me', { token, parameters: PROFILE_REQUEST_PARAMS },
      (error, result) => {
        if (error) {
          console.log('Login Info has an error:', error)
        } else {
          console.log(result)
        }
      },
    )
    new GraphRequestManager().addRequest(profileRequest).start()
  }

Answer 5

尝试

import { GraphRequest, GraphRequestManager } from 'react-native-fbsdk';

export const GetInfoUSer = () => {

return new Promise((resolve, reject) => {

    const infoRequest = new GraphRequest('/me', null, ((error, result) => {
        if (error) {
            reject(error)
        } else {
           resolve(result)
        }
    }))

    new GraphRequestManager().addRequest(infoRequest).start();

  })
}

然后

    onLoginConFacebook = () => {

    LoginManager.logInWithReadPermissions(['public_profile']).then(result => {

        if (result.isCancelled) {
            console.log(':(')
        } else {

            AccessToken.getCurrentAccessToken().then((data) => {

                let myAccessToken = data.accessToken.toString();

                GetInfoUSer().then(response => {
                    console.log(response)
                }).catch(error => {
                    console.log(error)
                })
            }
            ).catch(error => {
                console.log(':(')
            })
        }
    })
}

如何在react-native-fbsdk中使用图API？

5 个答案: