如何在firebase.auth（js，ts）中更新用户电话号码

Posted 2023-03-13

【中文标题】如何在firebase.auth（js，ts）中更新用户电话号码

【英文标题】：how to update user phone number in firebase.auth (js, ts)

【发布时间】：2018-10-01 05:12:04

【问题描述】：

如何在 firebase.auth 中更新用于身份验证的用户电话号码？？

Firebase 作为方法：

updatePhoneNumber(phoneCredential)

但我们需要提供 phoneCredential。 此凭证接受对象：

  interface AuthCredential 
    providerId: string;
    signInMethod: string;
  

这个phoneCredential中必须有什么，我尝试发送

providerId: 'phone';
signInMethod: 'phone';

这是行不通的;(

【问题讨论】：

您能澄清一下您遇到的错误是什么吗？

【参考方案1】：

如何向现有的已登录用户 (verifyPhoneNumber) 添加电话号码：

const appVerifier = new firebase.auth.RecaptchaVerifier('save-user-button',  size: 'invisible' ) // An element with id="save-user-button" must exist
const authProvider = new firebase.auth.PhoneAuthProvider()
const verificationId = await authProvider.verifyPhoneNumber(phoneNumber, appVerifier)
const verificationCode = window.prompt('Please enter the verification code that was sent to your phone.')
const phoneCredential = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode)
myFirebaseUser.updatePhoneNumber(phoneCredential)

通过电话号码 (signInWithPhoneNumber) 注册/创建新用户：

const appVerifier = new firebase.auth.RecaptchaVerifier('create-new-user-button',  size: 'invisible' ) // An element with id="create-new-user-button" must exist
const confirmationResult = await firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
const verificationCode = window.prompt('Please enter the verification code that was sent to your phone.')
const  user  = await confirmationResult.confirm(verificationCode)

https://firebase.google.com/docs/auth/web/phone-auth

【参考方案2】：

使用当前用户/登录帐户更新PhoneNumber 的解决方案。以防万一这对任何人都有帮助。

问题： 假设您有一个当前登录的帐户，其中包含任意数量的单个/合并帐户，并且他们想要更新他们的号码。他们会怎么做。

解决方案： 以下是 Auth for Web/JS 方法，您的目标平台将存在等效方法。

function updateProfilePhoneNumber() 
    //country code plus your phone number excluding leading 0 if exists.
    var phoneNumber = "+447xxxxxxxxx"; //you could provide a prompt/modal or other field in your UX to replace this phone number.

    // let phoneNumber = "[phone]"; //testing number, ideally you should set this in your firebase auth settings
    // var verificationCode = "123456";

    // Turn off phone auth app verification.
    // firebase.auth().settings.appVerificationDisabledForTesting = true;

    // This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
    // This will resolve after rendering without app verification.
    var appVerifier = new firebase.auth.RecaptchaVerifier(
        "recaptcha-container",
        
            size: "invisible"
        
    );

    var provider = new firebase.auth.PhoneAuthProvider();
    provider.verifyPhoneNumber(phoneNumber, appVerifier)
        .then(function (verificationId) 
            var verificationCode = window.prompt('Please enter the verification ' +
                'code that was sent to your mobile device.');
            phoneCredential = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
            user.currentUser.updatePhoneNumber(phoneCredential);
        )
        .then((result) => 
            // Phone credential now linked to current user.
            // User now can sign in with new phone upon logging out.
            console.log(result);
        )
        .catch((error) => 
            // Error occurred.
            console.log(error);
        );

很高兴在这里得到纠正。

【讨论】：

太好了，谢谢

【参考方案3】：

我也遇到了同样的问题 在我的 html 页面（使用 ionic 4 模式）中，我有 2 个按钮发送 OTP 和验证。 所以这是我的解决方案

<ion-header>
  <ion-toolbar>
    <ion-title>Edit Phone</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <form [formGroup]="phoneForm">
        <ion-item>
        <ion-label position="stacked" >Phone :</ion-label>
          <ion-input
            formControlName="phoneNumber"
            type="tel"
            required="true"
            [class.invalid]="!phoneForm.controls['phoneNumber'].valid && phoneForm.controls['phoneNumber'].touched">
          </ion-input>
        </ion-item>

        <ion-item 
          class="error-message" 
          *ngIf="!phoneForm.controls['phoneNumber'].valid && phoneForm.controls['phoneNumber'].touched">
            <ion-label>Phone Number.</ion-label>
        </ion-item>
        <div id="recaptcha-container" visibility="hidden"></div>
        
        <ion-button id="sign-in-button" *ngIf="!btnSend" (click)="editPhone(phoneForm)" expand="block" [disabled]="!phoneForm.valid" data-badge="inline">SMS OTP</ion-button>
        <ion-button id="sign-in-button" *ngIf="btnSend" expand="block" [disabled]="btnSend" data-badge="inline">timeLeft</ion-button>
        
       

    </form>
</ion-card>


<ion-card>
    <form [formGroup]="verificationForm">
    <ion-item>
        
          <ion-label position="stacked">
            OTP : 
          </ion-label>
              <ion-input formControlName="verificationCode" type="tel" >
          </ion-input>
       
        
    </ion-item>
        <ion-button (click)="verifyPhoneCode()" expand="block" [disabled]="!verificationForm.valid||!verificationSend">
            Verifikasi
        </ion-button>
  </form>
  </ion-card>
</ion-content>

sendOTP()
firebase.auth().currentUser.reauthenticateWithPhoneNumber(this.telepon,this.recaptchaVerifier)
    .then(result=>

      this.confirmationResult = result;//firebase.auth.ConfirmationResult


    )
    .catch(error=>
      this.presentErrorMessage(error.message);
    );


verifyPhoneNumber()
    let phoneProvider = new firebase.auth.PhoneAuthProvider();
            phoneProvider.verifyPhoneNumber(this.telepon, this.recaptchaVerifier)//this.telepon is your new phone number
                 .then(verificationId=>
                    let phoneCredential = firebase.auth.PhoneAuthProvider.credential(verificationId, this.verificationForm.value.verificationCode);
                    firebase.auth().currentUser.updatePhoneNumber(phoneCredential)
                    .then(()=>
                      console.log("Success update phone");
                      this.authService.updatePhone(this.telepon).then(()=> //update my user database
                          this.dismiss(); //I'm using modal dialog for input
                        );
                    );
                  )

【参考方案4】：

您需要从firebase.auth.PhoneAuthProvider.credential 获取凭据。

    // Send verification code to user's phone
    firebase.auth.PhoneAuthProvider.verifyPhoneNumber(phoneNumber, recaptchVerifier).then(function(verificationId) 
      // verification code from user
      var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    );

【参考方案5】：

已编辑：我编辑了之前的答案，因为我现在认为它远非正确。经过一番研究，我相信您需要使用内置的PhoneAuthProvider来更新用户电话号码，如下所示：

const credential = firebase.auth.PhoneAuthProvider.credential( verificationId, verificationCode);

user.updatePhoneNumber(credential);

原文（错误）：根据documentation，您需要通过方法传递一个对象，该方法将返回providerId，signInMethod（should是电话，如您的代码中一样）和 smsCode（发送到用户手机的短信验证码，如 here 所述）。像这样试一试：

updatePhoneNumber(
  getProvider: () =>  return providerStringCode; ,
  getSignInMethod: () =>  return signInMethodStringCode; ,
  getSmsCode: () =>  return smsStringCode; ,
);