我希望能够在使用 .createUserWithEmailAndPassword 时为 Firebase 中的用户设置“名称”

Question

VueJS 与 Vuex 和 Firebase 一起让我可以轻松地在我的应用中注册用户，但我可以同时为该特定用户创建一个或多个数据库引用吗？ 我可以从用户列表中设置和获取 user.email，但是在实际数据库中创建更多字段时我被卡住了。 你能帮我吗？ 这是我的注册组件代码：

<template>
  <section class="section">
    <h1>Sign-up</h1>

            <h2>Create an Account</h2>
          </div>
          <div class="card-content">
            <form v-on:submit.prevent>
              <div class="field">
                <label class="label">Name</label>
                <div class="control">
                  <input class="input" type="text" placeholder="Your Display Name" v-model="name">
                </div>
              </div>
              <div class="field">
                <label class="label">Email</label>
                <div class="control">
                  <input class="input" type="email" placeholder="joe@bloggs.com" v-model="email">
                </div>
              </div>
              <div class="field">
                <label class="label">Password</label>
                <div class="control">
                  <input class="input" type="password" v-model="password">
                </div>
              </div>
              <button type="submit" class="button is-primary" v-on:click="signUp">Sign-up</button>
            </form>
            <p>Already registered? <router-link to="/Sign-In">Log in</router-link></p>

  </section>
</template>

<script>
import Firebase from "firebase";
export default {
  data: function() {
    return {
      name: "",
      email: "",
      password: ""
    };
  },
  methods: {
    signUp: function() {
      Firebase.auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(
          user => {
            this.$router.replace('dashboard');
          },
          error => {
            alert(error.message);
          }
        );
    }

  }
};
</script>

我假设我可以创建另一种方法，但我真的想让它尽可能简单。

Answer 1

您需要进行额外的 API 调用来设置用户的 displayName：

firebase.auth()
    .createUserWithEmailAndPassword(this.email, this.password)
    .then(
      user => {
        return user.updateProfile({displayName: this.displayName});
      },
      error => {
        alert(error.message);
      }
    );