how to update user phone number in firebase.auth (js, ts)

问题

How can i update user phone number which it use for auth in firebase.auth??

Firebase give as method:

updatePhoneNumber(phoneCredential)

But we need give phoneCredential. This credential takes object:

  interface AuthCredential {
    providerId: string;
    signInMethod: string;
  }

What must be in this phoneCredential, i try to send

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

and this is not work ;(

回答1:

Edited: I edited my previous answer as I now think it was far from being right. After researching a bit more, I believe you need to use the built in PhoneAuthProvider to update the user phone number, like below:

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

user.updatePhoneNumber(credential);

Original (wrong): According to the documentation, you need to pass an object with the methods that will return the providerId, signInMethod (which should be phone, as in your code) and smsCode (the sms verification code that was sent to the user mobile as explained here). Give it a try like that:

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

回答2:

You need to get the credential from 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);
    });

回答3:

I'm also having the same problem, In my html page(using ionic 4 modal), I have 2 button send OTP & verify. So this is my solution

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

来源：https://stackoverflow.com/questions/49942415/how-to-update-user-phone-number-in-firebase-auth-js-ts