react-native-fbsdk -如何获取用户资料？

Question

onLoginFinished的结果只告诉我所授予的权限。在repo中，不清楚如何获取用户配置文件。似乎react-native-fbsdkcore应该包装FBSDKProfile.h，但没有看到它在哪里做。

 var FBSDKLogin = require('react-native-fbsdklogin');
    var {
      FBSDKLoginButton,
    } = FBSDKLogin;

    var Login = React.createClass({
      render: function() {
        return (
          <View>
            <FBSDKLoginButton
              onLoginFinished={(error, result) => {
                if (error) {
                  alert('Error logging in.');
                } else {
                  if (result.isCanceled) {
                    alert('Login cancelled.');
                  } else {
                    alert('Logged in.');
                  }
                }
              }}
              onLogoutFinished={() => alert('Logged out.')}
              readPermissions={[]}
              publishPermissions={['publish_actions']}/>
          </View>
        );
      }
    });

Answer 1

我发现你可以使用Graph API登录用户的个人资料。

// Create a graph request asking for user's profile
var fetchProfileRequest = new FBSDKGraphRequest((error, result) => {
  if (error) {
    alert('Error making request.');
  } else {
    // Data from request is in result
  }
}, '/me');
// Start the graph request.
fetchProfileRequest.start();

Answer 2

有一个更简单的方法可以做到这一点。不是自己手动请求图形，而是使用'react-native-fbsdkcore‘包来获取与登录用户(如果有)相关的数据

变量

 FBSDKCore = require('react-native-fbsdkcore');

var {
  FBSDKAccessToken,
} = FBSDKCore;

FBSDKAccessToken.getCurrentAccessToken((token) => {
  // token will be null if no user is logged in, 
  // or will contain the data associated with the logged in user
});

cphackm地址是此issue #2中的地址

Answer 3

使用@flow，下面是一个完整的示例：

FbLogin.js

// @flow
import * as React from 'react';
import { View } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';
import { FbService } from '@services';
import { toast } from '@libs/helpers';

type LoginResult = {
    isCancelled: boolean,
    grantedPermissions?: Array<string>,
    declinedPermissions?: Array<string>
};

type Props = {
    store: {
        Account: Object
    }
};
type State = {
    token?: string
};

export default class Login extends React.Component<Props, State> {
    componentDidMount() {
        AccessToken.getCurrentAccessToken().then(tokenData => {
            if (tokenData) {
                console.log('[-- tokenData --]', tokenData);
                const { accessToken, userID } = tokenData;
                if (accessToken) {
                    console.log('[-- accessToken, userID --]', accessToken, userID);
                    this.setState({ token: accessToken });
                    // this._getUserInformation();
                }
            }
        });
    }

    _getUserInformation = () => {
        const { token } = this.state;
        const { Account } = this.props.store;

        if (token) {
            FbService.getFbUserData(token, (error, result) => {
                if (error) {
                    console.log('[-- error --]', error);
                } else {
                    Account.provider = 'facebook';
                    Account.authorized = true;
                    Account.current = { password: '', token, ...result };
                    console.log('[-- responseFbUserData --]', result);
                }
            });
        }
    };

    render() {
        return (
            <View>
                <LoginButton
                    readPermissions={['public_profile']}
                    onLoginFinished={(error: Object, result: LoginResult) => {
                        if (error) {
                            alert('Login failed with error: ' + error.toString());
                        } else if (result.isCancelled) {
                            alert('Login was cancelled');
                        } else {
                            if (result) {
                                this._getUserInformation();
                            }
                        }
                    }}
                    onLogoutFinished={() => toast('User logged out', 'info')}
                />
            </View>
        );
    }
}

/* AccessToken
accessToken: string,
applicationID: string,
userID: string,
permissions: Array<string>,
declinedPermissions: Array<string>,
accessTokenSource?: string,
expirationTime: number,
lastRefreshTime: number,
*/

FbService.js

// @flow
import * as React from 'react';
import { GraphRequestManager, GraphRequest, AccessToken } from 'react-native-fbsdk';

export function getFbUserData(token: string, callBack: Function) {
    const profileRequestConfig = {
        httpMethod: 'GET',
        version: 'v2.12',
        parameters: {
            fields: {
                string: 'id, name, email'
            }
        },
        accessToken: token
    };

    const profileRequest = new GraphRequest('/me', profileRequestConfig, callBack);
    new GraphRequestManager().addRequest(profileRequest).start();
}