React-native-fbsdk: Getting user info

[ajoshdee]

Hi, how do you get user information from Graph? I keep getting warnings and can't get the user's info. Sample implementation is much appreciated. thanks

[khelil]

Hi,

I think there's an issue on Android.

After testing different ways to query user informations, here the only way i've find that works on iOS and pass with no compiling errors on Android...but generate a strange behavior on Facebook API...

// Callback function
const responseCallback = ((error, result) => {
  if (error) {
    response.ok = false
    response.error = error
    return(response)
  } else {
    response.ok = true
    response.json = result
    return(response)
  }
})
// params just passes as string, couldn't find another way
const profileRequest = new GraphRequest(
  '/me?fields=id,first_name,last_name,name,picture.type(large),email,gender',
  null,
  responseCallback,
)
// Start the graph request.
new GraphRequestManager().addRequest(profileRequest).start();

it works fine on iOS, and on Android i end up with a token error (errorCode: 2500)

{ exception: {FacebookServiceException: httpResponseCode: 400, facebookErrorCode: 2500, facebookErrorType: OAuthException, message: An active access token must be used to query information about the current user. }

[OysteinDanielsen]

I have issues too (with fbsdk that is). Used the following from the readme:

const FBSDK = require('react-native-fbsdk');
const {
  GraphRequest,
  GraphRequestManager,
} = FBSDK;

// ...

//Create response callback.
_responseCallback(error: ?Object, result: ?Object) {
  if (error) {
    alert('Error posting data: ' + error.toString());
  } else {
    alert('Success posting data: ' + result.toString());
  }
}

// Create a graph request asking for user informations with a callback to handle the response.
const infoRequest = new GraphRequest(
  '/me',
  null,
  this._responseInfoCallback,
);
// Start the graph request.
new GraphRequestManager().addRequest(infoRequest).start();`

It worked and on and off in the beginning but now the callback isn't getting called or I get the following error:

Object {exception: "Unexpected number of results", errorMessage: "Unexpected number of results", errorCode: -1, subErrorCode: -1, requestStatusCode: -1}reactConsoleError @ index.android.bundle:68932console.error @ index.android.bundle:58332(anonymous function) @ index.android.bundle:93244__invokeCallback @ index.android.bundle:63759(anonymous function) @ index.android.bundle:63649guard @ index.android.bundle:63594invokeCallbackAndReturnFlushedQueue @ index.android.bundle:63648onmessage @ debuggerWorker.js:39

I'm on the alpha with Android

[vshy108]

I follow the way @khelil code for android and I tried to put the accessToken in the GraphRequest but I fail. May I know the way to put the accessToken to GraphRequestConfig in GraphRequest? thanks

What I did was I passed following as GraphRequest second argument which is null in @khelil sample code,

{ 
        httpMethod: 'GET',
        version: 'v2.5',
        accessToken: accessToken.toString()
}

[khelil]

Hi,

@vshy108 thanks for the clue...this worked for me on both iOS and Android :

const responseCallback = ((error, result) => {
          if (error) {
                response.ok = false
                response.error = error
                return(response)
          } else {
                response.ok = true
                response.json = result
                return(response)
          }
})

// the famous params object...
const profileRequestParams = {
            fields: {
                string: 'id, name, email, first_name, last_name, gender'
            }
}

const profileRequestConfig = {
            httpMethod: 'GET',
            version: 'v2.5',
            parameters: profileRequestParams,
            accessToken: token.toString()
}

const profileRequest = new GraphRequest(
            '/me',
            profileRequestConfig,
            responseCallback,
)

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

[udfalkso]

I also get an error on Android (same code works on iOS):

I/ReactNativeJS(26219): 'INFO', { exception: '{FacebookServiceException: httpResponseCode: 400, facebookErrorCode: 2500, facebookErrorType: OAuthException, message: An active access token must be used to query information about the current user.}',
I/ReactNativeJS(26219):   batchRequestResult: '{"error":{"message":"An active access token must be used to query information about the current user.","type":"OAuthException","code":2500,"fbtrace_id":"HkXwQVKiUI1"}}',
I/ReactNativeJS(26219):   requestResult: '{"body":{"error":{"message":"An active access token must be used to query information about the current user.","type":"OAuthException","code":2500,"fbtrace_id":"HkXwQVKiUI1"}},"code":400}',
I/ReactNativeJS(26219):   requestResultBody: '{"error":{"message":"An active access token must be used to query information about the current user.","type":"OAuthException","code":2500,"fbtrace_id":"HkXwQVKiUI1"}}',
I/ReactNativeJS(26219):   errorMessage: 'An active access token must be used to query information about the current user.',
I/ReactNativeJS(26219):   errorType: 'OAuthException',
I/ReactNativeJS(26219):   errorCode: 2500,
I/ReactNativeJS(26219):   subErrorCode: -1,
I/ReactNativeJS(26219):   requestStatusCode: 400 }, null

However, when I'm adding the request, it does indeed have access to a valid token (I've verified the token is valid in the browser):

[udfalkso]

Thanks @khelil for pointing me in the right direction! I think I've narrowed down the issue a little bit further.

If I request as follows, it works on Android:

new GraphRequest('/me', { parameters: { fields: { string: 'email,name,first_name,last_name' } } }, callback);

But this fails with a token error:

new GraphRequest('/me?fields=email,name,first_name,last_name', null, callback);

So it seems the bug is related to parameter parsing on Android and not the token, despite the error message that comes back.

(Now it seems that the response comes back as a string and not an object, unlike iOS, but I will open a separate issue for that)

[khelil]

Happy to help @udfalkso !

I agree there's an issue with Android parsing. I had to deal the facebook back with an ugly if...then testing the plateforme, for Android i had to transform the back response on a JSON object JSON.parse(response)

[ajoshdee]

HI, start graph is not working for me. Did something change?

[mikelambert]

Thanks for the diagnosis @khelil and @udfalkso. As you might have guessed, the Android SDK is producing a URL of the form "me?fields=X,Y,Z?access_token=AAAAA&key1=value1&key2=value2" (Namely, it's appending with ?, so the server is broken and doesn't see an access_token at all.)

It's due to them assuming the first thing is a "path" (and not a "path with request parameters"). I've proposed a pull request to fix this in the Android FB SDK codebase, we'll see if they take it:
https://github.com/facebook/facebook-android-sdk/pull/469

Update: This fix was merged in https://github.com/facebook/facebook-android-sdk/pull/470/commits/0a048dcb0e7f93e5f244cec465577e42c8fdf951 on Aug 11.

So it should work now for anyone using the '/me?fields=email,name,first_name,last_name' approach (passing parameters in the URL string).

[AndrewHenderson]

I ran into this issue as well. It seems some commentors are not passing the token in the request.

You'll need to get it from the AccessToken class after the user has logged in.

const FBSDK = require('react-native-fbsdk');
const {
  ...
  LoginManager,
  AccessToken
} = FBSDK;
const TOKEN;
LoginManager.logInWithReadPermissions(['public_profile']).then(function(result) {
  AccessToken.getCurrentAccessToken().then((token) => {
    TOKEN = token;
  })
  ...
})

[muammeralkis]

The above answers did not work for me. I think it was about the syntax. Because my solution is not so different.

I found this solution, hope works for you too 🎉🎉🎉

   async function facebookIn  (){
      await  LoginManager.logOut()

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

    function 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 {
                    if (result.isCancelled) {
                        console.log("Login cancelled");
                    }
                    if(result.email === undefined){
                        Alert.alert("Error","To contiune MyApp plase allow access to your email", "Ok")
                    }
                    else{
                        console.log(result)
                    }
                }
            },
        )
        new GraphRequestManager().addRequest(profileRequest).start()
    }