我正在尝试为我的应用程序中的注册用户创建用户个人资料。
我正在尝试为我的应用程序中的注册用户创建用户个人资料。 我在我的Cloud Firestore中创建了一个名为个人档案和字段名称的集合，以在用户注册帐户时存储用户的名称。
因此，我正在使用vuex进行更好的管理。这是到目前为止我所做的代码。
我的Store.js
signUserUp ({commit}, payload) {
commit('setLoading', true)
commit('clearError')
firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
.then(
user => {
commit('setLoading', false)
const newUser = {
id: user.uid
}
commit('setUser', newUser)
// Add a new document in collection "cities"
db.collection('profiles').doc(user.user.uid).set({
name: payload.name
})
.then(function () {
console.log('Document successfully written!')
})
.catch(function (error) {
console.error('Error writing document: ', error)
})
toastr.success('Your Account was created successfully')
}
)
.catch(
error => {
commit('setLoading', false)
commit('setError', error)
toastr.error('Oops' + error.message)
}
)
}
我的SignUp.vue
这是我的文本字段，用于首先收集用户名，然后收集用户的电子邮件和密码。
<form @submit.prevent="onSignup">
<v-layout row>
<v-flex xs12>
<v-text-field
name="name"
label="Name"
id="name"
v-model="name"
type="text"
required></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
name="email"
label="Email"
id="email"
v-model="email"
type="email"
required></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
:type="showPassword ? 'text' : 'password'"
name="password input-10-2"
label="Password"
id="password"
value=""
class="input-group--focused"
v-model="password"
@click:append="showPassword = !showPassword"
required
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
:append-icon="showPasswordConfirm ? 'visibility' : 'visibility_off'"
:type="showPasswordConfirm ? 'text' : 'password'"
name="confirmPassword input-10-2"
label="Confirm Password"
id="confirmPassword"
value=""
class="input-group--focused"
v-model="confirmPassword"
@click:append="showPasswordConfirm = !showPasswordConfirm"
:rules="[comparePasswords]"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12 sm6 class="text-xs-center text-sm-left">
<v-btn
color="#4527a0"
type="submit"
class="btn__content"
:loading="loading"
:disabled="loading"
@click="loader = 'loading'"
>
Sign up
<span slot="loader" class="custom-loader">
<v-icon light>cached</v-icon>
</span>
</v-btn>
</v-flex>
<v-flex xs12 sm6 class="mt-3 text-xs-center text-sm-right">
<router-link to="/signin" tag="span" style="cursor: pointer;">Already have an Account? Sign in</router-link>
</v-flex>
</v-layout>
</form>
SignUp.vue的脚本
export default {
data () {
return {
name: null,
email: null,
password: '',
confirmPassword: '',
showPassword: false,
showPasswordConfirm: false,
loader: null
}
},
methods: {
onSignup () {
this.$store.dispatch('signUserUp', {email: this.email, password: this.password})
}
}
我希望用户在注册帐户时输入的名称被推送到我的个人资料集中的字段中。但是我遇到了这个错误
DocumentReference.set（）用无效数据调用。不支持的字段值：未定义（在字段名称中找到）
答案 0 :(得分：2)
在您的代码中，您正在使用
firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password).then(user=>{
//getting your user details
});
但是没有任何
然后（用户=> {//用户详细信息}）
firebase中的功能，用于在注册或登录后获取用户详细信息。
有一个单独的功能可以检查用户的身份验证状态，您可以在其中获取用户详细信息，然后将其存储在Firestore中。 您可以使用以下方法：-
用于用户注册：
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
注册后，您必须登录用户才能在身份验证查看器中获取用户详细信息。
对于用户登录：
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
用户成功登录后，您可以在观察器中获取有关该用户的信息。
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var isAnonymous = user.isAnonymous;
var uid = user.uid;
var providerData = user.providerData;
// ...
} else {
// User is signed out.
// ...
}
});