Firebase UI手机身份验证无法在angular 13上使用@angular/fire进行Firebase web

Question

我使用angular v13和firebaseui以及@angular/fire进行基于firebaseV9 web模块的身份验证，所有登录方法身份验证提供商都在工作，除了电话身份验证我在控制台中得到了错误类型，甚至RecaptchaVerifier也没有显示，我得到了消息错误"；求解reCAPTCHA"；

错误类型错误：app.auth不是函数在新的RecaptchaVerifier(index.esm2017.js:931:13(在K.phoneSignInStart(esm.js:339:310(

app.module.ts

imports: [
BrowserModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => getAuth())
]

import * as firebaseui from 'firebaseui'
import {Auth, PhoneAuthProvider
} from '@angular/fire/auth'
constructor(private auth:Auth){
const ui=new firebaseui.auth.AuthUI(this.auth)
ui.start('#firebaseui-auth-container', {
signInOptions: [
{provider:PhoneAuthProvider.PROVIDER_ID,
recaptchaParameters: {
type: 'image',
size: 'normal',
badge: 'bottomleft' 
}
}              
]
})

我需要使用官方firebaseui 的官方方式

Answer 1

使用Firebase Authentication SDK可以实现

import {Auth,RecaptchaVerifier,signInWithPhoneNumber,PhoneAuthProvider,signInWithCredential} from '@angular/fire/auth'
import {FormGroup,FormControl} from '@angular/forms';
import {Subject, tap} from 'rxjs';

constructor(private auth: Auth) { }
phoneNumber$=new Subject<string>();
code$=new Subject<string>();
phoneNumberForm=new FormGroup({phoneNumberInput:new FormControl('')})
verifyForm=new FormGroup({codeInput:new FormControl('')})
displayPhoneDiv=true;
displayCodeDiv=false;

ngOnInit(): void {
let appVerifier= new RecaptchaVerifier('recaptcha-container', {
'size':'invisible', //'normal'
'callback': (response:any) => {},
'expired-callback': () => {}
}, this.auth)
this.phoneNumber$.pipe(
tap((phoneNumber:string) =>{
this.displayPhoneDiv=false;
signInWithPhoneNumber(this.auth,phoneNumber,appVerifier)
.then((confirmationResult) => {          
this.displayCodeDiv=true
this.code$.pipe(
tap((code) => {
console.log(confirmationResult)
var credential =PhoneAuthProvider.credential(confirmationResult.verificationId,code)
signInWithCredential(this.auth,credential)
.then((result) => {
this.displayCodeDiv=false
console.log(result)
})
})).subscribe()
})
})
).subscribe()         
}
getPhoneNumber(){
this.phoneNumber$.next(this.phoneNumberForm.controls['phoneNumberInput'].value)
}
getCode(){
this.code$.next(this.verifyForm.controls['codeInput'].value)
}

<div *ngIf="displayPhoneDiv">
<h2>Phone Number</h2>
<form [formGroup]="phoneNumberForm" (ngSubmit)="getPhoneNumber()">
<input 
formControlName="phoneNumberInput">
<button type="submit">Sign in</button>
</form>  
</div>

<div *ngIf="displayCodeDiv">
<h2>Verify code</h2>
<form [formGroup]="verifyForm" (ngSubmit)="getCode()">
<input 
formControlName="codeInput">
<button type="submit">Verify Code</button>
</form>  
</div>

<div id="recaptcha-container"></div>