Ошибка: Uncaught (в обещании): Ошибка: контейнер reCAPTCHA либо не найден, либо уже содержит внутренние элементы - PullRequest
Новая
       8

Ошибка: Uncaught (в обещании): Ошибка: контейнер reCAPTCHA либо не найден, либо уже содержит внутренние элементы

0 голосов
/ 25 октября 2019

Привет, это мой первый вопрос. Я пытаюсь настроить аутентификацию по номеру телефона, используя Ionic 4 & firebase. Я обнаружил, что люди сталкивались с такими же проблемами, как и я, но их предлагаемые решения не работают для меня, поэтому я попытал счастья, создав собственный вопрос. Надеюсь, вы можете помочь мне, спасибо!

Коды работали отлично в другом проекте, я скопировал и вставил всю страницу этого проекта, и reCAPTCHA не работает.

.html файл

<ion-content padding>

  <ion-row>
    <ion-item>
        <ion-label stacked>Phone Number</ion-label>
        <ion-input type="number" [(ngModel)]="PhoneNumber" 
        [ngModelOptions]="{standalone: true}"></ion-input>
    </ion-item>

    <ion-button ion-button id="sign-in-button" 
      (click)="signIn(PhoneNumber)">
      Sign In
    </ion-button>
  </ion-row>    

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

</ion-content>

.ts file 

export class SmsverificationPage implements OnInit {

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

  verificationId: any;
  code: string = "";
  PhoneNumber: any;

  constructor(public navCtrl: NavController, 
    public alertCtrl:AlertController, 
    private route: ActivatedRoute,
    private router: Router,
    public modalController: ModalController) { 

    }

  public recaptchaVerifier:firebase.auth.RecaptchaVerifier;

  signIn(PhoneNumber: number){
    const appVerifier = this.recaptchaVerifier;
    const phoneNumberString = "+" + PhoneNumber;
    firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
      .then( async confirmationResult => {
    // SMS sent. Prompt user to type the code from the message, then sign the
    // user in with confirmationResult.confirm(code).
        let prompt = this.alertCtrl.create({
    inputs: [{ name: 'confirmationCode', placeholder: 'Confirmation Code' }],
    buttons: [
      { text: 'Cancel',
        handler: data => { console.log('Cancel clicked'); }
      },
      { text: 'Send',
        handler: data => {

              confirmationResult.confirm(data.confirmationCode)
              .then(function (result) {
                // User signed in successfully.
                console.log(result.user);
              }).catch(function (error) {
                // User couldn't sign in (bad verification code?)
              });
              this.router.navigate(['/register', this.PhoneNumber]);

        }


          }
        ]
      });
      (await prompt).present();
    })
    .catch(function (error) {
      console.error("SMS not sent", error);
    });

  }

}

При вводе кода подтверждения появляется эта ошибка: 

ERROR Error: Uncaught (in promise): Error: reCAPTCHA container is either not found or already contains inner elements!
at resolvePromise (VM657 polyfills.js:3803)
at resolvePromise (VM657 polyfills.js:3760)
at VM657 polyfills.js:3864
at ZoneDelegate.invokeTask (VM657 polyfills.js:3397)
at Object.onInvokeTask (VM659 vendor.js:76176)
at ZoneDelegate.invokeTask (VM657 polyfills.js:3396)
at Zone.runTask (VM657 polyfills.js:3174)
at drainMicroTaskQueue (VM657 polyfills.js:3565)

Спасибо!

...