如何在 firebase.auth 中更新用于身份验证的用户电话号码？？
Firebase 作为方法：
updatePhoneNumber(phoneCredential)
但我们需要提供 phoneCredential。 此凭证接受对象：
interface AuthCredential {
providerId: string;
signInMethod: string;
}
这个phoneCredential中必须有什么，我尝试发送
providerId: 'phone';
signInMethod: 'phone';
这是行不通的;(
【问题讨论】：
标签： javascript typescript firebase authentication firebase-authentication
如何向现有的已登录用户 (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)
【讨论】：
使用当前用户/登录帐户更新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 = "+441234567890"; //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);
});
}
很高兴在这里得到纠正。
【讨论】：
我也遇到了同样的问题 在我的 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
});
});
})
}
【讨论】：
您需要从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);
});
【讨论】：
已编辑：我编辑了之前的答案，因为我现在认为它远非正确。经过一番研究，我相信您需要使用内置的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; },
});
【讨论】：