错误:找不到reCAPTCHA容器或已包含内部元素

Question

我正在尝试使用Ionic2/typescript进行电话号码身份验证,并初始化recaptcha验证程序,如下所示:

.ts文件

    import firebase from 'firebase';

     @IonicPage()
     @Component({
       selector: 'page-login',
       templateUrl: 'login.html',
     })

     export class LoginPage {

    public recaptchaVerifier:firebase.auth.RecaptchaVerifier;
           constructor(afAuth: AngularFireAuth, public authData: AuthProvider, public alertController: AlertController, formBuilder: FormBuilder, public navCtrl: NavController, public navParams: NavParams) {
             this.loginForm = formBuilder.group({
               phone: ['', Validators.compose([Validators.required, 
                 Validator.isValidPhone])]
             });
             try {
               this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
             }catch(e){
               console.log("There was a problem in initializing the recapctha verifier: " + e);
             }
             this.authData.recaptchaVerifier = this.recaptchaVerifier;
           }
}

.html文件

<ion-content padding>
  <div id="recaptcha-container"></div>
  <form [formGroup]="loginForm" (submit)="loginUser()" novalidate>

    <ion-item>
      <ion-label stacked>Phone Number</ion-label>
      <ion-input #phone formControlName="phone" type="phone" placeholder="10 digit mobile number"
        [class.invalid]="!loginForm.controls.phone.valid &&
          loginForm.controls.phone.dirty"></ion-input>
    </ion-item>
    <ion-item class="error-message" *ngIf="!loginForm.controls.phone.valid  &&
      loginForm.controls.phone.dirty">
      <p>Please enter a valid 10 digit mobile number.</p>
    </ion-item>

    <button ion-button block type="submit">
      Next
    </button>

  </form>

</ion-content>

但是,当我运行代码时,我得到:

Error: reCAPTCHA container is either not found or already contains inner elements

我第一次探索离子和火基的世界,我发现很难理解这个问题.以前有人遇到并解决了这个问题吗？任何见解都会有所帮助.

Answer 1

我认为问题在于

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

尚未添加到 DOM（在您的类的构造函数中）。您必须等待它执行此操作。

一件事是 Angular 2 希望您不要直接访问/操作 DOM。您应该使用ElementRef（这里是一个示例，您必须等待 ngAfterContentInit 生命周期事件）或 ViewChild 使用“Angular 方式”来执行此操作。

Answer 2

你应该在view init"ionViewDidEnter"之后调用它

this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

Answer 3

您还可以添加延迟来加载验证码。它对我有用。

JS：

  var defaultApp = firebase.initializeApp(config);
  setTimeout(function() {
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
        'size': 'normal',
        'callback': function(response) {
            console.log("success", response);
        },
        'expired-callback': function() {
            console.log("expired-callback");
        }
    });

    recaptchaVerifier.render().then(function(widgetId) {
        window.recaptchaWidgetId = widgetId;
    });
  },2000);

HTML：

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