时间戳

首页 > 解决方案 > “AngularFireAuth”类型上不存在属性“RecaptchaVerifier”

angular - “AngularFireAuth”类型上不存在属性“RecaptchaVerifier”

问题描述

我正在使用 firebase、ionic + angularjs 实现电话身份验证代码，但在 RecaptchaVerifier 我的 TS 文件中出现错误

constructor(
private afauth: AngularFireAuth,
private windowService: WindowService,
private auth: AngularFireModule;  )  { }

ngOnInit() {
  this.windowRef = this.windowService.windowRef;
  {
    this.windowRef.recaptchaVerifier = new this.afauth.RecaptchaVerifier('recaptcha-container', {
      size: 'invisible',
      callback: () => {
        this.disableOTPsendbutton = true;
      }
    });
    this.windowRef.recaptchaVerifier.render();
   }
}

sendOTP() {
  this.afauth.signInWithPhoneNumber(this.phoneNumber, this.windowRef.recaptchaVerifier)
    .then((confirmationResult) =>
    {
      this.windowRef.confirmationResult = confirmationResult;
    }).catch(err => console.log('err1', err));
}

我遇到错误：

this.windowRef.recaptchaVerifier = new this.afauth.RecaptchaVerifier('recaptcha-container', {

vs代码中显示的错误是：

“AngularFireAuth”类型上不存在属性“RecaptchaVerifier”。

标签： angularionic-frameworkfirebase-authentication

解决方案

您需要为 recaptcha 容器创建一个 div，如下所示

<div class='ion-center'
          style="position:relative;z-index:10;width:100%;margin-top:2em;margin-left:2em;margin-right:auto;">
          <div id="recaptcha-container"></div>
        </div>

尝试从 npm 安装 firebase 包

npm install firebase --save

然后将其导入您的 page.ts 文件中，例如

import * as firebase from 'firebase';

用 firebase.auth 替换你的 afauth

this.windowRef.recaptchaVerifier=await new firebase.auth.RecaptchaVerifier('recaptcha-container',{'size':'invisible'});

你的 ngOnInit 应该像

ngOnInit {
this.windowRef=await this.windowService.windowRef;
    this.windowRef.recaptchaVerifier=await new firebase.auth.RecaptchaVerifier('recaptcha-container',{'size':'invisible'});
}

推荐阅读