使用Meteor和React設置自定義FB註冊的問題

Question

因此，我一直試圖創建一個自定義FB登錄Meteor和React，但我卡住了。

到目前爲止，我可以用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; 
});