【问题标题】:Update Firestore document ID and auth email with same method使用相同的方法更新 Firestore 文档 ID 和身份验证电子邮件
【发布时间】:2018-11-26 11:37:18
【问题描述】:

我正在通过构建一个小型项目网站来自学如何编码,但我已经困扰了几天,试图弄清楚如何更新用户的个人资料和帐户信息。我能够弄清楚如何检索和显示信息,但很难让他们更新它

目标:

  1. 更新他们在登录时使用的帐户电子邮件
  2. 更新他们存储在 Firestore 中的全名(我想出了这个)
  3. 更新其用户在 Firestore 中的文档 ID(用于他们的个人资料 slug)

到目前为止,我已经能够弄清楚如何在表单字段中显示所有三个,但只是如何在 Firestore 中更新用户的全名,而第 1 点和第 3 点仍然让我无法理解。

对于目标 2,我在此处 https://firebase.google.com/docs/firestore/manage-data/add-data 使用了 Firestore 文档中的“更新文档”,它成功运行

为了更新用户电子邮件,我尝试从这里使用更新电子邮件方法https://firebase.google.com/docs/auth/web/manage-users

Screenshot of document in Firestore

<template>

  <v-container fill-height>
    <v-layout justify-center align-center v-if="profile">

      <v-flex xs12 sm8 md8 style="max-width: 600px">
        <v-card >
          <v-toolbar dark color="primary">
            <v-toolbar-title>Profile</v-toolbar-title>               
          </v-toolbar>


          <v-flex class="ml-3 my-4">
            <v-avatar size="75px" class="mr-2" >
                        <img
                        class="img-circle elevation-2 "
                        src="https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/lists/1.jpg"
                        >
                    </v-avatar>

                    <v-btn color="primary" >Upload</v-btn>
                    <v-btn>Delete</v-btn> 
          </v-flex>

          <v-spacer></v-spacer>
          <v-divider></v-divider>
          <v-spacer></v-spacer>
          <v-card-text>
            <v-form>
              <v-text-field 
                prepend-icon="person" 
                required 
                v-model="profile.fullname" 
                name="fullname" 
                label="Full Name" 
                type="text">
              </v-text-field>
              <v-text-field 
                v-if="user" 
                prepend-icon="email" 
                required 
                v-model="user.email" 
                name="email" 
                label="Email" 
                type="text">
              </v-text-field>
              <v-text-field 
                v-model="this.profile.id" 
                hint="Create a unique URL for your profile. Many people use their first and last name. <br> [Ex: reel.ly/misha.collins]"
                persistent-hint
                id="username"  
                prepend-icon="link" 
                name="username" 
                required
                label="Profile URL " 
                type="text">
              </v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <!-- <p class="red-text center" v-if="feedback">{{ feedback }}</p> -->
            <v-btn flat @click.native="updatemyProfile" color="primary">Save</v-btn>
          </v-card-actions>
        </v-card>
        <!-- <v-card style="margin-top: 30px" class="elevation-2">
          <v-toolbar dark color="primary">
            <v-toolbar-title>Billing</v-toolbar-title>               
          </v-toolbar>
          <v-card-text>
            <v-form>

            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer> 
          <p class="red-text center" v-if="feedback">{{ feedback }}</p> 
           <v-btn flat @click.native="updateBilling" color="primary">Update Account</v-btn>
          </v-card-actions>
        </v-card> -->
      </v-flex>
    </v-layout>
  </v-container>

</template>

<script>
import db from '@/firebase/init'
import firebase from 'firebase'
import slugify from 'slugify'

export default {
    name: 'Account',
    data () {
      return {
        user: null,
        profile: null,
        feedback: null,
        docid: null
      }

    },

    created () {
      let ref = db.collection('users')        

        // get current profile to list full name
        ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
        .then(snapshot => {
            snapshot.forEach(doc => {
                this.profile = doc.data(),
                this.profile.id = doc.id
            })
        })

        // get current user to list email
        firebase.auth().onAuthStateChanged((user) => {
          if (user) {
              this.user = user

              // console.log(this.user)
          } else {
              this.user.uid = null
          }
        })


    },
    methods: {
      updatemyProfile() {
        // working to change fullname but not document id
        let ref = db.collection('users')  

        // get current profile
        ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
        .then(snapshot => {
            snapshot.forEach(doc => {
                this.profile = doc.data(),
                this.profile.id = doc.id
            })
        })

        var docRef = db.collection("users").doc(this.profile.id)

        return docRef.update({
          id: this.profile.id, // this is adding an id field and assigning this.profile.id value to it instead of updating the document id of the user
          fullname: this.profile.fullname
        })

        // update email address
        var user = firebase.auth().currentUser
          user.updateEmail(this.user.email).then(function() {
            console.log("success")
          }).catch(function(error) {
            // An error happened.
        })
        }
      }
}

</script>

非常感谢任何帮助!

【问题讨论】:

    标签: firebase firebase-realtime-database vue.js firebase-authentication google-cloud-firestore


    【解决方案1】:

    查看函数末尾的这段代码:

        var docRef = db.collection("users").doc(this.profile.id)
    
        return docRef.update({
          id: this.profile.id,
          fullname: this.profile.fullname
        })
    
        // update email address
        var user = firebase.auth().currentUser
          user.updateEmail(this.user.email).then(function() {
            console.log("success")
          }).catch(function(error) {
            // An error happened.
        })
    

    在您调用update() 方法后,您从带有return 关键字的函数中提前返回,这意味着函数中的任何代码(更新电子邮件地址)都不会运行。

    【讨论】:

    • 感谢您指出这一点,已删除!尽管更新电子邮件代码仍然不会更新 Firebase 中的电子邮件,并且仍然无法更新 Firestore 中用户的文档 ID。任何关于这些的提示将不胜感激!
    • 如果我只更改电子邮件并提交,我会收到 Post 400 错误。如果我只尝试在字段中键入字母后立即更改配置文件 URL 字段,那么控制台现在会抛出两个错误。 1. [Vue 警告]:“输入”的事件处理程序出错:“TypeError:无法读取 null 的属性 'profile'”和 2. TypeError:无法读取 null 的属性 'profile'。我仍然可以上传全名字段
    • 您现在遇到的其他问题与第一个问题无关,也与 Firebase 无关。可能最好再问一个问题并描述一下现在发生了什么。
    猜你喜欢
    • 2021-04-24
    • 2021-09-05
    • 2020-11-22
    • 1970-01-01
    • 2020-06-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多