Erreur: conteneur reCAPTCHA est soit introuvable ou contient déjà des éléments internes

Question

Je suis en train d'authentification du numéro de téléphone en utilisant Ionic2/tapuscrit et initialiser le vérificateur recaptcha comme ceci:

.ts fichier

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 fichier

<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> 

Cependant quand je lance le code Je reçois:

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

Explorer le monde ionique et de firebase pour la première fois, je trouve qu'il est difficile de comprendre le problème. Quelqu'un a rencontré et résolu ce problème avant? Toute idée sera utile.

Answer 1

Je pense que le problème est que

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

n'a pas été ajouté au DOM encore (dans le constructeur de votre classe). Vous devez attendre pour cela. Une chose est que Angular 2 s'attend à ce que vous n'accédiez/manipulez pas directement le DOM. Vous devriez faire ceci «la manière angulaire», soit avec ElementRef (ici an example, vous devez attendre l'événement ngAfterContentInit lifecycle) ou ViewChild.

Answer 2

vous devriez l'appeler après vue init « ionViewDidEnter »

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

Answer 3

Vous pouvez également ajouter un délai à charger le captcha. Ça a fait l'affaire pour moi.

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>