facebook-graph-api - loginmanager - react native facebook

¿Cómo usar la API gráfica con react-native-fbsdk?

Question

Leí el documento, tanto en github como en los documentos de desarrolladores de Facebook .
Solo hay muestra, nada más. No hay documento API.

El código para hacer una solicitud Graph API es

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

Y la devolución de llamada

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

Y aquí está la función para hacer una solicitud Graph API.

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

Sin embargo, no puedo encontrar ningún otro documento. No tengo idea de lo que hace cada parámetro.

El resultado de estos códigos arriba es este.

Tampoco sé cómo obtener el resultado.

Sin embargo, cuando intento modificar ''/ me'' a ''me? Fields = id, name'', falló. Aunque he pedido permiso.

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

Pero no imprime qué error, solo objeto Objeto.

Entonces, el problema es que no entiendo el código de ejemplo que Facebook proporciona sin explicación.

Aquí está mi pregunta de que realmente necesito que me ayudes:
En primer lugar, por favor verifique el código javascript que estoy viendo actualmente.
¿Cómo usar la API gráfica en react-native-fbsdk para recuperar información del usuario (ejemplo: nombre completo) y mostrarla correctamente (usar alerta)?
¿Qué hace cada parámetro en GraphRequest () ?
¿Cuál es la estructura del objeto de error y el objeto de resultado en _responseInfoCallback ?

SOLUCIÓN
Gracias a la respuesta de @Samuel, he actualizado mi código.

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

Y la devolución de llamada

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

* Nota: para console.log (), debes usar "Debug JS de forma remota" y luego abrir las herramientas de desarrollo de Chrome para ver el registro.

Answer 1

Aquí hay un ejemplo de un botón personalizado si quieres hacer uno :)

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 2

Desafortunadamente, la documentación de react-native-fbsdk no se actualiza y los ejemplos no funcionan bien.

Tengo el mismo problema y lo resolví por intento y error.

Para resolver su problema, necesitará cambiar su GraphRequest agregándole parámetros y campos de esta manera:

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

Deberá habilitar la depuración remota de JS para ver la información de console.log() . https://facebook.github.io/react-native/docs/debugging.html

Y probablemente necesite obtener algunos permisos para obtener más información que nombres y correo electrónico, por lo que es una buena idea consultar la documentación de la API de Facebook Graph: https://developers.facebook.com/docs/graph-api/overview/

Referencia:

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

Answer 3

Gracias @Samuel.

¡Finalmente conseguí obtener información de usuario del inicio de sesión de Facebook gracias a su ayuda!

Pero me esforcé por descubrir cómo puedo obtener el nombre de usuario y el correo electrónico literalmente del objeto resultante porque soy un novato en React & Javascript.

¡El resultado de PS ["nombre"] es el punto porque es un objeto!

Así que agregué un código tuyo para otras personas como yo.

Si no te gusta usar tu código, dímelo.

<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

prueba esto

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

  })
}

y entonces

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