Получить текущее имя пользователя Информация о пользователе на странице профиля - Firebase и Vuejs

Question

Я пытаюсь создать профиль пользователя для зарегистрированных пользователей в моем приложении.

Я пытаюсь создать профиль пользователя для зарегистрированных пользователей в моем приложении. Я создал коллекцию с именами профилей и именами полей в моем облачном пожарном хранилище для хранения имени пользователя при регистрации учетной записи.

Итак, я использую vuex для лучшего управления. Вот кусок кода для того, что я сделал до сих пор.

My 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)
          }
        )
    }

My 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 () вызван с неверными данными. Неподдерживаемое значение поля: не определено (найдено в имени поля)

Answer 1

В вашем коде вы используете

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.
    // ...
  }
});