如何在角度中用Firebase实现reCaptcha

问题描述

我正在尝试用角度的Firebase来实现Recaptcha，但是出现以下错误。

错误TypeError：无法读取未定义的属性'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>

我在做什么错。 预先感谢您的任何答复！

解决方法

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

import * as firebase from 'firebase/app';
代替
import firebase from 'firebase/app';

,

最后，我将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();
      }
 }