Firebase 当前用户更新电话号码答案

【问题标题】：Firebase current user update Phone NumberFirebase 当前用户更新电话号码
【发布时间】：2019-12-09 16:02:09
【问题描述】：

我正在使用 firebase Auth，我有一个包含两个字段名称和电话号码以及 onsubmit 方法的表单，我想更新当前登录用户的电话号码和姓名。但它不会在提交时更新电话号码。仅成功更新用户的显示名。请检查下面的代码。 onUpdateProfile 是表单提交函数。

<template>
  <form @submit.prevent="onUpdateProfile">
    <input type="text" v-model="profile.name" placeholder="Enter Your Name..." />
    <input type="text" v-model="profile.phonenumber" placeholder="Enter Your phone..." />
    <button  type="submit">submit</button>
  </form>
</template>

    methods: {
      onUpdateProfile() {
              firebase.auth().onAuthStateChanged(user => {
                if (user) {
                  //Getting Current User
                  let user = firebase.auth().currentUser;
                  user
                    .updateProfile({
                      displayName: this.profile.name,
                      phoneNumber: this.profile.phoneNumber
                    })
                    .then(() => {console.log('success})
                    .catch(error => {console.log(error});
                  //Updating User other details on submit
                } else {
                }
              });
            }
    }


    data() {
        return {
          profile: {
            name: "",
            phonenumber: ""
          }
        };
      }

【问题讨论】：

运行这段代码有什么问题？
我想更新提交时的电话号码，但它没有更新。我试图在返回 null 的控制台中记录电话号码
您不能通过拨打updateProfile来更改电话号码。相反，您应该致电updatePhoneNumber。见firebase.google.com/docs/reference/js/…

标签： javascript firebase firebase-authentication

【解决方案1】：

您不能使用updateProfile 来更新phoneNumber。您必须使用 updatePhoneNumber API，因为 Firebase 身份验证始终要求在将电话号码保存给用户之前对其进行验证。

这类似于signInWithPhoneNumber。

const phoneNumber = getPhoneNumberFromUserInput();
const appVerifier = new firebase.auth.RecaptchaVerifier(...);
firebase.auth().currentUser.updatePhoneNumber(phoneNumber, appVerifier)
  .then((confirmationResult) => {
    // SMS sent. Prompt user to type the code from the message, then complete
    // verification by calling confirmationResult.confirm(code).
    ...
    return confirmationResult.confirm(smsCode);
  }).then((userCredential) => {
    // Phone set on the user.
  }).catch((error) => {
    // Error occurred.
  });

【讨论】：

【解决方案2】：

更新

根据 Firebase 文档，您似乎只能在使用 firebase-admin 时更新电话号码。没有它，您只能更新基本信息，例如用户的显示名称和个人资料照片 URL。

如果我错了，请随时纠正我。

https://firebase.google.com/docs/auth/admin/manage-users#update_a_user

https://firebase.google.com/docs/auth/web/manage-users#update_a_users_profile

你使用了不同的名字；

在模板中你有这个：

v-model="profile.phonenumber"

在 onUpdateProfile() 方法中

phoneNumber: this.profile.phoneNumber

【讨论】：

更改名称后仍然返回 phoneNumber: null after submit
你试过在控制台上打印 profile.phoneNumber 吗？它是来自表单还是值存在但 updateProfile() merhod 有问题？
你能分享一下正确的 updateProfile() 方法吗
我已经在控制台中注销了 phoneNumber，它返回 null

【解决方案3】：

这对我有用：

async function save(phone: string, e) {
    e.preventDefault();
    const { currentUser:fuser } = firebase.auth();
    if(fuser && fuser.phoneNumber !== phone) {
        try {
            const verifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
                callback: (response) => console.log('callback', response),
                size: 'invisible',
            });
            const phoneProvider = new firebase.auth.PhoneAuthProvider();
            const id = await phoneProvider.verifyPhoneNumber(phone, verifier);
            const code = window.prompt('Bitte zugeschickten Code eingeben');
            const cred = firebase.auth.PhoneAuthProvider.credential(id, code);
            await fuser.updatePhoneNumber(cred);
            console.log('phone number changed', id, cred, fuser);
            setSuccess(true);
        } catch(e) {
            console.error(e);
        }
    }
}

【讨论】：