错误错误:未捕获(承诺):错误:找不到reCAPTCHA容器或已包含内部元素

时间:2019-10-25 17:56:21

标签: html typescript ionic-framework ionic4 recaptcha

嗨,这是我的第一个问题。我正在尝试使用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文件

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)

谢谢!

0 个答案:

没有答案