使用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;
});