如何在angular中用firebase实现reCaptcha

Question

我试图用angular中的firebase实现recatcha，但得到了下面的错误。

错误类型错误：无法读取未定义的属性"RecaptchaVerifier">

在.ts文件中，我正在尝试以下操作：

import firebase from 'firebase/app';
recaptchaVerifier: firebase.auth.RecaptchaVerifier;
constructor(private windowService: WindowService) {}
ngOnInit() {
this.windowRef = this.windowService.windowRef;
}
ngAfterViewInit() {
this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
size: 'normal',
callback: (response) => {
...
}
});
this.windowRef.recaptchaVerifier = this.recaptchaVerifier;
this.windowRef.recaptchaVerifier.render();
}

windowService

@Injectable({
providedIn: 'root'
})
export class WindowService {
get windowRef() {
return window;
}
}

在模板中：

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

我做错了什么。提前感谢您的回复！

Answer 1

您将需要从firebase导入所有内容，目前不包括auth。试试这个：

import * as firebase from 'firebase/app';
而不是
import firebase from 'firebase/app';

Answer 2

最后，我将角/火和火球降级为：

"@angular/fire": "^6.0.0",
"firebase": "^7.14.0",

在这种情况下，导入import * as firebase from 'firebase';起作用，我可以使用类似于的RecaptchaVerifier

recaptchaVerifier: firebase.auth.RecaptchaVerifier;
ngOnInit() {
this.windowRef = this.windowService.windowRef;
}
ngAfterViewInit() {
let captchaElement = document.getElementById('recaptcha-container');
if (captchaElement != null) {
this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container',    
{
size: 'normal',
callback: (response) => {
this.disableSignUpBtn = false;
}
});
this.windowRef.recaptchaVerifier = this.recaptchaVerifier;
this.windowRef.recaptchaVerifier.render();
}
}