在 Angular 中使用 Firebase 身份验证 RecaptchaVerifier 时出错

Question

我正在尝试使用 Angular 12 和 Firebase 实现 2FA。但我在 ngAfterViewInit 的过程一开始就不断收到错误：

这是我的代码：

  ngAfterViewInit(): void {
    this.windowRef = this.win.windowRef;
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
      'size': 'invisible',
      'callback': (response: any) => {
        console.log('callback ==>',response);
      }
    });
    this.windowRef.recaptchaVerifier.render();      
  }

我主要关注这个例子。

Answer 1

问题出在我的 html 中。我的 if 条件中有一个

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

是假的。我把它移出了 if 条件并且工作得很好。

Answer 2

好吧，我解决了我认为的问题，我正在使用 nextjs 14+，所以问题是没有创建 div 或任何 id 为 的 html 元素

'验证码容器'

上述错误的一个错误可能是这个，下一个问题是您应该将身份验证初始化作为RecaptchaVerifier

的第一个参数

在这里查看

this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {auth, '尺寸': '不可见', '回调'：（响应：任意）=> { console.log('回调==>',响应); } });