Comment utiliser l'API graph avec react-native-fbsdk?

j'ai lu le document, à la fois sur github et développeurs Facebook docs.

Il n'y a que de l'échantillon, rien de plus. Pas de document API.

le code pour faire une requête D'API de graphique est

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

Et la fonction de rappel

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

Et voici la fonction pour faire un Graphique de la demande d'API

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

Cependant, je ne trouve pas de autre document. Je n'ai aucune idée de ce que chacun des paramètres.

voici le résultat pour ces codes ci-dessus.

Success

Je ne sais pas comment obtenir le résultat.

Cependant, lorsque je tente de modifier 'me " pour moi?fields=id, name', ça a échoué. Bien que j'ai demandé la permission!--15-->

<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.")}/>  

Failed

Mais il n'a pas l'impression quelle est l'erreur, juste de l'objet Objet.

donc, le problème est que je ne comprends pas le code échantillon que Facebook fournit sans explication.

voici ma question que j'ai vraiment besoin de vous:

Tout d'abord, veuillez consulter le code javascript que je regarde actuellement?

Comment utiliser API graphiqueréagissent-native-fbsdk pour récupérer quelques informations de l'utilisateur (exemple: nom complet) et affichage (alerte) ?

Ce que chacun des paramètres GraphRequest () faire ?

Quelle est la structure de erreur et résultat objet _réponseseinfocallback?

SOLUTION

Grâce à la réponse de @Samuel, j'ai mis à jour mon code

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

et le rappel

  _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
    } 
  }

* Note: pour console.log (), vous devez utiliser "Debug js Remote" puis ouvrir les outils de développement Chrome pour voir le log.

20
demandé sur Haha TTpro 2016-05-23 09:24:58

3 réponses

malheureusement la documentation react-native-fbsdk n'est pas mise à jour et les exemples ne fonctionnent pas bien.

j'ai eu le même problème et je l'ai résolu par erreur.

GraphRequest ajout params et champs comme ceci:

  <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.")}/>

vous devez activer le Remote JS Debug voir la console.log() info. https://facebook.github.io/react-native/docs/debugging.html

et probablement vous avez besoin d'obtenir quelques permissions pour obtenir plus d'informations que les noms et les e-mails donc c'est une bonne idée de regarder la Documentation de L'API de graphique Facebook: https://developers.facebook.com/docs/graph-api/overview/

Référence:

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

30
répondu Samuel G. P. 2016-05-25 01:40:15

Voici un exemple d'un bouton personnalisé si vous souhaitez faire un :)

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);
   });
  }
5
répondu Bruno Henrique 2017-05-04 13:15:33

Merci @Samuel.

j'ai finalement réussi à obtenir des informations utilisateur de Facebook login à cause de votre aide!

mais j'ai eu du mal à trouver comment obtenir le nom d'utilisateur et le courriel littéralement à partir de l'objet résultat parce que je suis un internaute novice dans React & Javascript.

P. S. result["nom"] est le point parce qu'il est l'objet!!

alors j'ai ajouté du code à la vôtre pour d'autres personnes comme moi.

si vous n'aimez pas utiliser votre code, dites-le moi que.

<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.")}/>
1
répondu Chungmin Park 2018-09-02 12:26:16