使用Meteor和React设置自定义FB注册时出现问题

Question

所以我一直在尝试用Meteor和React创建一个自定义的FB登录，但是我被困住了。

到目前为止，我已经能够使用FB注册，在数据库中创建用户，但是现在我的当前用户显示为undefined undefined而不是名字和姓氏。

我知道我需要在某个地方设置值，但是我对应该在何处或如何执行此操作感到迷茫。

如果有人有设置的经验，请给我一个正确的方向。

这是我当前的注册表单代码：

 import React, { Component } from 'react'; import { Link } from 'react-router'; import { Row, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'; import { handleSignup } from '../../modules/signup'; export class Signup extends Component { componentDidMount() { handleSignup({ component: this }); } handleSubmit(event) { event.preventDefault(); } socialLogin(event) { event.preventDefault(); const service = event.target.getAttribute( 'data-social-login' ), options = { requestPermissions: [ 'email' ] }; if ( service === 'loginWithTwitter' ) { delete options.requestPermissions; } Meteor[ service ]( options, ( error ) => { if ( error ) { Bert.alert( error.message, 'danger' ); } }); } render() { return ( <div className="login-form"> <Col xs={12} md={4} sm={4} /> <Col xs={ 12 } md={ 4 } sm={ 4 } > <h4 className="page-header">Sign Up</h4> <form ref="signup" className="signup" onSubmit={ this.handleSubmit }> <Row> <Col xs={ 6 } sm={ 6 }> <FormGroup> <ControlLabel>First Name</ControlLabel> <FormControl type="text" ref="firstName" name="firstName" placeholder="First Name" /> </FormGroup> </Col> <Col xs={ 6 } sm={ 6 }> <FormGroup> <ControlLabel>Last Name</ControlLabel> <FormControl type="text" ref="lastName" name="lastName" placeholder="Last Name" /> </FormGroup> </Col> </Row> <FormGroup> <ControlLabel>Email Address</ControlLabel> <FormControl type="text" ref="emailAddress" name="emailAddress" placeholder="Email Address" /> </FormGroup> <FormGroup> <ControlLabel>Password</ControlLabel> <FormControl type="password" ref="password" name="password" placeholder="Password" /> </FormGroup> <Button type="submit" bsStyle="success">Sign Up</Button> </form> <hr/> <Button className= "fb-button" data-social-login="loginWithFacebook" type="button" onClick={ this.socialLogin }> <i className="fa fa-facebook"></i> Sign in with Facebook </Button> <p>Already have an account? <Link to="/login">Log In</Link>.</p> </Col> <Col xs={12} md={4} sm={4} /> </div> ) } } 

这是我的handleSignup文件：

 import $ from 'jquery'; import 'jquery-validation'; import { browserHistory } from 'react-router'; import { Accounts } from 'meteor/accounts-base'; import { Bert } from 'meteor/themeteorchef:bert'; import { getInputValue } from './get-input-value'; let component; const getUserData = () => ({ email: getInputValue(component.refs.emailAddress), password: getInputValue(component.refs.password), profile: { name: { first: getInputValue(component.refs.firstName), last: getInputValue(component.refs.lastName), }, }, }); const signUp = () => { const user = getUserData(); Accounts.createUser(user, (error) => { if (error) { Bert.alert(error.reason, 'danger'); } else { browserHistory.push('/'); Bert.alert('Welcome!', 'success'); } }); }; const validate = () => { $(component.refs.signup).validate({ rules: { firstName: { required: true, }, lastName: { required: true, }, emailAddress: { required: true, email: true, }, password: { required: true, minlength: 6, }, }, messages: { firstName: { required: 'First name?', }, lastName: { required: 'Last name?', }, emailAddress: { required: 'Need an email address here.', email: 'Is this email address legit?', }, password: { required: 'Need a password here.', minlength: 'Use at least six characters, please.', }, }, submitHandler() { signUp(); }, }); }; export const handleSignup = (options) => { component = options.component; validate(); }; 

当我在Chrome的控制台中运行console.log（Accounts）时，我得到了返回的信息，对吗？ ：

 ccountsClient LOGIN_TOKEN_EXPIRES_KEY : "Meteor.loginTokenExpires" LOGIN_TOKEN_KEY : "Meteor.loginToken" USER_ID_KEY : "Meteor.userId" _accountsCallbacks : Object _autoLoginEnabled : true _hashPassword : (password) _lastLoginTokenWhenPolled : null _loggingIn : false _loggingInDeps : Tracker.Dependency _loginServicesHandle : Object _onLoginFailureHook : Hook _onLoginHook : Hook _onLogoutHook : Hook _options : Object _pageLoadLoginAttemptInfo : null _pageLoadLoginCallbacks : Array[0] _pollIntervalTimer : 3 changePassword : (oldPassword, newPassword, callback) connection : Connection createUser : (options, callback) forgotPassword : (options, callback) oauth : Object resetPassword : (token, newPassword, callback) users : Mongo.Collection verifyEmail : (token, callback) __proto__ : AccountsCommon 

Answer 1

如我所见，您已经成功创建了用于FB登录的用户帐户。 现在需要做的是在服务器Meteor.onCreateUser上设置此钩子，在此钩子中，您可以设置新创建的用户的profile对象：

Accounts.onCreateUser(function(options, user) {

  user.profile = {};

  if (user.services.facebook) {
    const faceProfile = user.services.facebook;

    // merge default profile with facebook profile
    options.profile = {
      ...options.profile,
      firstName: faceProfile.first_name,
      lastName: faceProfile.last_name,
      avatar: `//graph.facebook.com/${faceProfile.id}/picture/?type=large`,
    };

    // if you want to set emails too
    options.emails = [
      {
        address: faceProfile.email,
      }
    ];
  }

  if (options.profile) {
    user.profile = options.profile;
  }

  if (options.emails) {
    user.emails = options.emails;
  }

  return user;
});