如何在 Angular 中使用 firebase 实现 reCaptcha

Question

我正在尝试使用 angular 的 firebase 实现 recaptcha，但出现以下错误。

ERROR TypeError: Cannot read property 'RecaptchaVerifier' of undefined

在 .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();
}

窗口服务

@Injectable({
   providedIn: 'root'
})
export class WindowService {

   get windowRef() {
       return window;
   }
}

在模板中：

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

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

Answer 1

最后我将 angular/fire 和 firebase 降级为：

"@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();
      }
 }

Answer 2

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

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